I want to insert a div.row every three blocks in order to wrap three span together for the following haml snippet.
But this code insert a <div class="row"></div> rather than wrap the .span4.
- data.apps.applications.each_with_index do |app, index|
- if index%3 == 0
.row # This is the line I want to insert
.span4
How could I do that in haml or in this case, erb is more suitable?
I think what you want is something like this:
-data.apps.applications.each_slice(3) do |apps|
.row
-apps.each do |app|
.span4
This uses each_slice. apps is an array of three items from applications.
This takes groups of three elements from applications, and for each group adds a row div and then adds a span4 div for each element, so what you get is something like this:
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
If you don't have a multiple of three elements, the last group will just have one or two members.
Your indentation is wrong
- data.apps.applications.each_with_index do |app, index|
- if index%3 == 0
.row # This is the line I want to insert
.span4
Related
I am having an issue with displaying divs correctly.
I am displaying information about 10 books, and I would like to do so by having 3 rows of 3 and one row for the last book. This is what my first row looks like:
desired
This is the problem I am facing: wrong
I have a template that iterates over 10 books that I get from a search result and then the outer template displays 10 templates that belong to each book.
This is my template code for each book card:
<div class="col-sm-4">
<div class="profile-card text-center">
<img class="img-responsive" src="https://images.unsplash.com/photo-1454678904372-2ca94103eca4?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
<!-- <img class="img-responsive img-border center-block" src="{{imageFormatterOne}}{{getLargeImage LargeImage}}" alt=""> -->
<div class="profile-info">
<img class="profile-pic" src="https://pbs.twimg.com/profile_images/711000557742395396/jzm8hqwW.jpg">
<h2 class="hvr-underline-from-center">{{getTitle ItemAttributes}}<span>{{getAuthor ItemAttributes}}</span></h2>
<div>Publisher - {{getPublisher ItemAttributes}}<br>
Edition - {{getEdition ItemAttributes}}<br>
ISBN - {{getISBN ItemAttributes}}<br>
Publication Date - {{getPublicationDate ItemAttributes}}<br>
Media- {{getProductGroup ItemAttributes}}<br><br></div>
{{#if isVerifiedUser}}
</div>
</div>
</div>
In the outer template that calls each card template, I have wrapped each card template in a container:
<div class="container">
{{#each getSearchResults}}
{{>searchResult}}
{{/each}}
</div>
I tried doing the negative margin trick, which is why all the cards are attached vertically, but if I remove the code for that, then I face another problem which is that the div changes size to match the amount of text each card has.
To summarize I have two problems:
1) How can I display 3 cards in 3 rows and 1 row with 1 card? Edit: In addition, how could I make this responsive to larger screens? Ex: 4 per row, etc...
2) How can I set every div to a set size so every div is the same size?
Thank you very much.
1) How can I display 3 cards in 3 rows and 1 row with 1 card?
If you are pulling books from an array or list of some kind I would suggest using an loop that displays 3 books per row with an condition that checks if the length variable compared to the current index. If the index is greater less than or equal to the length then the book will be posted if not then it doesn't exit and nothing should be done. This way is you later add a book to the array you will not have to edit the HTML
or if you want it hard coded
use 4 rows
<div class="row">
<div class="col-md-4">book 1</div>
<div class="col-md-4">book 2</div>
<div class="col-md-4">book 3</div>
</div>
<div class="row">
<div class="col-md-4">book 4</div>
<div class="col-md-4">book 5</div>
<div class="col-md-4">book 6</div>
</div>
<div class="row">
<div class="col-md-4">book 7</div>
<div class="col-md-4">book 8</div>
<div class="col-md-4">book 9</div>
</div>
<div class="row">
<div class="col-md-4">book 10</div>
<div class="col-md-8"></div>
</div>
2) How can I set every div to a set size so every div is the same size?
If you want to create a style that ever book should follow
I would suggest Putting an outer around your current template for each book and give that div a class name
<div class="book">
<!-- you template -->
</div>
Now you can style this section uniformly using css
.book {
height: <what you want>;
width: <what you want>;
}
try to separate the 4 divs so each is on its own row:
<code>
div1 id=card1, id=card2, id=card3 />
div2 3 cards />
div3 3 cards />
div4 1 card />
then set style rules.
#card1 {
margin: x x x x;
}
#div1 {
margin-bottom: x x x x;
}
</code>
should work ok!
You can split the array in chunk of 3 and loop trough this chunks creating the div row container and displaying the 3 books in the col-*-4 columns.
I am working with Slim to render some elements with Bootstrap, I'm trying to render pairs of columns inside a row container, as follows:
<div class="row">
<div class="col-xs-6">
Container 1 - Left
</div>
<div class="col-xs-6">
Container 2 - Right
</div>
</div>
<div class="row">
<div class="col-xs-6">
Container 3 - Left
</div>
<div class="col-xs-6">
Container 4 - Right
</div>
</div>
The objective is to render these columns correctly regardless of the height of them.
The slim code that I am trying to use is the following:
- [1,2,3,4].each_with_index do |num, index|
.row # I want this row to appear only on odd iterations
.col-xs-6 Container #{num} - #{index % 2 == 0 ? "Left" : "Right"}
Is there an elegant way to do it?
I've thought of:
Having a single row and after 2 columns, add a page break of a .col-xs-12 column.
Getting the n and n+1 items and render them on a single loop.
The question goes:
Is there a way to render the container once and then add a child on a later iteration?
I started to use Twitter bootstrap for this application that I am working on.
I read the documentation about nesting rows in both fixed grid system and in fluid one.
Now, I want to do something like this
So of course I could do something like this
<div class="container">
<div class="row">
<div class="span 12">red</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
</div>
and I think I would get what I want. But I am wondering what are the consequences of doing
<div class="container">
<div class="row">
<div class="span 12">red</div>
</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
I don't see any difference now in my browser but I am wondering what will happen if I include multiple row elements in single container tag. Is the row-nesting the only proper way to create something like I showed? What is the difference between those two implementations of my design, so to speak?
The second version is more correct. But both work. The difference is how it responds when the page is re-sized. The second version will shrink and react better
However if you want the containers to match the above image you need to use class="container-fluid" and class="row-fluid"
Also remove the spaces between the spans and numbers
class="span 3"
Should say
class="span3"
This question already has answers here:
Changing number of columns dynamically in Bootstrap grids
(2 answers)
Closed 9 years ago.
When using Bootstrap's fluid grid, is it necessary to declare a column when you want the content to span the entire width of the row. In other words, is this sufficient
<div class="row-fluid">
This column should span the full width of the row
</div>
Or is it really necessary to do this (as the docs suggest):
<div class="row-fluid">
<div class="span12">This column should span the full width of the row</div>
</div>
Also, when I want to nest columns in a fluid grid, according to the docs
Nesting with fluid grids is a bit different [to a non-fluid grid]: the number of nested columns should not match the parent's number of columns. Instead, each level of nested columns are reset because each row takes up 100% of the parent column.
The docs then go on to give this example where the first row is one full-width column and the second row has 2 half-width columns
<div class="row-fluid">
<div class="span12">Fluid 12
<div class="row-fluid">
<div class="span6">Fluid 6</div>
<div class="span6">Fluid 6</div>
</div>
</div>
</div>
Apart from the class name of the rows, I don't see how this is at all different to a non-fluid grid. Also, this example seems to contradict the statement
the number of nested columns should not match the parent's number of columns
Because last time I checked 6 + 6 = 12. Can someone improve on this explanation?
(1) I don't see how this is at all different to a non-fluid grid
It uses percentages
(2) the number of nested columns should not match the parent's number of columns
Well, bad example, what they simply mean is that the number in the class names should always add up to 12, regardless of what they are nested in.
This is correct:
<div class="row-fluid">
<div class="span6 row-fluid">
<div class="span4"> </div>
<div class="span4"> </div>
<div class="span4"> </div>
</div>
</div>
instead of this, which is wrong:
<div class="row-fluid">
<div class="span6 row-fluid">
<div class="span2"> </div>
<div class="span2"> </div>
<div class="span2"> </div>
</div>
</div>
I hope you can help me with this one.
I'm trying to transfer the layout of a PHP/SQL website currently using tables to CSS.
I already have the css working (thanks to Yahoo Grid Builder) but now I need to show it programmatically in my website after I have the info on an array (through $row = dbFetchAssoc($result))
I guess the solution is to use n%m to catch the condition I need but I'm struggling with It.
The css I need to replicate is this one, the two class="yui-g" create a row and each class="yui-u first" and class="yui-u" create a cell in that row, so this code gives you a table with 2 rows and 4 columns. I want to show a new item of my array in each "Item N" (cell).
<div class="yui-g">
<div class="yui-g first">
<div class="yui-u first">Item 1</div>
<div class="yui-u">Item 2</div>
</div>
<div class="yui-g">
<div class="yui-u first">Item 3</div>
<div class="yui-u">Item 4</div>
</div>
</div>
<div class="yui-g">
<div class="yui-g first">
<div class="yui-u first">Item 5</div>
<div class="yui-u">Item 6</div>
</div>
<div class="yui-g">
<div class="yui-u first">Item 7</div>
<div class="yui-u">Item 8</div>
</div>
</div>
Thanks for your help guys!
In general - HTML tables should be used to display tabular data, with CSS used to style those tables.
HTML + CSS should be used for layouts, rather than the old ways of using tables to position content.
Use <table> for tabular data (data that you would store in a table). Everything else should be using HTML with CSS. From the looks of your code you should be using tables.