Having some troubles getting the li on a new line when it's short of space from the previous li.
Everything works on bigger screens, tablet and mobile. But not on medium size screens. This is because it should be responsive in different ways. It's runned with Bootstrap making everything responsive and easy to understand.
The problem is that Loa / Breadth (mld) / Draught is a long word, so it's not enough space and is continuing on the next line. This means the text Length p.p / Depth (mld) is continuing on the right side. This should continue on the next line instead.
It's hard to explain. I would appreciate if you could visit the link and minimize the window to see.
I also provide a screenshot to see.
<?php $renderfield = types_render_field('loa-breadth-mld-draught', array('raw'=>'true'))?>
<?php if(!empty($renderfield)){?>
<div class="col-xs-12 col-sm-4 col-md-4">
<li class="semibold">Loa / Breadth (mld) / Draught</li>
</div>
<div class="col-xs-12 col-sm-8 col-md-8">
<ul><span class="light"><?php echo(types_render_field( "loa-breadth-mld-draught", array( 'raw' => true, 'separator'=>'</li><li>') )); ?></span></ul>
</div>
<?php } ?>
<?php $renderfield = types_render_field('lengt-p-p-depth-mld', array('raw'=>'true'))?>
<?php if(!empty($renderfield)){?>
<div class="col-xs-12 col-sm-4 col-md-4">
<li class="semibold clearboth">Length p.p / Depth (mld)</li>
</div>
<div class="col-xs-12 col-sm-8 col-md-8">
<ul><span class="light"><?php echo(types_render_field( "lengt-p-p-depth-mld", array( 'raw' => true, 'separator'=>'</li><li>') )); ?></span></ul>
</div>
<?php } ?>
first of all, you forgot to use .clearfix on the parent of .col-* in your case, <ul class="clearfix"> is needed. second thing is that, all .col-* classes contain float: left; property. in that case, if there is 2 lines in one side and only 1 line in another, the next column tries to fit in the line so it comes upward.
in your case you can do like this for those .col-* classes which you need to fix:
[class^="icon-"] {
display: inline-block;
vertical-align: top;
margin-right: -3px;
}
this should work.
You need to clear css after eachrow so I would suggest adding clear: both; to .col-sm-4 css . It will fix the issue.
Add following css to .semibold class to remove word wrap ex. below:
.semibold{
white-space: nowrap;
}
Related
Im using Bootstrap 3 to layout my website with fluid grid, but the boxes in the grid don't line up in a row.
You can see:
When a box is taller than another, the grid is not left aligned.
How can I fix it with some hack ? Thank for help !
Note : the height of box is auto wrap contents.
My html code
<div class="row">
<?php foreach($contens as $content){?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img href="<?php echo $content['image'];?>" />
</div>
................ some code .............
</div>
</div>
<?php } ?>
</div>
I'm not sure exactly what you're trying to accomplish, but the issue is caused because the content of the columns varies in height. There are 3 overall approaches to fix grid alignment / height issues..
1. A CSS only approach (using CSS3 column width) like this..
http://bootply.com/85737
2. A 'clearfix' approach like this (requires iteration every x columns). This is the approach recommended by Bootstrap known as "responsive resets"..
http://bootply.com/89910 (there is also a CSS-only variation to this approach)
3. Finally you may want to use the Isotope/Masonry plugin. Here is a working example that uses Isotope + Bootstrap..
http://bootply.com/61482
Update 2017
Another option is to make the columns the same height (using flexbox):
Since the issue is caused by the difference in height, you can make columns equal height across each row. Flexbox is the best way to do this, and is natively supported in Bootstrap 4.
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.row.display-flex > [class*='col-'] {
display: flex;
flex-direction: column;
}
Flexbox equal height Demo
Bootstrap 4 uses flexbox so columns in each row are the same height by default (without the extra CSS).
More on Bootstrap Variable Height Columns
Enforce a height for each <div> column.
I would give your columns a class name:
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3 outer">
...
</div>
And then do something like this:
.outer {
height: 200px /* Or whatever the height really is */
}
Your columns are being laid out weird because of the varying heights of the boxes. Enforcing a height of the container element will fix that.
The best part is, this doesn't require you to add random <div>'s that don't have anything to do with the content.
EDIT:
You could also enforce the height only when you're using the 'sm' breakpoints and above.
This would ensure that everything lines up when columns are being used, and that there won't be large gaps in between each one when they're full width (i.e. col-xs-12).
#media (min-width: 768px) {
.outer {
height: 200px /* Or whatever */
}
}
I had a similar problem. I fixed with this script pretty quickly and pain free:
<script>
$.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
$('#container').isotope({
itemSelector : '.items',
layoutMode : 'fitRows'
});
});
</script>
in your case, you will need to add a container ID e.g. '#container' and add the class to each item e.g. '.item'
Here's a super simple jQuery solution to get all elements still aligned.
I solved this issue by getting the column with highest height and setting this height to every other columns. Try the snippet below.
setTimeout(function(){
var maxHeight = 0;
$('.item').each(function() {if ($(this).height() > maxHeight){maxHeight = $(this).height()}});
$('.item').each(function() {$(this).height(maxHeight)});
}, 1000);
.item {
border: 1px solid black;
}
.big {
height:50px;
background-color:fuchsia;
}
.normal {
height:40px;
background-color:aqua;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-xs-4 item big">I am big</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
<div class="col-xs-4 item normal">I am normal</div>
</div>
I think you need to use clearfix. just put the classclearfix on your parent element (in your case, row, I think) and put this in your css:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
I agree with Skelly in that a masonry plugin is probably the way to go, but for a quick easy fix you can just make a new row every time you want something left aligned - its a quick and dirty hack and can have some issues on smaller viewports.
My solution:
I worked with the visible- classes of bootstrap 3
<div class="row">
<?php
$indexLg = 1;
$indexSm = 1;
foreach($contens as $content) {?>
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img href="<?php echo $content['image'];?>" />
</div>
</div>
</div>
<?php
if($indexLg%4 == 0) {
$indexLg = 1;
?>
<div class="clearfix visible-lg visible-md"></div>
<?php
}
if($indexSm%2 == 0) {
$indexSm = 1;
?>
<div class="clearfix visible-sm"></div>
<?php
}
?>
<div class="clearfix visible-xs"></div>
<?php
}
} ?>
I am struggling with a challenge in a project I am working on.
JSFiddle example
I want to have all the buttons the same height.
when on a large screen they are all good.
But when i start to scale down they start getting different heights.
And this is an expected result.
But the people that are pulling the strings on this page want all buttons to be the same height.
When one text goes to the next line and makes the button bigger every button most get the same height.
this goes for all widths of the viewport.
I hope you can help me with this challenge.
For any more info I will update the question as soon as possible.
PS. I don't want to use CSS3 for this as it want to keep the Backwards Compatibility as high as possible.
because i have to add code here, this is the situation of my html.
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
This is a short text
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
This is a long text like this
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
This is a long text that is even longer tha the previous button
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-3">
This is a short text
</div>
</div>
</div>
Flexbox might be your easier solution, I've found an article that tries to solve the problem you have.
Check this article: http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback
Code:
.row {
display: flex;
flex-wrap: wrap;
overflow: hidden;
}
.button-primary {
background-color: #005f96;
color: white;
font-size: 20px;
margin: 2%;
display:flex-item;
width: 21%;
}
Demo:
https://jsfiddle.net/x2cqqcz7/
Extra:
I've removed the wrapping divs around buttons and also you'll probably use media queries.
This is a basic jQuery code I wrote for a similar project:
var eqheight = 0;
$('.col-eqheight-sm').each(function() {
if( $(this).outerHeight() > eqheight) {
eqheight = $(this).height();
}
});
$('.col-eqheight-sm').height(eqheight);
It loops through each child and updates the height accordingly.
P.S Advised to wrap it inside a viewport width checker if you only want to work for specific resolutions. Also, add a window resize listener if you want it to update each time the viewport changes.
After one hour for isolating the problem, I can post this :)
I've a problem with local file but not in production. THe only difference is that on production, html files are inlined.
I'm using default bootstrap 3.3.5 and this css class :
<style>
.v-center {
display: inline-block;
float: none;
}
</style>
My problem is that I don't have the same result with both code :
Code 1 :
<div class="row">
<div class="col-md-4 v-center">
col-md-4
</div><div class="col-md-8 v-center">
col-md-8
</div>
</div>
Code 2 :
<div class="row">
<div class="col-md-4 v-center">
col-md-4
</div>
<div class="col-md-8 v-center">
col-md-8
</div>
</div>
You can found here two examples :
http://relationeo.com/test.html
http://relationeo.com/test2.html
The bug is happening when window with is > 990px.
Why the carriage return breaks the col ?
Thanks
The problem is your CSS class "v-center". It sets the display to inline-block. With inline-block white space comes into play (at least the first character of white space, anyways). Just as you would expect:
Just
Testing
To be rendered as Just Testing rather than JustTesting, the same applies to inline or inline-block elements.
Long and short, don't mess with the Bootstrap grid if you expect to have consistent results. If you need to apply other classes, do so within the grid div, not on the same div. For example:
<div class="col-md-8"> <!-- this is grid div, so no other classes here -->
<div class="v-center">
...
</div>
</div>
I must be missing something obvious here, but I am a beginner with Bootstrap and I have no idea what it could be. I'm trying to get this picture and the adjacent paragraph to stack vertically on xs screens. No matter what I do, they just line up alongside each other, pushing the picture to the edge of the screen. Here's a picture of what is happening, and my code.
<div class="row para-text vertical-align">
<div class="col-xs-12 col-md-8 col-md-push-4">
<p>text....</p>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-md-4 col-md-pull-8">
<img class="img-full" src="img/artesia1.jpg" alt="">
</div>
</div>
Here are the css styles I've added, in case those are causing problems
.para-text {
padding:15px;
}
.vertical-align {
display: flex;
align-items: center;
}
I would recommend not using your css classes that you posted. When I did a simple example with your html code but no css, it seems to work fine:
Please see: http://www.bootply.com/GCu0vDtk6K
Note: I also removed your:
<div class="clearfix visible-sm-block"></div>
Looks like my problem was using Flexbox. I've opted out of using it and am going to find a different way to vertical align the image so that I can have better browser support.
I have two div's in one wrapper div, see the following situation:
<div class="container">
<div style="display:table;" class="row row-mobile fp-white-row">
<div style="display:table-cell;" class="col-sm-6 portfolio-post-l">
<h1><?php the_field('port_kop_linker_kolom'); ?></h1>
<?php the_field('port_inhoud_linker_kolom'); ?>
</div>
<div style="display:table-cell;" class="col-sm-6 portfolio-post-r">
<h1><?php the_field('port_kop_rechter_kolom'); ?></h1>
<?php the_field('port_inhoud_rechter_kolom'); ?>
</div>
</div>
</div>
I would like portfolio-post-l to be the same height as portfolio-post-r and the other way around if necessary. How can I accomplish this? it is needed because the portfolio-post-l has an border and should stretch to the bottom of the wrapper div row row-mobile fp-white-row.
I know a solution is to give the portfolio-post-r a left border, but what if the right border becomes the shortest div? I need to ensure it works both ways no matter who's the taller div.
Here an image of my current layout
I have searched online for about an hour and couldn't find any simple solution, all had to do with JS or display:table that did not work for me.
Is it really that inconvenient to include this functionality?
thanks!
EDIT 01
I have no CSS applied to my .portfolio-post-l & .portfolio-post-r other then a background color and a border. However, Bootstrap applies CSS to the col-sm-6, here's that CSS:
width: 50%;
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
I just found out, thanks to Krzysiek that col-sm-6 is messing up the table display fix. If I remove that class, it works, however, I would like to keep it because it's a Bootstrap class used for laying out the page....
Here's a Fiddle of my layout
I think it has to do with positioning, anybody any suggestions?
Thanks!
/Edit 01