I am trying to layout a header that will resize vertically to fit the content, and a footer that will resize vertically the remaining then scroll any overflow given a fixed size container. Using CSS box-flex I have an example that works in Chrome but not Firefox (http://jsfiddle.net/V4Uc2/). What CSS styles do I need to add to ensure that Firefox doesn't allow any overflow from the container and acts like Chrome? Here is inlined code:
<style>
.container
{
background: #fee;
height: 400px;
width: 400px;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
}
.header
{
background: #fee;
-webkit-box-flex: 0;
-moz-box-flex: 0;
box-flex: 0;
}
.footer
{
background: #eef;
overflow: auto;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
}
</style>
<div class="container">
<div class="header">...</div>
<div class="footer">...</div>
</div>
Add
width: 100%;
in your footer css description.
That prevents an overflow horizontally, firefox keeps your 400px then as a fixed width.
Related
I need solve some task in vanilla html+css - bootstrap code for desktop browser-based application. So, I can't use libraries such as jQuery or Ext.
There are container 'wrapper' with three boxes - 'header', 'pane', 'content'. I need the following - wrapper and all three boxes always fit into single screen and take 100% of height/width
Header is going to be a toolbar and pane is a fixed height box. Content takes the rest of the screen.
I'm unable to make content fit into the rest of page. Can anybody help me ?
Another problem - I need to have testarea in the pane and content. Of course, there are lot's of such contols but I can't use them because this is bootstrap code.
I've created sample page: http://jsfiddle.net/madhollander/6r4nu/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>filterIt</title>
<style>
#wrapper
{
position:absolute;
top:0px;
left:0px;
right:0;
bottom:0px;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
}
#header
{
display: -webkit-box;
width:100%;
background-color:blue;
-webkit-box-orient:vertical;
}
#pane
{
display: -webkit-box;
width:100%;
height:100px;
background-color:black;
-webkit-box-flex: 1;
-webkit-box-orient:vertical;
}
#content
{
display: -webkit-box;
width:100%;
background-color:green;
overflow-x: scroll;
overflow-y: scroll;
-webkit-box-flex: 1;
-webkit-box-orient:vertical;
}
.textbox{
width:100%;
display:block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
resize:none;
overflow-x: scroll;
overflow-y: scroll;
}
</style>
</head>
<body onload='onload();run();'>
<div id='wrapper'>
<div id='header'>
<button type="button">Apply</button>
</div>
<div id='pane'>
<textarea class="textbox" id="command" wrap="off">command sample</textarea>
</div>
<div id='content'>
<textarea class="textbox" wrap="off" id='log'>log sample</textarea>
</div>
</div>
</body>
</html>
You're simply using the Flexbox module incorrectly. Some properties only apply to flex containers, others only apply to flex items. Also never use the old Flexbox properties unless you're also using the modern properties.
http://codepen.io/cimmanon/pen/DcesF
#wrapper {
position: absolute;
top: 0px;
left: 0px;
right: 0;
bottom: 0px;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#header {
width: 100%;
background-color: blue;
}
#pane {
width: 100%;
height: 100px;
background-color: black;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;
}
#content {
width: 100%;
background-color: green;
overflow-x: scroll;
overflow-y: scroll;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1 1;
-ms-flex: 1 1;
flex: 1 1;
}
.textbox {
width: 100%;
display: block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
resize: none;
overflow-x: scroll;
overflow-y: scroll;
}
What you could do to make this 'fluid' layout is to set the #wrapper to height: 100%;
This stretches it to the body's height (which you should also set to 100% - as some browsers handle this different from others)
Furthermore, you could set a percentage for each element in height which you can always change to your liking, ofcourse you should set min-height rather than height, otherwise your elements will overflow and cause layout glitches.
Your page will then look like this:
http://jsfiddle.net/6r4nu/1/
Not sure I understand your question correctly, but here you go anyway:
If you need the three div's to fill the page vertically, you just need to give your wrapper (and further parent elements) a height of 100%. Then to fill the page, each div gets a height of 33.3%.
like this:
#wrapper{
height:100%;
}
#header, #content, #pane{
height:33.3%
}
If they shouldn't be equally heigh, just re-calculate the percentage so they add up to 100%.
I'm creating a toolbar style navigation menu, where the content is added dynamically into the container.
I want to align the container div's center vertically to the center of the screen.
Here is my approach
http://cssdeck.com/labs/cmwvyjud
I know that this is not how it should be, but I'm unable to find alternative ways of doing this vertical alignment. Any help is appreciated.
If you know the height of the content that needs to be centered you can take half of that height and use something like margin-top:-(contentHeight/2)px
See example at : http://cssdeck.com/labs/atwispr6, here I know the content is 300px, so when I take half I have 150px. So margin-top:-150px
Edit
I have updated the example, to make it dynamic
$(function(){
var $container = $("#container")
$container.css("margin-top", "-" + ($container.height()/2) + "px");
});
If you're looking for a pure CSS solution, you have 2 options. If you're willing to add an additional container, you could use display: table. If the markup cannot change, then Flexbox is what you're looking for.
Display: table
http://cssdeck.com/labs/jdzltkla
body{
background-color:black;
}
#container{
position: fixed;
display: table;
top: 0;
bottom: 0;
left: 10px;
}
.foo {
display: table-cell;
vertical-align: middle;
}
#container .foo > * {
width: 50px;
height: 50px;
background-color:white;
margin-bottom: 10px;
}
<div id="container">
<div class="foo">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
This works in just about everything, including IE8+
Flexbox
http://codepen.io/cimmanon/pen/sKqkE
body {
background-color: black;
}
#container {
position: fixed;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
top: 0;
bottom: 0;
left: 10px;
}
#container * {
width: 50px;
height: 50px;
background-color: white;
margin-bottom: 10px;
}
This works in Chrome, Opera, Firefox, IE10, and Safari.
the content is 300px, screen height is (for Ex 768px), so you must compare your content with screen height, not content itself...
so content is about 40% of screen height, and you can use top:25%; for top..
or in jQuery :
var container_height = parseInt($("#container").css("height"));
$("#container").css("top", (parseInt((screen.height-container_height)/2))+"px");
I am using box-flex for my layout, but I am unable to get the flex box to scroll.
HTML:
<div class='dashboard'>
<div><button>Widget</button></div>
<div class="noboard"><button>Yammer</button>
<div class="yammerboard" >
<div><button>Dashboard22</button></div>
<div><button>Dashboard22</button></div>
<div><button>Dashboard22</button></div>
<div><button>Dashboard22</button></div>
<div><button>Dashboard22</button></div>
</div>
</div>
<div><button>Notifications</button></div>
</div>
CSS:
.dashboard {
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
box-orient:vertical;
-ms-box-orient: horizontal;
-moz-box-orient:horizontal;
-webkit-box-orient: horizontal;
border: solid 2px black;
overflow-y:auto;
}
.noboard {
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-box;
box-orient:vertical;
-ms-box-orient: vertical;
-moz-box-orient:vertical;
-webkit-box-orient: vertical;
overflow-y:auto;
}
.yammerboard {
display: box;
display: -webkit-box;
display: -moz-inline-box;
display: -ms-box;
box-orient:vertical;
-ms-box-orient: vertical;
-moz-box-orient:vertical;
-webkit-box-orient: vertical;
overflow-y:scroll;
-moz-box-sizing: inherit;
box-flex: 0;
-ms-box-flex: 0;
-moz-box-flex: 0;
-webkit-box-flex: 0;
-moz-box-lines:multiple;
}
In Firefox I want it to scroll with overflow:auto and to stop the flex box from expanding vertically. Setting box-flex: 0; is not working.
Any suggestions on how to achieve this?
I had a similar problem with vertical scrolling on a flex box in Firefox. When content overflowed vertically, Firefox would display scrollbar gutters, but no scroll handle, and the content box remained fixed and unscrollable.
I solved the issue by simply adding a min-height to the box with the flex-box property. I needed to set a min-height anyway, but you can hack in min-height:1px in any case.
I have only tested this behavior in Firefox 13, YMMV.
Flex boxes are pretty quirky in Firefox right now, it's a little unrefined. There's a known issue that they don't work under fixed or absolute positioned elements. Also let it be known that for flex boxes to work in Firefox, there HAS to be a width, or else it'll just be treated as an inline block.
after researching the flexible box model for a whole day, I must say I really like it. It implements the functionality I implement in JavaScript in a fast and clean way. One thing however bugs me:
I can't expand a div to take the full size calculated by the flexible box model!!!
To illustrate it I'll proved an example. In it the two flexible places take the exact with and height, but the div inside it only takes the height of the "<p>...</p>" element. For this example it doesn't matter but what I originally was trying was placing a "flexible box model" inside another "flexible box model" and this must be possible in my opinion
html, body {
font-family: Helvetica, Arial, sans-serif;
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#box-1 {
background-color: #E8B15B;
}
#box-2 {
background-color: #C1D652;
}
#main {
width: 100%;
height: 100%;
overflow-x: auto;
overflow-y: hidden;
}
.flexbox {
display:-moz-box;
display:-webkit-box;
display: box;
text-align: left;
overflow: auto;
}
H1 {
width: auto;
}
#box-1 {
height: auto;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
-moz-box-flex: 3;
-webkit-box-flex: 3;
box-flex: 3;
}
#box-2 {
height: auto;
min-width: 50px;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
box-orient: vertical;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
#fullsize{
background-color: red;
height: 100%;
}
<div id="main" class="flexbox">
<div id="box-1" class="flexbox">
<div id="fullsize">
<p>Hallo welt</p>
</div>
</div>
<div id="box-2" class="flexbox">
</div>
</div>
I've been wrestling with this myself, but have finally managed to come up with a solution.
See this jsFiddle, although I have only added webkit prefixes so open in Chrome.
You basically have 2 issues which I will deal with separately.
Getting the child of a flex-item to fill height 100%
Set position:relative; on the parent of the child.
Set position:absolute; on the child.
You can then set width/height as required (100% in my sample).
Fixing the resize scrolling "quirk" in Chrome
Put overflow-y:auto; on the scrollable div.
The scrollable div must have an explicit height specified. My sample already has height 100% but if none is already applied you can specify height:0;
See this answer for more information on the scrolling issue.
You must also make the div you want to expand a flex-box as well and add a flex value.
This fixes the problem.
#fullsize{
background-color: red;
display: -webkit-box;
display: box;
display: -moz-box;
box-flex:1;
-webkit-box-flex:1;
-moz-box-flex:1;
}
So, this web application I'm working in haves three vertical columns expanding for the entire window height, and a footer div expanding for the entire width. The layout looks like this:
+|+
---
where + means a liquid column, | means a fixed column, and - the footer.
I've done the element positioning using absolute and relative positioning with some tweaks using jQuery. But I want to know if there is a way of doing this with CSS3 only.
Thanks!
This neglects all browser not supporting the box-orient and box-flex properties (like IE).
Demo: http://jsfiddle.net/p8vBC/11/
CSS:
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
body > #main {
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
display: box;
box-orient: horizontal;
height: 100%;
margin-bottom: -100px;
}
footer {
height: 100px;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
aside {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
}
#content {
width: 400px;
}
HTML:
<div id="main">
<aside id="left"></aside>
<div id="content"></div>
<aside id="right"></aside>
</div>
<footer></footer>