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.
Related
My images wont stay on the same row once i put the <p> in, they both sit in there own row, not sure what im doing wrong here
<div class="container">
<div class="row">
<div class="image-fluid text-center">
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
I think whatever CSS you used in class="row" is not acting the way you expect, because that div has a single child.
I don't know what's in your css file, but the following HTML works as I expect you want:
<div class="container">
<div class="image-fluid text-center" style="display:flex">
<div>
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
</div>
<div>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
Each image/text pair gets its own div, and what used to be your row div now has multiple children.
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>
I am currently working on a project that requires me to create a (real) estate agent website. I have imported an XML list with all the properties and created the database, but when I go to create a properties list and insert the first image for each property, it creates two images (one for each property in the list) and assigns both images to each property.
The code is:
<% #properties.each do |property| %>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<% property.pictures.each do |picture| %>
<% if picture.name.eql?('Photo 10') %>
<img src="<%= picture.url %>" class="img-responsive center-block"/>
<% end %>
<% end %>
</div>
<div class="col-sm-9">
<h4><%= property.advert_heading %></h4>
<p><%= property.main_advert %></p>
</div>
</div>
</div>
</div>
<% end %>
The html output is:
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{0b306ad6-63d3-4af2-a3ac-0dfa0885b724}/main/P1000507.jpg" class="img-responsive center-block"/>
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{5004cf3b-e189-48e9-a1a6-f029e402ddd3}/main/P1000507.jpg" class="img-responsive center-block"/>
</div>
<div class="col-sm-9">
<h4>Pen Y Bryn, Llanfairfechan</h4>
<p>A semi detached three bedroom family home located in a quiet cul de sac in the upper part of the village of Llanfairfechan. The property benefits from double glazed windows, gas central heating, gardens to front and rear. This would make an ideal family home or investment property.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{0b306ad6-63d3-4af2-a3ac-0dfa0885b724}/main/P1000507.jpg" class="img-responsive center-block"/>
<img href="http://med01.expertagent.co.uk/in4glestates/{376a3e5b-f940-4181-bc8e-255859c03e51}/{5004cf3b-e189-48e9-a1a6-f029e402ddd3}/main/P1000507.jpg" class="img-responsive center-block"/>
</div>
<div class="col-sm-9">
<h4>33, Pen Y Bryn, Llanfairfechan LL33 0UH</h4>
<p>A semi detached three bedroom family home located in a quiet cul-de-sac in the upper part of Llanfairfechan village. The property benefits from double glazed windows, gas central heating, gardens to front and rear. Restrictions apply. Application fees apply. Deposit: £750.</p>
</div>
</div>
</div>
</div>
To me it seems that rails is looping throught the property.picture.each twice (or I'm guessing more if I had more properties) and inserting the output twice but I can't see why.
Many thanks
It looks like you have duplicate pictures with a name attribute of 'Photo 10'. Use your rails console to run a query to confirm this.
Picture.where(name: 'Photo 10').count
How many records are returned? Is your expectation that each property would have one picture with a name of 'Photo 10'? If so you you should expect to have as many pictures returned as properties, if not then you have duplicate entries with the name 'Photo 10' for each property. which brings me to my next point.
You should normalize your database. The fact that you are relying on a non unique attribute, and that there are multiple picture entries that point to the same url tells me that. You are also creating a lot of unnecessary picture entries in the picture table. Instead, I'd create a join table between between properties and pictures, maybe called PropertyPictures. For each unique picture url, create one entry in the Picture table. For each property that uses a picture, create an entry in the join table with that property_id and the desired picture's picture_id. This will help in case your pictures change. As you have it now, if one picture url changes it doesn't change in all places, even if it should. As far as your view goes, now that you have a unique and consistent picture_id, use that, it will be impossible to have duplicates. Also, instead of pulling all pictures, just get the one you want. You could write a method in your property model to do this. It might look like this:
def special_picture
pictures.where(id: 1)
end
And in your view:
<% #properties.each do |property| %>
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<img src="<%= property.special_picture.url %>" class="img-responsive center-block"/>
</div>
<div class="col-sm-9">
<h4><%= property.advert_heading %></h4>
<p><%= property.main_advert %></p>
</div>
</div>
</div>
</div>
<% end %>
`
If you're only wanting the first image for each listing, why are you looping through all pictures for each listing?
You could do this instead:
<div class="col-sm-3">
<img src="<%= property.pictures.first.url %>" class="img-responsive center-block"/>
</div>
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.
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>