I am using Bootstrap 4 on my web page, which uses the bootstrap grid layout in flex mode.
In one of the columns I have a button that I want to fill the column. This is done by setting the button to 100% height using CSS.
This works without any problem in all browsers except Safari, where it seems to be ignored.
The html I'm using looks like this:
<div class="container">
<div class="row">
<div class="col-10">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis felis turpis. Fusce blandit malesuada dolor, id gravida tortor cursus varius. In vulputate ipsum ut lorem commodo elementum. Cras finibus at mauris vel varius.
</div>
<div class="col-1">
<button class="btn btn-primary" type="button">Lorem ipsum</button>
</div>
</div>
</div>
In addition to regular bootstrap code I have added the following css:
button { height: 100%; }
Here is an codepen example that shows the issue http://codepen.io/anon/pen/BppMvw
Does anyone have any suggestion on how to solve this? Since the other columns in the row may be of variable hight, it's not possible for me to set a fixed height. Javascript is not an option either.
A solution might be to set flex:1 on the button and make its parent a flex container. See here.
Related
I got an ul with multiple li, what I need is that each li fit 50% of the view-port width, floating to the right, and a dynamic height, because could be expanded and collapsed, but without affect the full row.
This is how it should look normally:
This is how it should look with an item expanded:
I tried in so many ways but without successful. Is important to me not to use javascript for it, just CSS.
check this link: codepen.io
<div class="collapse">
<input id="big-text-collapse" type="checkbox">
<label for="big-text-collapse" onclick>Big text</label>
<div class="collapse__content">
<strong>I'm always collapsible</strong>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat lectus mi, vel consectetur massa vulputate in. Donec vestibulum, dui non facilisis congue, ex nisi bibendum urna, in lacinia enim dolor sed risus. Nunc tristique malesuada mauris, at
accumsan velit aliquam vitae. Sed ultricies risus sit amet velit consequat lacinia. Sed non ornare erat. Suspendisse convallis velit dapibus orci sollicitudin malesuada.
</p>
</div>
Okay I have 3 divs The outside div is a column. All 3 div heights are dynamically generated by its contents.
<div class="outer" style="display:flex; flex-direction:column; float:left;">
<div class="text 1" style="float:left; flex:1; background:red;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div>
<div class="text 2" style="float:left; flex:1; background:blue;"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div>
</div>
I have applied inline CSS for display Flex. Im working in Firefox, however I do have the cross browser CSS, but im just focused on getting it working here in Firefox and understanding this first.
The goal of what im trying to accomplish here is to make text 2 the exact same height as text 1.
Im new to this whole flex thing, im fairly certain im doing this completely wrong, ive been reading articles for a few hours and everything I try doesnt work. So im assuming im understanding this all wrong.
Im not sure if it matters, but this is being done within wordpress. Also everything is floating left
I apologize if this is trivial but im at a loss, and Stackoverflow never fails me. Any help would be greatly appreciated.
You are not far from what you wanted to do. Please notice that I removed the white spaces from your class names as white spaces are the separator for multiple classes. .1 and .2 are invalid class names.
You should use flex-direction: row; as you want the layout to be horizontally arranged. I used the flex shorthand property to reach the desired result, which stand for flex-grow, flex-shrink and flex-basis.
.outer
{
display: flex;
flex-wrap: row nowrap;
}
.text1, .text2
{
flex: 1 0;
}
.text1
{
background-color: gray;
}
.text2
{
background-color: darkgray;
}
<div class="outer">
<div class="text1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna. Nulla facilisi. Nulla gravida congue viverra. Vivamus maximus lacus dolor, sit amet vestibulum orci maximus tristique. Nam non metus nisl. Mauris gravida magna sed dolor venenatis malesuada. Sed in rutrum erat. Sed dictum est neque, sit amet consequat dolor dictum eget. Fusce sit amet dolor orci. Curabitur tempus vel erat ac dictum. Proin vel congue velit. Nam venenatis erat neque, at convallis mauris eleifend ultrices. In hac habitasse platea dictumst</p></div>
<div class="text2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ipsum ex, gravida vitae erat nec, ultricies sollicitudin magna.</p></div>
</div>
Also it is not necessary to use float on flex elements. But it should have no effect what so ever, as of the w3c:
float and clear do not create floating or clearance of flex item, and
do not take it out-of-flow.
I am making a list of blurbs with images that can be used anywhere throughout our site. I want it to be really flexible, not have a specified width, and work properly with no image and with different sizes of images. If the text for a block is longer than its image, I want the text not to wrap under the image.
I made a fiddle of pretty much exactly how I want it. https://jsfiddle.net/4dbgnqha/1/
Now the problem is, our senior developer told me I can't use overflow:hidden to clear the float or to prevent the wrap because:
"Overflow hidden spawns an object to wrap around the element you specified that on. By doing so it is able to constrain the perceived viewable area on that element. This invokes quarks mode in IE, which has a cascading effect for other elements on that page and how they will be interprited"
So whether or not I agree with that, I can't use it. I also can't use a clearfix hack because he said:
"clearfix dumps before:: and after:: elements into the DOM, we don’t want this sort of thing to be complicating layout, especially when we’re traversing through the DOM dealing with dynamically added elements and potential 3rd party code"
Now, I tried to find a way to build the layout without these hacks, but I haven't quite been able to get it with the constraints I want (no fixed width on the images, or the container).
Here's the sample CSS (with the "hacks"):
.item {
overflow: hidden;
margin-bottom: 20px;
}
.item img {
float:left;
margin-right: 10px;
}
.item p {
margin: 0;
overflow: hidden;
}
For this specific example you could use display: table-row / table-cell (unless your dev has a beef with this too)...
.item {
margin-bottom: 20px;
display: table;
}
.item img {
margin-right: 10px;
display: table-cell;
vertical-align: top;
}
.item p {
margin: 0;
display: table-cell;
vertical-align: top;
}
<div class="container">
<div class="item">
<img src="//placehold.it/100x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
<div class="item">
<img src="//placehold.it/150x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="item">
<img src="//placehold.it/100x200">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
<div class="item">
<img src="//placehold.it/100x100">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porttitor nisi purus, eu pretium ipsum ultricies eu. Nulla eleifend arcu dolor, et vestibulum ligula lacinia sed. Sed viverra tortor lorem, molestie volutpat nisi volutpat a. Suspendisse dolor lacus, ultrices eu quam vel, lobortis placerat nibh.</p>
</div>
</div>
Fiddle version
Browser support is pretty universal - CANIUSE
I would like to have a design based on the following HTML code:
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
<div class='title'>Title</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
<div class='title'>This is a very very long title longer than a single line, maybe two or three lines... I don't know!</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
What I am searching to do is to have two columns (the "container" divs) and to have the "title" elements all of the same height. I do not want to have a fixed height (because I do not know how long it is the title), and I'd like not to use Javascript.
Is there any css trick or css selector that is like "all .title elements have the same auto height"?
Thank you.
Could you try the style below and let me know if that is what you are looking for?:
<style>
.container {
display: inline-block;
width: 200px; /* change as you see fit */
/*height: 100px; change as you see fit */
margin: 10px; /* change as you see fit */
}
.image>img{
width:50px !important; /* change as you see fit */
height:50px !important; /* change as you see fit */
}
div.title{
min-height:40px !important; /* change as you see fit */
margin:10px 0 !important; /* change as you see fit */
background:#EEE !important; /* change as you see fit */
padding: 10px !important; /* change as you see fit */
}
</style>
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500"/></div>
<div class='title'>Title</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
<div class="container">
<div class='image'><img src="http://lorempixel.com/500/500" width="500" height="500" /></div>
<div class='title'>This is a very very long title longer than a single line, maybe two or three lines... I don't know!</div>
<div class='content'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante.</div>
</div>
Hope it helps.
So this might seem like an obvious question to some, but what is the best practice for aligning versatile span content in a responsive grid? I know you could simply set a pixel height, but wouldn't that kind of defeat the purpose of keeping things responsive?
Take the below screenshot for instance:
<div class="container">
<div class="row">
<div class="span3 well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis sollicitudin. Nam eros risus, lobortis a ultricies sed, interdum in mi. Donec elementum ullamcorper odio, vel gravida velit pretium quis. Donec sagittis, sem nec rhoncus tristique, dui ante volutpat nisl, sit amet feugiat velit lorem sagittis turpis. Quisque laoreet arcu et sapien volutpat nec porta augue iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan feugiat libero, vel fringilla neque euismod vitae. Nullam justo mi, faucibus sagittis pharetra non, egestas sit amet nulla.</p></div>
<div class="span3 well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis sollicitudin. Nam eros risus, lobortis a ultricies sed, interdum in mi. Donec elementum ullamcorper odio, vel gravida velit pretium quis. Donec sagittis, sem nec rhoncus tristique, dui ante volutpat nisl, sit amet feugiat velit lorem sagittis turpis. Quisque laoreet arcu et sapien volutpat nec porta augue iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan feugiat libero, vel fringilla neque euismod vitae. Nullam justo mi, faucibus sagittis pharetra.</p> </div>
<div class="span3 well"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis venenatis sollicitudin. Nam eros risus, lobortis a ultricies sed, interdum in mi. Donec elementum ullamcorper odio, vel gravida velit pretium quis. Donec sagittis, sem nec rhoncus tristique, dui ante volutpat nisl, sit amet feugiat velit lorem sagittis turpis. Quisque laoreet arcu et sapien volutpat nec porta augue iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan feugiat libero.</p> </div>
</div>
</div>
You can find the relevant JSfiddle here.
Note: Responsiveness seems to be broken in this JSFiddle for some reason, works fine in my own Twitter Bootstrap application however.
If you take a look on DigitalLabs which is a website I worked on then if you look at the profiles I came across a similar error - i wanted them all to be the same height.
See my JSFiddle here:
http://jsfiddle.net/LDtRr/2/
(scroll down to the bottom and press resize to see them all dynamically resize)
I used some javascript to fix the heights - I will show you the code that I used.
function resize(resize, resizeinner) {
var max = 0;
//reset height back to 0
$(resize).each(function(index, element) {
$(element).css({ 'height' : '0' });
});
//find height of the profiles
$(resizeinner).each(function(index, element) {
var height = $(element).height();
console.log(' height=' + height);
if(height > max) {
max = height;
}
});
//set the height dynamically based on the maximum so they are all uniform
$(resize).each(function(index, element) {
$(element).css({ 'height' : max });
console.log(' resizedTo=' + $(element).height());
});
console.log('max - ' + max);
}
Then for the html i used
<div class="span4">
<div class="well profile">
<div class="profile-resize">
<!-- content -->
</div>
</div>
</div>
What the code does is it gets the maximum height for the divs with the profile class, then sets all of the divs with that class to the maximum height - you can also bind this to the window resize so it automatically resizes the heights with the window.
$(window).load(function() {
//initially size the elements
resize('.profile', '.profile-resize');
});
Maybe not the most elegant solution but I couldnt think of a better one at the time.
Although your markup doesn't keep the hierarchy recommended by the bootstrap doc (.container > .row > .span > .well), have you thought about absolute positioning ? No JS involved.
Demo (jsfiddle)
<div class="container" style="position: relative;">
<div class="row faux-row">
<div class="span3 well"></div>
<div class="span3 well"></div>
<div class="span3 well"></div>
</div>
<div class="row vrai-row">
<div class="span3"><p>...</p></div>
<div class="span3"><p>...</p></div>
<div class="span3"><p>...</p></div>
</div>
</div>
.vrai-row { position: relative;z-index: 101; }
.faux-row { position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 100; }
.faux-row .well {
height: 100%;
/* The following is because .span* elements should not have paddings, margins nor borders see http://stackoverflow.com/a/11299934/1478467 */
box-sizing: border-box;
}
If you want to set padding, margin, borders (styling that actually take space), it should be applied to the real one and the faux one - not the columns themselves, but their children for example.
The downside is that (as it is in the demo) you have to stick to the non-responsive grid (fluid or static). But it should work with a few more rules encapsulated in media queries.
Update
Responsiveness is actually not so hard to get, if you keep the .well class on all spans :
Demo responsive (jsfiddle)
#media (max-width: 767px) {
.faux-row { display: none!important; }
}
#media (min-width: 768px) {
.vrai-row .well { /* Deactivate well styles */
background-color: transparent;
border-color: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
}