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

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

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

@ -4,31 +4,35 @@ html, body {
height: 100%; height: 100%;
} }
#wrapper { #outputsection {
min-height: 100%; min-height: 80%;
}
#header > a {
color: red;
} }
#main { #main {
height: 100%; height: auto;
min-height: 100%; padding-top: 10px;
padding-bottom: 100px; padding-left: 10px;
padding-right: 10px;
padding-bottom: 1px;
} }
.textoutput { .textoutput {
height: auto; position:absolute;
width: 98%; top:30px;
min-height: 100%; bottom: 40px;
min-width: 98% !important; left:10px;
right: 10px;
overflow: hidden; overflow: hidden;
padding-left:2em;
background: rgba(201, 201, 201, 0.65); background: rgba(201, 201, 201, 0.65);
} }
#footer { #footer {
position: relative; position: relative;
margin-top: -100px; height: 40px;
height: 100px; width: 98%;
clear: both; 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 // make sure textarea fills surrounding div
$('.textoutput').css({height:(300-$('.form').height())+'px'}); //$('.textoutput').css({height:($(window).height()-$('.footer').height())+'px'});
//$('textarea').css({'height':"100%"}); //$('.textoutput').css({height:($(window).height() - 120 + "px")});
// configurations // configurations
$(".echo").on("change", function(event) { $(".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> <script src="evennia.js"></script>
<!--[if !IE 7]> <!--[if !IE 7]>
<style type="text/css"> <style type="text/css">
#wrap {display:table;height:100%} #outputsection {display:table;height:100%}
</style> </style>
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<div id="wrapper"> <div id="outputsection">
<!-- Config menu button --> <!-- 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"> <div id="main">
<!--Outputs --> <!--Outputs -->
<div class="textoutput" readonly>Test textoutput </div> <div class="textoutput">Test textoutput </div>
</div> </div>
</div> </div>
<!-- Inputs --> <!-- Inputs -->
<div id="footer"> <div id="footer">
<div class="small-12 colums"> <!-- hide inputs behind tabs -->
<!-- hide inputs behind tabs --> <ul class="tabs" data-tab>
<ul class="tabs" data-tab> <li class="tab-title active"><a href="#singleinput">Single-line</a></li>
<li class="tab-title active"><a href="#singleinput">Single-line</a></li> <li class="tab-title"><a href="#multiinput">Multi-line</a></li>
<li class="tab-title"><a href="#multiinput">Multi-line</a></li> </ul>
</ul> <!-- single-line input -->
<!-- single-line input --> <div class="tabs-content">
<div class="tabs-content"> <div class="content active" id=singleinput>
<div class="content active" id=singleinput> <form class="input_singleline" action="send">
<form class="input_singleline" action="send"> <div class="row">
<div class="row"> <div class="small-11 large-11 columns">
<div class="small-11 large-11 columns"> <input type="text">
<input type="text">
</div>
<div class="small-1 large-1 columns">
<input type="submit" value="Send">
</div>
</div> </div>
</form> <div class="small-1 large-1 columns">
</div> <input type="submit" value="Send">
<!-- 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> </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> </div>
</div> </div>