I am iterating over multiple addresses, and I want them in rows with 2 columns each. The way to achieve this with Twitter Bootstrap would be something like this:
<div class="row-fluid">
<div class="span6">First Address</div>
<div class="span6">Second Address</div>
</div>
<div class="row-fluid">
<div class="span6">Third Address</div>
<div class="span6">Fourth Address</div>
</div>
I can't seem to get Thymeleaf to do this in a single th:each statement. Is it even possible?
You can break your array into chunks, based on the number of columns you want. So, for two columns, you could do the following:
<div th:each="addressChunks : ${T(com.google.common.collect.Lists).partition(customerAddresses, 2)}" class="row-fluid">
<div th:each="address : ${addressChunks}" th:object="${address}" class="span6">
<address></address>
</div>
</div>
Related
My problem is with using thymeleaf iteration and if-else condition together.
Suppose i have 100 products in my mysql database i want to show them on a webpage using cards and there are only 4 cards in a row(I am able to print them in a row), but i want to change the row after every 4 iteration(0-3),so that new four cards will be shown in next row.
My thymeleaf Template Page:-
<div class="container" >
<div class="row">
<div class="col-xl-3" th:each="products : ${ListOfProducts}">
<div class="card" style="width: 15rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-title" th:text = "${products.productName}"></p>
<hr>
<p class="card-text" th:text = "${products.productCost}"></p>
AddToCard
</div>
</div>
</div>
</div>
I know we can do it using loops and if-condition but i am new to thymeleaf syntax, so please help me to get out of this rid.
Thanks in advance,Your words are value for me.
I have a bootstrap carousel on a page, where I have 3 game cards per one slide, but they are hardcoded. How can I make them dynamic? I need to take game cards from my db. This is what I have now:
<div id="carousel" class="carousel-inner thumb-inner">
<div class="active item">
<div class="col-lg-12 col-md-12 col-xs-12 slide1 slider-div">
<div class="game-card">Some content here</div>
<div class="game-card">Some content here</div>
<div class="game-card">Some content here</div>
</div>
</div>
<div class="item">
<div class="col-lg-12 col-md-12 col-xs-12 slide1 slider-div">
<div class="game-card">Some content here</div>
<div class="game-card">Some content here</div>
<div class="game-card">Some content here</div>
</div>
</div>
</div>
What is the right way to put a ruby code here? My thoughts were smth. like this:
<div class="active item">
<div class="col-lg-12 col-md-12 col-xs-12 slide1 slider-div">
<% Game.all.each_with_index do |game, index| %>
<div class="col-lg-4 col-md-4 col-sm-4">
<%= game.title %>
</div>
<% end %>
</div>
</div>
But this will give me all game card on a slide. What is the correct way to make 3 game card per one slide? Thanks.
You could make use of limit and offset here to get 3 records at a time. For example:
Game.offset(0).limit(3) # first 3 items
Game.offset(3).limit(3) # next 3 items
If the Game table only has a small number of records that fit comfortably in memory, you could also do something like this:
items = Game.all.to_a # do this once to load up all the records
items.shift(3) # call repeatedly to get the next 3 items
This has the advantage that you can randomise the items upfront e.g. Game.order("RANDOM()").to_a
I need to Bind Array Items to UI.
back in Days i used bootstrap and now looking to use Angular Material.
In bootstrap and angular Binding the code as follows
<div class="row">
<div ng-repeat="product in products">
<div class="col-sm-4">
<h2>{{product.title}}</h2>
</div>
</div>
how to do the simalar grid binding using Angular Material. I tried below
<div layout="column">
<div ng-repeat="item in todos">
<md-card>
<md-card-content>
<p>item.title</p>
</md-card-content>
</md-card>
</div>
</div>
Resulting all items in rows. But i need the display to be similar to bootstrap view, showing items next to each other and in next rows
You will have to add "layout-wrap" attribute to your row.
<div layout="row" layout-wrap>
<div ng-repeat="item in todos">
<md-card>
<md-card-content>
<p>item.title</p>
</md-card-content>
</md-card>
</div>
</div>
Read more about layout options here
i have created a partial view layout using bootstrap to display a single panel. whenever I call a partial view I use this layout and pass the section name on the ViewBag.
<div class="panel panel-default">
<div class="panel-heading">
#ViewBag.SectionName
</div>
<div class="panel-body">
<div class="container">
#RenderBody()
</div>
</div>
</div>
However, the issue is that inside a partial view, I may be calling another partial view using the same layout multiple times. This would result in nested panels with multiple levels.
The issue is, that I want to add a header element to the panel heading element containing the section name depending on the partial view nesting level. If we had three levels, the code would look like this:
<div class="panel panel-default main-content-panel">
<div class="panel-heading">
<h1>Section 1</h1>
</div>
<div class="panel-body">
<div class="container">
<div class="panel panel-default main-content-panel">
<div class="panel-heading">
<h2>Section 2</h2>
</div>
<div class="panel-body">
<div class="container">
<div class="panel panel-default main-content-panel">
<div class="panel-heading">
<h3>Section 3</h3>
</div>
<div class="panel-body">
<div class="container">
Some content and respective closing divs....
how could I accomplish this? An idea or solution that does not uses JS will be appreciated.
JS would certainly be the easiest way, but since you've explicitly disallowed that, the only option is to evaluate how many nesting levels there will be before they're actually rendered.
There's not a whole lot of detail here about what data structure represents these sections, but generally, you'll need to do a recursive count of the lower levels while rendering the upper level, and change the heading accordingly in the partial responsible for it. I can't give any more guidance than that without more code.
Long and short, you only get one bite at the apple when a partial is being rendered. You can't wait until the end and then modify something that happened in a previously rendered partial.
Hi please look at this,
<div class="row">
<div class="col-lg-5"></div>
<div class="col-lg-15">
<div class="row">
<div class="col-lg-**2/3**"></div>
<div class="col-lg-**1/3**"></div>
</div>
</div>
How Can I do it without separator?
I would like to do something like that:
<div class="row">
<div class="col-lg-10"></div>
<div class="col-lg-5"></div>
</div>
This is Grid - 20 columns, 5 column sidebar 15 rest.
Bootstrap is based on a 12 column grid. If you want a column to be 2/3's of a page with a sidebar 1/3 I would do the following.
<div class="container>
<div class="row">
<div class="col-sm-8">
<p> This content is 2/3 of the page</p>
</div><!-- col-sm-8 -->
<div class="col-sm-4 -->
<p>This content is 1/3 of the page</p>
</div><!-- col-sm-4 -->
</div><!-- row -->
</div><!-- container -->
If you are wanting it to be responsive I would start with defining the smaller screen size "col-sm-?" and large screens will inherit this.
Otherwise, I'm not sure what you are trying to achieve and what you mean by separator. Could you clarify?
Hope this helps.