I'm struggling with getting identical behaviour for a flexbox layout in different browsers (nevermind browsers that don't support flexbox).
Here's the markup:
<!-- nested version -->
<div class="flex-container"> <!-- display: flex -->
<div>
<div class="flex-container inner"> <!-- display: flex -->
<div class="auto-width">
auto take up needed space
</div>
<div class="flex-width"> <!-- flex: 1 -->
flex take up remaining space
</div>
</div>
</div>
</div>
My problem is that IE11 behaves differently to Firefox and Chrome. I would expect that the width of the nested flexbox flex-container.inner will be unrestricted, since nowwhere do I set any width.
Here is a JSBin to illustrate the problem: http://jsbin.com/pabesaci/5. Example 3 is the problematic one which renders differently in IE.
Rendering in IE
Rendering in Chrome (FF is similar)
Is this a bug in IE?
Can you suggest other ways to achieve this layout?
<p>My example:</p>
<div style="float:left; display:block; width: auto; border: solid 2px red; padding: 2px;">
<div>
<div style="float:left; display: block; border: solid 2px yellow; padding:2px;">
<div style="float:left; display: block; border: solid 2px green;">
auto take up needed space
</div>
<div class="" style="float:left; position:relative; display:block; border: solid 2px blue;">
flex take up remaining space
</div>
</div>
</div>
</div>
Related
I'm pretty new to HTML and CSS so perhaps this is a crazy easy question to answer.
The question is:
How to do this using only divs and css?
I don't want to use <table> <tr> <th> <td>....
Here's a basic setup of what you're asking using the flexbox property.
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the
arrangement of elements on a page such that the elements behave
predictably when the page layout must accommodate different screen
sizes and different display devices. For many applications, the
flexible box model provides an improvement over the block model in
that it does not use floats, nor do the flex container's margins
collapse with the margins of its contents.
Read more about it at MDN and experiment with it so you feel comfortable using it. The setup might not be pixel perfect, but it gives you a good start for the desired layout. Trial and error, that's the best way to learn.
div {
box-sizing: border-box;
border: 1px solid black;
min-height: 20px;
}
.container {
display: flex;
flex-flow: row-wrap;
width: 100%;
}
.column {
flex: 1 1 100%;
}
.middle {
flex-basis: 200%;
}
.middle-top,
.right-top,
.right-bottom {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.language,
.search,
.login,
.signup,
.some-text,
.avatar {
flex: 1 1 50%;
}
<div class="container">
<div class="column left">
<div class="social">
Social icons
</div>
<div class="logo">
Logo
</div>
</div>
<div class="column middle">
<div class="middle-top">
<div class="language">
Language
</div>
<div class="search">
Search
</div>
</div>
<div class="slogan">
Slogan
</div>
<div class="menu">
Menu
</div>
</div>
<div class="column right">
<div class="right-top">
<div class="login">
Login
</div>
<div class="signup">
Signup
</div>
</div>
<div class="right-middle">
Welcome guest
</div>
<div class="right-bottom">
<div class="some-text">
<div class="something">
Some text
</div>
<div class="something">
Some text
</div>
</div>
<div class="avatar">
Avatar
</div>
</div>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
What is the right approach to make a 4by4 grid(4 rows and 4 columns) using CSS
I have tried it using column-count but could get the complete look of a grid, borders do not stretch to the elements correctly.
Do we have any other approach. If so please help
Following is the code
#container {
width: 300px;
column-count: 4;
background: green;
border: 1px solid;
column-rule: 1px solid;
}
.box {
color: blue;
border-bottom: 1px solid;
}
.box .contents {
visibility: hidden;
width: 100px;
}
<div id="container">
<div class="box">c-1
<p class="contents"></p>
</div>
<div class="box">c-2
<p class="contents"></p>
</div>
<div class="box">c-3
<p class="contents"></p>
</div>
<div class="box">c-4
<p class="contents"></p>
</div>
<div class="box">c-5
<p class="contents"></p>
</div>
<div class="box">c-6
<p class="contents"></p>
</div>
<div class="box">c-7
<p class="contents"></p>
</div>
<div class="box">c-8
<p class="contents"></p>
</div>
<div class="box">c-9
<p class="contents"></p>
</div>
<div class="box">c-10
<p class="contents"></p>
</div>
<div class="box">c-11
<p class="contents"></p>
</div>
<div class="box">c-12
<p class="contents"></p>
</div>
<div class="box">c-13
<p class="contents"></p>
</div>
<div class="box">c-14
<p class="contents"></p>
</div>
<div class="box">c-15
<p class="contents"></p>
</div>
<div class="box">c-16
<p class="contents"></p>
</div>
</div>
Thanks
That wouldn't work, no. Look at flex-box or float-right for a grid-type arrangement of div elements. Flexbox is especially powerful, really just need 2-3 lines of CSS to accomplish this:
* { box-sizing: border-box; }
#container { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; background: green; }
#container > div { width: 25%; height: 25vw; border: white 1px solid; }
What's happening:
box-sizing - depending on what browser you're on, the 1px border will add to the overall width and break the grid (example: 25% of 100px box is 25px, but if your box sizing is off, the border can cause the box to "bloat" to 27px. If each box is 27px, one of the boxes is knocked down to the next row bc there's no space left on the row above it).
By setting it to border-box, it means we're including the border when specifying the DOM's width.
width and height:
25% works for width but not height, so we specify the height with the vw measurement. Be careful with this unit, it's not supported by current version -1 (thanks IE).
flex-everything
Neat way to approach modern CSS layout. There are a lot of bells and whistles, but generally speaking I think the rules I used above are pretty self-explanatory. I'm happy to provide any clarification in the comments.
https://jsfiddle.net/z_herring/cg71okst/
I have created an html stuff using bootstrap 2.3.2 css. The html will be having four rows with different height such as for the first row it will 10%, second row - 20%, third row - 40% and the fourth row - 40% respetively. In third row I have placed a box like panel within each cell, The html is rendering but the problem is the height of the panel is not matching with the parent. Lets say if the content of the panel body exceeds then the panel comes out of the parent like as shown below
Now If the content of the panel body is less then the panel height seems not matching with the parent like as shown below
What I am trying to achieve is that the panel should fill within the parent div no matter whats the body content. when the body content of the panel exceeds the height of the parent div then a vertical scrollbar should come for the panel body.
My code is as given below
JSFiddle
html
<div id="content">
<div class="row1">
<div class="row-fluid">
<div class="span6">content1</div>
<div class="span6">content1</div>
</div>
</div>
<div class="row2">
<div class="row-fluid">
<div class="span6">content2</div>
<div class="span6">content2</div>
</div>
</div>
<div class="row3">
<div class="row-fluid">
<div class="span4">
<div class="panel">
<div class="panel-header well" data-original-title="">
<h5><i class="icon-th"></i> Grid 3</h5>
</div>
<div class="panel-content">
fgdfg dad dsd dsadsad ds adsa d das ds dsa dsad sa d ad as dsad sa d sda dsa sa das dsa da asd sad
</div>
</div>
</div>
<div class="span4">
<div class="panel">
<div class="panel-header well" data-original-title="">
<h5><i class="icon-th"></i> Grid 3</h5>
</div>
<div class="panel-content">
fgdfg
</div>
</div>
</div>
<div class="span4">content3</div>
</div>
</div>
<div class="row4">
<div class="row-fluid">
<div class="span3">content4</div>
<div class="span3">content4</div>
<div class="span3">content4</div>
<div class="span3">content4</div>
</div>
</div>
</div>
Try flexbox.
Adjustments to CSS:
.row3 {
height: 40%;
background: orange;
display: flex;
}
.row3 > .row-fluid {
display: flex;
}
.row-fluid > .span4 {
display: flex;
}
.panel {
display: flex;
flex-direction: column;
}
.panel-header {
/* padding-bottom: 10px; */
/* min-height: 12px; */
}
.panel-content {
overflow-y: auto;
}
DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.
Add this class in your css.Hope this will be work.
.panel-content {
border: 1px solid red;
padding: 2px;
background: white;
height: 40px;
overflow-y: scroll;
}
Updated : Jsfiddle
There are two ways you an go about this.
Using JavaScript, you can set the height of the children elements to that of the parent, or to the height of another child element, see my JSFiddle example. You can click on the child-2 element and it will take the height of child-1, I added the click just so you could see it taking the other elements height, it will set the height to the same as child-1
In JavaScript
var child1Height = $('.child-1').height();
$('.child-2').height(child1Height);
Alternatively you can use CSS, specify the height of the parent, and insure that the children elements have a height of 100%, child-2 element has a height of 100%, which will take the height of it's parent div that is set to 500px, see my JSFiddle example.
In CSS
.parent{
width:400px;
height: 500px;
}
.child-2{
height:100%;
overflow-y: auto;
}
In my html I get 'response' from controller. Number of lines in the response varies (max is 3).
What is the best way to 'reserve' 3 lines on my html page so the next div with 'SOMETHING' paragraph is not scrolled down by 'response' ?
<div class="row">
<p ng-bind-html="response"></p>
</div>
<div class="row">
<p>SOMETHING</p>
</div>
Using CSS, fix the height occupied by your 3 rows and use overflow to scroll within that fixed height div.
CSS Overflow might help you.
.row-fixed-height {
height: 150px;
overflow: scroll;
}
and in HTML:
<div class="row-fixed-height">
<p ng-bind-html="response"></p></div>
Since the height of the lines varies based on font and font size, I would use line breaks to "reserve" the three lines. If you were to use for instance a fixed height on the div or p, it might jump around on a different browser that uses a different font.
Live Demo:
#response {
background: red;
}
<div class="row">
<p id="response" ng-bind-html="response">
<br />
<br />
<br />
</p>
</div>
<div class="row">
<p>SOMETHING</p>
</div>
JSFiddle Version: https://jsfiddle.net/rspyho74/
As oori pointed you, this is is about CSS, not Angular. The easiest way to fix the height to 3 lines is using the em unit:
.row{
margin: 10px;
padding: 5px;
border: 1px solid #000;
border-radius: 5px;
}
p{
float: left;
margin: 0 5px;
padding: 5px;
border: 1px solid #000;
height: 3em;
}
<div class="row">
<p ng-bind-html="response"></p>
<p ng-bind-html="response">Line 1</p>
<p ng-bind-html="response">Line 1<br>Line 2</p>
<p ng-bind-html="response">Line 1<br>Line 2<br>Line 3</p>
<div style='clear: both;'></div>
</div>
<div class="row">
<p>SOMETHING</p>
<div style='clear: both;'></div>
</div>
As you can see, the paragraph keeps its height no matter how many lines there are. If you remove the height property you can see the difference.
We have HTML with CSS:
<div style="width: 80%"><!--This width can be different or expressed in % -->
<div>
<div style="width: 50%; background-color: blue; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div><!--
--><div style="width: 50%; background-color: brown; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div>
</div>
<div style="height: 110px; overflow-y: scroll;">
<div style="width: 50%; background-color: yellow; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div><!--
--><div style="width: 50%; background-color: green; display: inline-block;">
<br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
</div>
</div>
</div>
And a result:
All divs have 50% width, but bottom ones are narrower, because of scroll bar. I know I could calculate scroll bar width and make top ones narrower, but is there better solution? Solution using HTML/CSS only is preferred.
Fiddle here: http://jsfiddle.net/s6rhs/6/
You can use custom jquery scroll bars for your page with the help of some jquery plugins like these
https://github.com/inuyaksa/jquery.nicescroll
So that you won't have trouble with default scrollbars of the browsers.
You could use flex layout, introduced in CSS3. Maybe there are too many browsers out there, you want to support, but they could use your current "solution".
Support: http://caniuse.com/#search=flex
If there's a scrollbar, your right container is a little smaller depending on the width of the scrollbar, but that shouldn't be noticed by users.
At the moment, the background scrolls out, but I think you'll find a solution for that.
Now, my answer isn't only text, there's also some code and a jsfiddle for you:
CSS
.flex {
display: flex;
flex-direction: row;
width: 100%;
}
.flex > div {
flex-grow: 1;
}
.flex > div:first-of-type {
width: 250px;
flex-grow: 0;
}
HTML
<div style="width: 500px">
<div class="flex">
<div style="background: green">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
<div style="background: yellow">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
</div>
<div class="flex" style="height: 110px; overflow-y: scroll;">
<div style="background: blue">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
<div style="background: red">
<br/>A
<br/>B
<br/>C
<br/>D
<br/>E
<br/>F
<br/>G
<br/>H
<br/>I
<br/>
</div>
</div>
</div>