I want to display 5 columns in a row. 6 columns are rendering if I use col-2, 4 columns are rendering if I use col-3. How can I display 5 columns?
<div class="row">
<div class="col-2" *ngFor="let control of controls; let i=index;">
{{contol.data}}
</div>
</div>
You can use col-auto class which will automatically adjust columns based on screen size or you can create your own col class for 5 columns like below :
.col {
flex: 0 0 20%;
max-width: 20%;
}
You can use column class col instead of col-2. Please have a look to the following code.
<div class="row">
<div class="col" *ngFor="let control of controls; let i=index;">
{{contol.data}}
</div>
</div>
I hope this will help you. Thank you.
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.
I want to display the items out of my class in div-containers.
my code looks like this:
List<Produkte> PListe = Produkte.Anzeige(wert);
div class="row">
{
foreach (var item in PListe)
{
<div class="col-md-3">
<figure class="figure">
<img src="~/pictures/#(item.name).jpg" alt="#item.name">
<figcaption class="figure-caption"> #item.name </figcaption>
</figure>
</div>
}
</div>
}
it should be two rows with each 4 items. but the problem is in the second row the div-container shift and get displayed wrong: after the first picture in the second row is a big gap (empty divs?!) and then it goes on with the other pictures.
can you help me to solve this?
im a total beginner in this so please lots of explaining
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>
<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?