I can't seem to get this flex + overflow combination working in Safari.
JSFiddle: https://jsfiddle.net/9dtrr84c/2/
<div class="container-fluid">
<div class="row parent">
<div class="col-12 col-sm-7 left">
<div class="row top">
<div class="col">Top</div>
</div>
<div class="row bottom">
<div class="col-sm-7 my-list-container">
<ul class="list-group">
<div class="list-group-item dummy-item">Dummy item</div>
<div class="list-group-item dummy-item">Dummy item</div>
<div class="list-group-item dummy-item">Dummy item</div>
</ul>
</div>
<div class="col-sm-5 flex-end">
This should be flex end
</div>
</div>
</div>
<div class="hidden-xs-down col-sm-5 right">
</div>
</div>
</div>
And css:
/* With bootstrap v4 */
/* https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css */
html,
body,
.container-fluid,
.parent {
height: 100%;
}
.dummy-item {
height: 300px;
}
.left {
display: flex;
flex-direction: column;
}
.left .top {
flex-shrink: 0;
}
.left .bottom {
flex-shrink: 1;
flex-basis: 100%;
display: flex;
}
.my-list-container {
overflow-y: auto;
}
.flex-end {
align-self: flex-end;
}
The list should expand to take as much space as possible and overflow with a scrollbar.
This works in Chrome as expected. Doesn't seem to be a "flex not supported in this version of Safari" as I am using 10.1.2. I don't require old browser support so a modern solution is acceptable
Any help is appreciated! Many thanks in advance!
Managed to solve it: https://jsfiddle.net/9dtrr84c/8/
Added flex-wrap: nowrap; to parent container
Related
I'm trying to achieve this, where brown gets pushed down when pink is too long, and pink is dynamically sized based on its text content.
I was only able to achieve this using javascript and two templates, if pink length is over X use second template, but I'm wondering if there's a way to achieve this using CSS only?
I tried meddling with grid auto-fill/auto-fit with minmax, float, flex with wrap, but I couldn't get to the desired result with these.
.parent {
width: 170px;
}
.flex {
display: flex;
}
div {
outline: 2px solid rgba(255, 0,0, 0.3);
}
<div>
<p>scenario A</p>
<div class="parent flex">
<div>
<div class="one">A short title</div>
<div class="three">Some text here</div>
<div class="three">some more text</div>
</div>
<div>
<button>A button</button>
</div>
</div>
</div>
<div>
<p>scenario B</p>
<div class="parent">
<div class="one">Testing a very long title</div>
<div class="flex">
<div>
<div class="three">Some text here</div>
<div class="three">some more text</div>
</div>
<div>
<button>A button</button>
</div>
</div>
</div>
</div>
<p>can a component achieve both a and b with only css?
I found a solution, it requires having fixed height in the first row, and the right side button will basically overflow when needed.
Will wait a bit before accepting my own solution in case someone came with a better one.
.container {
width: 300px;
display: flex;
gap: 10px;
padding: 16px;
font-size: 14px;
font-family: Arial;
}
.text {
flex: 1;
min-width: 0;
}
.first-row {
height: 22px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.image {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #444;
}
.title {
flex-grow: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<h2>Long title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Test title test title test title</div>
<button>Visit store</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
<h2>Short title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Short title</div>
<button>Visit place</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
<h2>Very long title</h2>
<div class="container">
<div class="image"></div>
<div class="text">
<div class="first-row">
<div class="title">Test title test titleTest title test titleTest title test title</div>
<button>Visit place</button>
</div>
<div class="three">in the stores</div>
<div class="three">sponsored</div>
</div>
</div>
i have one div and three child div, check out the code below
<div class="parent">
<div class="child">
<icontag />
<texttag />
</div>
<div class="child">
<icontag />
<texttag />
</div>
<div class="child">
<icontag />
<texttag />
</div>
</div>
each child tag composed of icontag and texttag and text tag is of dynamic height.
but, each icon tag margin must be same, even if text tag height is different.
for more explanation, refer to the picture.
as the above picture, the last text is multiline. so, last child tag height is diffent from other tags.
how can I do that?
Here is an example with grid and flexbox.
Try this, it might fit your needs
.child {
display: flex;
align-items: center;
}
.parent {
display: grid;
grid-template-rows: 33% 33% 33%;
}
.child .icon {
border-radius: 50%;
border: 1px solid blue;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 20px;
}
.child p {
max-width: 100px;
}
.wrapper {
display: flex;
align-items: center;
}
.same {
margin-right: 30px;
}
<div class="wrapper">
<p class="same">Same height</p>
<div class="parent">
<div class="child">
<div class="icon">1</div>
<p>Bla bla bla bla bla bla bla bal dsfafda af afas fa faf af</p>
</div>
<div class="child">
<div class="icon">1</div>
<p>Bla bla bla</p>
</div>
<div class="child">
<div class="icon">1</div>
<p>Bla bla bla bla bla bla bla bal dsfafda af afas fa faf af</p>
</div>
</div>
</div>
Try adding max-height to all child div..
.child {
--
--
max-height: 300px; // give max height as per your design
overflow-y: auto;
}
You can use display: flex on child items and align-items: center to vertically center the content.
Then use padding property (or margin could work as well) to have some space between .child items as in the following snippet.
.child{
display: flex;
flex-direction: row;
align-items: center;
width: 500px;
padding: 15px 0;
}
.icon{
width: 30px;
height: 30px;
border-radius: 100%;
border: 2px solid #0000ff;
display: flex;
align-items:center;
justify-content: center;
margin-right: 15px;
}
.text{
flex: 1;
}
.child.third .icon{
width: 50px;
height: 50px;
}
<div class="parent">
<div class="child first">
<div class="icon">1</div>
<div class="text">Foo bar baz</div>
</div>
<div class="child second">
<div class="icon">2</div>
<div class="text">Foo bar baz</div>
</div>
<div class="child third">
<div class="icon">3</div>
<div class="text">Foo bar baz<br/>Foo bar baz</div>
</div>
<div class="child fourth">
<div class="icon">4</div>
<div class="text">Foo bar baz<br/>Foo bar baz</div>
</div>
</div>
But note that, if the texts are much longer than the icons, it could break the layout and you need to give static height to child items. But this way texts may overlap.
Try this :
<div class="parent">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 child">
<icontag />
<texttag />
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 child">
<icontag />
<texttag />
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 child">
<icontag />
<texttag />
</div>
</div>
You can set padding for child class.
padding: 10px;
I'm creating a vertical bar to split the sidebar and the main-section.
I employed the grid bootstrap 3:
<div class="container">
<div class="row">
<aside class="col-md-2 left-sidebar">
<ul>
<li>Javascript</li>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</aside>
<div class="col-md-10 main-section">
....
</div>
<div>
the css code:
.left-sidebar {
padding-top: 50px;
border-right: 1px solid red;
}
I found the official docs of Bootstrap 4.1 has a nicely structured left-side.
How to produce a vertical var reaching both the top and bottom of the page?
Use the below snippet to get the equal height columns to your bootstrap grid.
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.row-eq-height > [class*='col-'] {
display: flex;
flex-direction: column;
}
.left-sidebar {
box-shadow: 1px 0 0 0 #ccc;
background: #eee;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="row row-eq-height">
<div class="col-sm-2 left-sidebar">
some content
</div>
<div class="col-sm-10" style="height: 100vh">
some more content
</div>
</div>
Boostrap4 main difference from BS3 is that it's using flexbox instead of floats. And with flexbox you can make columns inside a row have equal height. So you could make 2 columns and if the main-column will have for ex 1000px height, the left column will have that height as well.
See snippet
.row {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.main-section {
height:200vh;
background: blue;
}
.left-sidebar {
border-right: 2px solid red;
background:green;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2 left-sidebar">
<ul>
<li>Javascript</li>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</div>
<div class="col-md-10 col-sm-10 col-xs-10 main-section">
....
</div>
</div>
</div>
IF you want to have the same effect as the one from the BS4 docs, then the left column has the height of the screen. You can do that with viewport units. And it also has position:sticky.
See below ( for some reason in the code snippet position:sticky doesn't work, check it here - > jsfiddle sticky )
.row {
display: flex;
width: 100%;
}
.main-section {
height:200vh;
background: blue;
}
.left-sidebar {
border-right: 2px solid red;
height:100vh;
position:sticky;
top:0;
background:green;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2 left-sidebar">
<ul>
<li>Javascript</li>
<li>jQuery</li>
<li>Bootstrap</li>
</ul>
</div>
<div class="col-md-10 col-sm-10 col-xs-10 main-section">
....
</div>
</div>
</div>
Issue: So vertical alignment issue is I have two divs in the last column and I'm trying to get one to stay at top and one to stay at the bottom regardless of how the central column grows. I can work this out by using fixed heights but that's no good in this case.
Here is my code example : JS Fiddle
HTML:
<div class="row" class="property-bundle"><!-- (x) number of these -->
<div class="col-xs-11 wrapper">
<div class="row">
<div class="col-xs-2 pull-left vendor">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-xs-8 properties-list">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 1</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 2</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 3</p></div>
</div>
</div>
<div class="col-xs-2 costs"><!-- costs column -->
<div class="row total">
<h3 class="text-right">TOTAL: £1,2M</h3><!--stay at top-->
</div>
<div class="row" class="fees"> <!--stay at bottom-->
<div class="col-xs-12">
<hr/>
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.wrapper {border: 1px solid black; padding: 10px; margin: 15px;}
.vendor {min-width: 120px;}
.properties-list {background-color: aquamarine}
.costs {vertical-align: top; min-width: 150px; vertical-align: center}
.fees {vertical-align: bottom; }
h3 {font-weight: 400}
h4 {color: green}
.total { margin-right: 0px; }
Hi you can try using flexbox
I just change your html like this:
<div class="col-xs-2 costs">
<!--stay at top-->
<div class="total">
<h3 class="text-right">TOTAL: £1,2M</h3>
</div>
<hr/>
<div class="materials">
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
Then I add on costs div display:flex;and on total div flex-grow: 1 This flex-grow will push materials on bottom of div.
You just need to add on body, html, row and costs div height:100%
Here is css:
.costs {
vertical-align: center;
display: flex;
flex-direction: column;
height: 100%;
}
.total {
flex-grow: 1;
}
You can see example on this link: https://jsfiddle.net/3L5Lbwhn/9/
Ok I simplified this a bit, but essentially flex did what I needed so many thanks to Edin Puzic for putting me on the right lines! It also allowed me to fix the 1st and last col width and make the middle one dynamic horiontally too.
JsFiddle
<div class="row-flex">
<div class="col-flex-1">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-flex-2">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 1</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 2</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 3</p>
</div>
</div>
</div>
<div class="col-flex-3">
<div class="pos-top">
<div class="row right-text">
TOP right
</div>
</div>
<div class="pos-bottom">
<div class="row right-text">
<p>
BOTTOM right
</p>
</div>
</div>
</div>
</div>
CSS
.row-flex {
height: auto;
display: flex;
flex-flow: row column;
}
.col-flex-1 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.col-flex-2 {
width: 80%;
border-left: 1px #ccc solid;
flex: 1 1;
}
.col-flex-3 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
background-color: lightgrey;
}
.pos-top {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-start;
align-items: flex-start;
background-color: yellow;
}
.pos-bottom {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-end;
align-items: flex-end;
background-color: green;
}
.right-text {
text-align: right;
width: 100%;
}
I'm trying to move around text with justify-content with flex box and whilst align-items works to move the content vertically, justify-content doesn't work to move the content horizontally.
I know I can use text-align, however I don't like how it moves all the text to the far right including the sub-title text, which I want to start at the same place as the title does - I believe this would be what justify-content would do.
CodePen: http://codepen.io/gutterboy/pen/yYxmLP
HTML:
<div id="main-slider" class="carousel">
<div class="container">
<div class="row">
<div class="col-sm-offset-1 col-sm-10">
<div class="carousel-inner" role="listbox">
<div class="item item1 active">
<img src="http://dreamatico.com/data_images/car/car-1.jpg" class="img-responsive" />
<div class="details flex-row">
<div class="fix-flex">
<h2>I'm a header title</h2>
<p class="sub-title">
I'm a little sub-title
</p>
</div>
</div>
</div>
<div class="item item2">
<img src="http://dreamatico.com/data_images/car/car-8.jpg" class="img-responsive" />
<div class="details flex-row">
<div class="fix-flex">
<h2>I'm a header title</h2>
<p class="sub-title">
I'm a little sub-title
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
</ol>
CSS:
.item {
position: relative;
.details {
position: absolute;
top: 0;
text-align: center;
width: 100%;
height: 100%;
padding: 25px;
color: #fff;
z-index: 2;
align-items: flex-end;
justify-content: center;
h2 {
margin-top: 0;
}
}
&.item2 {
.details {
align-items: flex-start;
justify-content: flex-start;
}
}
}
.fix-flex {
width: 100%;
}
.flex-row {
display: flex;
flex-flow: row nowrap;
}
There is more CSS related to the code, but it's related to bootstrap.
The issue you are having is due to your fix-flex class. It has a width of 100%. It is being centered with justify-content:center but since the element is the same size of its container it is not visually obvious that it is working. Check out my fork of your codepen.
Fork of your codepen
This should be removed
.fix-flex {width:100%;}
After reading #paulie_D's comments I realised it had to do with the fix-flex class which had a style of width: 100%; set and was wrapped around the content I was trying to justify and hence it really couldn't move it.
This was also pointed out by Adrian Eufracio's answer; however removing the div altogether would cause the issue I was trying to prevent; so I had to leave the div in the code but just remove the width: 100%; from the styles and I can now justify the content and the text doesn't wrap.
CodePen: http://codepen.io/gutterboy/pen/jbeOrP
HTML:
<div id="main-slider" class="carousel">
<div class="container">
<div class="row">
<div class="col-sm-offset-1 col-sm-10">
<div class="carousel-inner" role="listbox">
<div class="item item1 active">
<img src="http://dreamatico.com/data_images/car/car-1.jpg" class="img-responsive" />
<div class="details flex-row">
<div class="fix-flex">
<h2>I'm a header title</h2>
<p class="sub-title">
I'm a little sub-title
</p>
</div>
</div>
</div>
<div class="item item2">
<img src="http://dreamatico.com/data_images/car/car-8.jpg" class="img-responsive" />
<div class="details flex-row">
<div class="fix-flex">
<h2>I'm a header title</h2>
<p class="sub-title">
I'm a little sub-title
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#main-slider" data-slide-to="0" class="active"></li>
<li data-target="#main-slider" data-slide-to="1"></li>
</ol>
CSS:
.item {
position: relative;
.details {
position: absolute;
top: 0;
text-align: center;
width: 100%;
height: 100%;
padding: 25px;
color: #fff;
z-index: 2;
align-items: flex-end;
justify-content: center;
h2 {
margin-top: 0;
}
}
&.item2 {
.details {
align-items: flex-start;
justify-content: flex-start;
}
}
}
.flex-row {
display: flex;
flex-flow: row nowrap;
}