I'm using Bootstrap and I have a row with 6 grid columns. The first column is defined like this:
<div class="hour-item col-sm-1 col-ms-1 col-sm-offset-3 col-ms-offset-3">
<div class="hour-label" id="hour-label-1"></div>
<div class="hour-value" id="hour-value-1"></div>
<div class="hour-weekd" id="hour-weekd-1"></div>
</div>
The rest of the columns are pretty much the same, without the offset classes, and the inner div id numbering increments (-2, ... -6)
My objective here is to have the middle divs (hour-value-x) always aligned between them, a straight line. But the problem is that when text on the first inner div wraps to a second line, it pushes down the other two below it, and that column becomes vertically "misaligned" with the other columns.
This has been answered many times before on this site.
There are several ways this can be done but the best is to use some javascript to match the heights of the different inner divs. Though the js that Wes Duff posted is good it will not cover all situations such as when a user resizes their browser. Using something like match height would be better.
This is an age old issue. :?
Solution I have come up with is to use a JavaScript.
function autoHeight(ele){
var height = 0;
ele.each(function(){
if($(this).height > height){
height = $(this).height;
}
}).each(function() { $(this).height(height); });
Loop through and find the height for each element then assign the tallest height to each element.
<div class="hour-item col-sm-1 col-ms-1 col-sm-offset-3 col-ms-offset-3">
<div class="hour-label" id="hour-label-1"></div>
<div class="hour-value" id="hour-value-1"></div>
<div class="hour-weekd" id="hour-weekd-1"></div>
</div>
//javascript (using jQuery) will look like
autoheight($('.hour_value'));
Related
I have a two column layout, where in first column there is always one item per row and in second column there are any number of items. The problem in my example is that the sizes differ and float only works, if the first column item is higher than the ones in second column.
I know best would be to wrap the items of the right column into one container, but I cannot change the structure of the HTML, I only can do some CSS and/or JavaScript (including JQuery). But I would prefer a CSS only solution.
I also cannot set the height of the first column items statically, because the amount and height of the right column items is dynamic.
The expected result:
See JSFiddle for my current approach:
https://fiddle.jshell.net/uqh9uz5o/
Thanks,
Ingo
You could try wrapping the "other" items in another div with its own float.
<div class="item">
<div class="label">2 label</div>
<div class="wrapother">
<div class="other">2_hallo1</div>
<div class="other">2_hallo2</div>
<div class="other">2_hallo3</div>
</div>
</div>
.wrapother {
float:left;
width: 80%;
}
I have an issue related to using a bootstrap grid in and angular/bootstrap modal. The content that is in the grid are checkboxes with names next to them. The names can vary in length so they can potentially wrap to 2 lines (technically there could be as many wrapped lines as there are unique words in the name, but typically that would be <=2). The oddness that I see is that if there is a name in the first column that has to wrap, but the same row of the 2nd and 3rd columns do not wrap, things look fine and there is no empty line space. Screenshot. When the first column doesn't wrap on a given row but the 2nd or 3rd column does have to wrap, there is a big empty space in the 1st column (2), but when the first column is the one that wraps, columns 2 and 3 work fine (1).
It is especially noticeable when the wrapping cascades, like screenshot 2.
Html for grid:
<div class="row">
<div ng-repeat="courseStudent in course.students">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 cell">
<label>
<div class="input-wrapper">
<input type="checkbox" ng-checked="courseStudent.assigned" ng-click="toggleStudent(course,courseStudent)"/>
</div>
<div>{{courseStudent.student.name}}</div>
<div class="clearfix"></div>
</label>
</div>
</div>
LESS for grid
.row {
.input-wrapper {
float: left;
width: 14%;
}
}
Does anyone know how, if possible, to have the grid collapse that empty space evenly? When I look in the dev tools, that space doesn't even show up. None of the divs for the surrounding cells have padding or seem to occupy that space. Any ideas?
bootstrap 3.3.1
angularjs 1.2.15
angular-bootstrap 0.10.0
The reason this happens is that each of the columns uses float left to create the grid. So, you have a couple of options:
If you know the maximum height your inputs, then you can give your cell class a set height. This might not be ideal since you're dynamically generating your content.
Use a plugin like Masonry to make the content 'fit' into the available space. This creates a cool tiled effect, but may not be ideal for your particular content.
Use jQuery or vanilla Javascript to dynamically adjust the column heights to be equal to the maximum height of the tallest column div.
A jQuery example of the third option would look like (actually, I guess since you're using AngularJS, you should do this in a directive, but here's an example anyway):
var row=$('.row');
$.each(row, function() {
var maxh=0;
$.each($(this).find('div[class^="col-"]'), function() {
if($(this).height() > maxh)
maxh=$(this).height();
});
$.each($(this).find('div[class^="col-"]'), function() {
$(this).height(maxh);
});
});
P.S. There's really no need to include a col class for every breakpoint as you have done here: <div class="col-lg-4 col-md-4 col-sm-4 col-xs-6 cell">. It is sufficient to just write: <div class="col-sm-4 col-xs-6 cell">. Think of col classes as additive. You only need to specify one at a particular breakpoint if you want to change the behavior at that point.
The official Bootstrap answer, in the link in #jme11's comment needs to be a top level answer. See also his link to the bootstrap docs. Insert this div between the rows which need to be reset.
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
I have a problem understanding how row-fluid class works. According to the documentation it adjusts itself to fluid design such as responsive design. So if it has enough space it makes it fit on the same row otherwise it goes to the next line.
However looking at this example here : https://duelify.com/
Strangely enough the first three article headers fit on first row.
Second row and rest are slightly pushed to the right. But looking at the html (below) no additional classes are involved to cause this 'side effect'.
Why aren't the article headers fitting in the one row. Why is there this random gap in between? Is there a way to make them appear ordered without any gaps in between?
In your case, proper code will be like
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
etc...
In every row-fluid class maximum sum of span classes must be up to 12. Span classes have left margin. Only last child in one row-fluid don't have left margin.
Look again now at examples on Twitter Bootstrap documentation. "For a simple two column layout, create a .row and add the appropriate number of .span columns. As this is a 12-column grid, each .span spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent)."
There are a couple of things going on here. Remember, by default, the total size of the spans in a fluid-row should add up to 12. There is quite a bit more here, so when the css defines the width of a span4 as approximately 33% they are actually exceeding 100%, so they are going to a new line. But they are not clearing, so you end up with them looping around and making columns like on the page.
The reason you have the space to the left of what would be the second row is that bootstrap defines 'gutters' to give the columns some margin. Because of the excess columns being used you see them. There is specific css to reduce the gutter on the first span of a row to 0, hence why there is no space on the first one.
The subsequent 'rows' have only two columns because the presence of the additional gutter throws off the math and makes the three span4s add up to more than 100% width, causing them to wrap.
The following code will work after container (for Responsive layout):
<div class="container-fluid">
<div class="row-fluid">
<div class="span4"></div>
</div>
<div class="row-fluid">
<div class="span4"></div>
</div>
</div>
I have a two-column layout, composed of fixed-width floated divs. Inside the first column is an extra wide element. So the html layout looks something like this:
<div id="container">
<div id="column1">
...short content...
<div id="extra-wide">
...wide content...
</div>
</div>
<div id="column2">
...long content...
</div>
</div>
As annotated, the first column contains a short amount of content and the second column contains a long amount of content. The CSS looks something like this:
#column1 { width: 200px; }
#column2 { width: 100px; }
#extra-wide { width: 250px; }
So the extra-wide element is actually wider than its parent, column1. And I don't know the heights of any of the elements ahead of time -- they are all variable.
The issue here is that column2 appears overlapped over the extra-wide element in column1. Here's a jsfiddle to help visualize this: http://jsfiddle.net/e3KNg/ (This fiddle has some content inserted and colors added to make what's happening more clear). Here's a screenshot:
Without altering the basic HTML structure or the widths of the three elements, is it possible (without the aid of Javascript) to force the extra-wide element in column1 to appear below column2? Here is the effect I'm trying to achieve:
I know this can be done by rearranging html elements or by using Javascript, but I'm looking for a solution within the above constraints. I tried using clearing divs in various places, removing or adjusting floats, and trying some overflow settings, but could not achieve the effect I was looking for.
looking at it, without set heights on the content elements or using javascript to work their heights out or set positioning on the extra-wide element, what you are looking for can't be achieved.
Heres a fiddle which works using an absolute positioning of the extra wide element and a top value, as well as using some clever css to make the columns the same height.
http://jsfiddle.net/yKRu4/1/
As i siad this works, but i honestly feel what you are looking for can't be achieved with the restrictions you have put in place.
I'm trying to practice some CSS/HTML, and I am listing what should be done in a table using divs.
The issue I am having is that when I am setting the margin's, the text isn't lining up into columns properly because some text is longer than others, so it results in a jagged table.
e.g.
123 hello coool
123 asdfasdfsadf cool
123 hello coool
123 asdfasdfasdf kkk
So the spacing between each section is correct i.e. 20px, but since the text varies in length it doesn't look aligned.
what's the issue here? is there a solution to this
(I know a table would make it easier, but I want to learn the div way)
How are you getting your divs to line up next to each other -- that is, simulate rows? If you are using floats, e.g. float: left, then the effect you're experiencing is commonly known as shrink-wrapping. In a shrink-wrapped div, the div's width will automatically correspond to the length of the content.
The only pure html/css way around this is explicitly set the width property of your div. You'd need to set each of the divs in a column to the same explicit width. In order for this to be effective, you need to have some idea of the length of your content, and set width at least as wide.
If you want each div in a column to dynamically inherit a width from whichever div ends up having the longest content, you'd have to use javascript.
You're probably not assigning them fixed widths, causing them to just be sized automatically. Tables will automatically make each cell in a column the same width, but it cannot be done using s, you need to set a fixed width.
You could make each column its own div. EG:
<div class="col1">
<p>123</p>
<p>123</p>
<p>123</p>
<p>123</p>
</div>
<div class="col1">
<p>hello</p>
<p>asdfasdfasdf</p>
<p>hello</p>
<p>asdfasdfasdf</p>
</div>
<div class="col1">
<p>cooool</p>
<p>cooool</p>
<p>cooool</p>
<p>cooool</p>
</div>
and do
.col1 {
float: left;
}
but it will only result in pain and suffering.
I don't know why you want to do it this way; perhaps you heard "tables are wrong", but that is incomplete. The whole phrase is "tables are wrong for layout".
Use tables for tabular data, like this.
It's not a table vs divs, it should be a table vs. semantic markup. If you just replace all the table elements with divs you're missing the entire point of the whole thing.
Also in your example you would use a table.