<div class="productColor">
<ul id="morecolor" class="morecolors">
</div>
<div class="sizeofproduct">
<div class="prices">
Here, I need to compare div class="productColor" and div class="prices"
both div are different, so how to compare this using firepath xpath?
Related
The cards rendered in each are not aligned correctly, because instead of aligning horizontally they are aligned vertically (which I don't want).
It is very strange that this happens because I have made many similar rowr classes that contain exactly the same cards (But with different content) and these "align" perfectly well. In fact, this had never happened to me with the rows I have made before until I made this one, and as much as I check the code over and over again it is exactly the same as the ones I have made previously except for the content which is the only thing different.
<row>
{{#each schdData.logs}}
<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="card-text">{{{objst this}}}</p>
</div>
</div>
</div>
{{/each}}
</row>
And to clarify, this row class is not inside another row class, it is only inside a container p-4" class as I use to put all the rows-columns of cards I make in row classes and they do work.
Here. You have used row element instead of row as class. You need to use <div class="row">...</div> instead of <row>...</row>. Please read bootstrap Grid system for more understand.
Your code should be as below:
<div class="row">
{{#each schdData.logs}}
<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="card-text">{{{objst this}}}</p>
</div>
</div>
</div>
{{/each}}
</div>
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.
Here's my code:
<div class="panel-group" id="accordion">
<% #workspace_tasks.each do |t, a| %>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse<%= t.to_s %>">
<%= t %>
</a>
</h4>
</div>
<div id="collapse<%= t.to_s %>" class="panel-collapse">
<div class="panel-body">
<table class="table table-striped">
</table>
</div>
</div>
</div>
<% end %>
</div>
As you can see, I am setting the ID for the panel to be in line with the Key for the hash which I am looping through.
The information is displayed correctly, however, if I set the panel by default to be expanded, I cannot collapse it. The inverse is true too where I cannot expand the panel if I set to to collapsed by default.
I us identical code elsewhere in my app but with a different Model being used to create the hash in the Controller. I find this behavior very strange.
I'm not sure whether it is my code? Or something with Bootstrap?
The HTML5 specifcation states that id cannot contain spaces:
When specified on HTML elements, the id attribute value must be unique amongst all the IDs in the element’s tree and must contain at least one character. The value must not contain any space characters.
You need to prepare t variable to be a valid id, e.g. by replacing spaces with -:
t.to_s.gsub(/\s/, '-')
Or by using parameterize:
t.to_s.parameterize
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 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>