I have got an array whose elements I populate in a div as follows:
<div align="center" ng-show="showWords" class="container">
<div ng-repeat="word in whichArray" ng-if="$index % 2 == 0" class="row">
<h4><div class="col" style="padding-left:9cm; padding-right:5cm">{{whichArray[$index]}}</div></h4>
<h4><div class="col">{{whichArray[$index + 1]}}</div></h4>
</div>
</div>
This looks like following:
The jsfiddle I referred to http://jsfiddle.net/vm3j4akp/ has such elements populated in a very clean way (i.e. there is enough space between adjacent elements and all second elements on each row start at the same position)
I am using however Ionic so I will have to use Ionic grid and not the bootstrap grid. How can I rearrange these divs nicely?
what does class="col" mean? we have to use some width like col-sm-6 instead only class col. we can remove padding in style also
I managed a work around like this:
<div align="center" ng-show="showWords" >
<div ng-repeat="word in whichArray" ng-if="$index % 2 == 0" class="row">
<div class="col" align="left" style="margin-left:9cm;">{{whichArray[$index]}}</div>
<div class="col" align="left">{{whichArray[$index + 1]}}</div>
</div>
</div>
Related
When do yo use row column construct in Zurb Foundation 6.2.3 framework?
<div class="column row">
Row column
</div>
It almost identical to,
<div class="row">
Row
</div>
Only that row column is shorter in length.
This has to do with the way framework grids work (not only foundation), .row elements are not meant to be content containers itself, .column are. Grid elements has paddings and margins and, if you use just .row, that would cause misalignment with other elements on the grid. So, if you have something like:
<div class="row">
<div class="column medium-6">Column A</div>
<div class="column medium-6">Column B</div>
</div>
<div class="row">
<div class="column">Column C, full width always</div>
</div>
<div class="row">
<div class="column medium-6">Column D</div>
<div class="column medium-6">Column E</div>
</div>
Please take a look to the Column C, as it is full width on all breakpoints, doesn't need to have sizing classes, so just "column" or "columns" will suffice, but it still having an extra div with no other need than having the proper sizing/padding/margin to keep content alignment to upper and lower row, so... it's better if second row is: <div class="row column">Column C, full width always</div>, just that.
That's the situation in which you should use the row column construct; and yes, I do encourage you to use that construct, avoid use .row as direct content container.
Hope this helps.
I can't seem to work out why my columns are overlapping in bootstrap
I've checked that my columns add up to 12
After "row" class there is always a column class
I have added my full code in a fiddle:
https://jsfiddle.net/exubnw4a/
As you can see , a lot of these values are getitng pushed together, when it should be 4 separate tables
Here is a shortened down version of my code:
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<h1>LH5</h1>
<table class="table">
table contents here
</table>
</div>
<div class="col-md-3">
<h1>LH5</h1>
<table class="table">
table contents here
</table>
</div>
<div class="col-md-3">
<h1>LH5</h1>
<table class="table">
table contents here
</table>
</div>
<div class="col-md-3">
<h1>LH5</h1>
<table class="table">
table contents here
</table>
</div>
</div>
</div>
</div>
Your table contains more rows which take more width than the 25% of col-md-3 class. You can make use of table-responsive class in such cases.
SAMPLE
Starting at md (medium, around 992 pixels), the main 4 divs are shrinking to 25% due to class="col-md-3". Remove that and it will go back to desired 100% at all sizes. See this screenshot showing how removing that causes it to work for the table on which it is removed:
If you want to place 4 elements in 1 row, make sure that they are all inside the same Bootstrap "row" class. In your case, you have to put all your tables in one row instead of creating a new row for each table.
I have a weird problem with bootstrap columns.
I am using grid as below:
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3">Content2</div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
And these columns are randomly generated and sometimes there can be no content in any of the columns like as below
<div class="row">
<div class="col-sm-3">Content1</div>
<div class="col-sm-3"></div>
<div class="col-sm-3">Content3</div>
<div class="col-sm-3">Content4</div>
</div>
Now the problem is that when there is no content in column2 then column3 content shifts left. I want to avoid that.
Below is the presentation that i am getting
When all blocks have content
Content1 Content2 Content3 Content4
When second block do not have content
Content1 Content3 Content4
Representation that want is that:
Content1 Content3 Content4
You should add an inner Div inside your columns and set min-height property for better solution:
New HTML
<div class="row">
<div class="col-sm-3"><div class="column-content">Content1</div></div>
<div class="col-sm-3"><div class="column-content"></div></div>
<div class="col-sm-3"><div class="column-content">Content3</div></div>
<div class="col-sm-3"><div class="column-content">Content4</div></div>
</div>
CSS
.column-content {
min-height: 100px;
}
Taken help form this page: http://www.tutorialrepublic.com/css-reference/css-min-height-property.php
The easiest solution will be to add “ ” to the end of a column.
It will not change much your lay out but will help with “empty” columns
I think there is no such a solution in bootstrap for your problem.
But You can use an jquery script for checking the div is null or not, if null assign an css property display:none; to that div( using script)
I need to build a pyramid of content blocks using the Foundation grid.
The problem is that for rows that are not divisible by 12, I cannot stack the next row in the pyramid so that it is centered under the row above it.
It is like I need a half column offset or something equivalent.
I thought about using .centered on a nested row, but that seems to have the same problem of dividing half columns.
<div class='row'>
<div class='small-1 small-centered columns'>1</div>
</div>
<div class="row">
<div class='small-5 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-5 columns'></div>
</div>
<!--- This row with 3 content blocks is not centered below the previous row --->
<div class="row">
<div class='small-4 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-1 columns'>3</div>
<div class='small-3 columns'></div>
</div>
Fiddle:
http://jsfiddle.net/1cq1gqtq/
I would use block grid instead. The block grid utility will fill up whatever available space is created by the row above.
See the Foundation docs for examples of how to use it: http://foundation.zurb.com/docs/components/block_grid.html
I use this a lot when I need no padding on the left/right sides of the outer columns.
I have a row divided into 3 columns using col-sm-4. Now i expect this row to be divided horizontally into three parts. But it's divided vertically.
See on Jsfillde
Here's my code
<div class="container">
<div class="row" style="padding:13px 15px;">
<div class="pull-left span4">
<img src="themes/custom/img/logo.png" width="120" alt="logo"/>
</div>
<div class="pull-right span4">
<div class="row">
<div class="col-sm-4">One</div>
<div class="col-sm-4">Two</div>
<div class="col-sm-4">Three</div>
</div>
</div>
</div>
</div>
I have kept a logo on the left side and on the right side there is a row that i want to divide horizontally in 3 parts.
What am i doing wrong?
Your code works just fine. The .col-sm-* classes are applied for width 768px and above. If you want make this three divs always horizontally, you have to use classes .col-xs-4 in your case. Updated jsfiddle
Futher reading - http://getbootstrap.com/css/#grid-options
I was having the same problem and was at my wits end. Then I refreshed the browser and it worked.