Annikka/evennia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Having trouble with css positioning

Browse source
This commit is contained in:
Griatch 2015-06-19 09:50:48 +02:00
parent fc74b24646
commit f7f0e93214
3 changed files with 64 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

34
evennia/web/webclient/static/webclient/css/evennia.css
View file

@ -4,31 +4,35 @@ html, body {
height: 100%;
}
#wrapper {
min-height: 100%;
#outputsection {
min-height: 80%;
}
#header > a {
color: red;
}
#main {
height: 100%;
min-height: 100%;
padding-bottom: 100px;
height: auto;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 1px;
}
.textoutput {
height: auto;
width: 98%;
min-height: 100%;
min-width: 98% !important;
position:absolute;
top:30px;
bottom: 40px;
left:10px;
right: 10px;
overflow: hidden;
padding-left:2em;
background: rgba(201, 201, 201, 0.65);
}
#footer {
position: relative;
margin-top: -100px;
height: 100px;
height: 40px;
width: 98%;
clear: both;
}
*/
}

12
evennia/web/webclient/static/webclient/js/evennia.js
View file

@ -243,9 +243,17 @@ initialize = function() {
}
});
//console.log("windowsize: " + $(window).height() + " footerheight: " + $('.footer').height())
//$(window).on("resize", function(event) {
// $('.textoutput').css({height:($(window).height() - 120 + "px")});
//});
// resizing
// make sure textarea fills surrounding div
$('.textoutput').css({height:(300-$('.form').height())+'px'});
//$('textarea').css({'height':"100%"});
//$('.textoutput').css({height:($(window).height()-$('.footer').height())+'px'});
//$('.textoutput').css({height:($(window).height() - 120 + "px")});
// configurations
$(".echo").on("change", function(event) {

70
evennia/web/webclient/static/webclient/js/testclient.html
View file

@ -12,57 +12,57 @@
<script src="evennia.js"></script>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
#outputsection {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="outputsection">
<!-- Config menu button -->
<a href="#" data-reveal-id="ConfigMenu">Config</a>
<div id="header">
<a href="#" data-reveal-id="ConfigMenu">Config</a>
</div>
<div id="main">
<!--Outputs -->
<div class="textoutput" readonly>Test textoutput </div>
<div class="textoutput">Test textoutput </div>
</div>
</div>
<!-- Inputs -->
<div id="footer">
<div class="small-12 colums">
<!-- hide inputs behind tabs -->
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#singleinput">Single-line</a></li>
<li class="tab-title"><a href="#multiinput">Multi-line</a></li>
</ul>
<!-- single-line input -->
<div class="tabs-content">
<div class="content active" id=singleinput>
<form class="input_singleline" action="send">
<div class="row">
<div class="small-11 large-11 columns">
<input type="text">
</div>
<div class="small-1 large-1 columns">
<input type="submit" value="Send">
</div>
<!-- hide inputs behind tabs -->
<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#singleinput">Single-line</a></li>
<li class="tab-title"><a href="#multiinput">Multi-line</a></li>
</ul>
<!-- single-line input -->
<div class="tabs-content">
<div class="content active" id=singleinput>
<form class="input_singleline" action="send">
<div class="row">
<div class="small-11 large-11 columns">
<input type="text">
</div>
</form>
</div>
<!-- multi-line input-->
<div class="content" id=multiinput>
<form class="input_multiline" action="send">
<div class="row">
<div class="large-11 columns">
<textarea></textarea>
</div>
<div class="large-1 columns">
<input type="submit" value="Send">
</div>
<div class="small-1 large-1 columns">
<input type="submit" value="Send">
</div>
</form>
</div>
</div>
</form>
</div>
<!-- multi-line input-->
<div class="content" id=multiinput>
<form class="input_multiline" action="send">
<div class="row">
<div class="large-11 columns">
<textarea></textarea>
</div>
<div class="large-1 columns">
<input type="submit" value="Send">
</div>
</div>
</form>
</div>
</div>
</div>