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
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 have a table if i am clicking on any of the row in a table, it will display more detailed information about the row in right side of the table.
I have declared Boolean variable declared on the ts and i will set to true or false.
Now the problem is, If i click on the 1st row, it will fetch the details and display it. If i click on either 1st row or any row in the table previously displayed details on the right wont be displayed.
Actually what i want to do is, i click on 1st row , it should display the details. If i click on anyother row, previously shown details should be hided, and new details should be displayed. How can i achieve this by using only angular 7 & typescript.
ts:
show = false;
details(id:number){
this.show= !this.show;
//inject service to fetch the data
}
<div class="row">
<div class="col-md-5">
<table>
<tbody>
<tr *ngFor="let order of Orders" (click)="details(order.id)"
class='clickable-row'>
<td> //display details </td>
</tr>
</tbody>
</table>
</div>
<div class= "col-md-6">
<div *ngIf="show">
<mat-card>
<mat-card-content>
//display details here
</mat-card-content>
</mat-card>
</div>
</div>
I suggest you build a child component in the current component just for displaying the details the pass the details of the particular row down to the child component using property binding that way you will have access to it when you use #input() in the child component. It will change each time since angular will do the tougher job for you at the background
Use Property Interpolation.
<div class= "col-md-6">
<div *ngIf="show">
<mat-card>
<mat-card-content>
{{RowDetails}}
</mat-card-content>
</mat-card>
</div>
</div>
In your .ts file, have a property called RowDetails initialized as an empty string(or w/e). In the onClick event, set RowDetails to the details for that row.
I know a for each loop focuses on one array usually, however I'm new to Umbraco and I'm wondering if this is possible?
My code is as follows:
<div>
<div class="row">
#foreach (var feature in homePage.CSSHomepages.Where("featuredPage"))
{
<div class="3u">
<!-- Feature -->
<section class="is-feature">
<img src="#feature.Image" alt="" />
<h3>#feature.Name</h3>
#Umbraco.Truncate(feature.BodyText, 100)
</section>
<!-- /Feature -->
</div>
}
</div>
</div>
This currently displays one featured page, however I'm trying to also display a featured page from "HTMLHomepages", too.
I've tried the following code to no avail:
<div>
<div class="row">
#foreach (var feature in homePage.CSSHomepages.Where("featuredPage") & homePage.HTMLHomepages.Where("featuredPage"))
{
<div class="3u">
<!-- Feature -->
<section class="is-feature">
<img src="#feature.Image" alt="" />
<h3>#feature.Name</h3>
#Umbraco.Truncate(feature.BodyText, 100)
</section>
<!-- /Feature -->
</div>
}
</div>
</div>
But as I expected, I get runtime errors. Any suggestions?
The runtime error you receive is not umbraco related.
You have a single &-sign. This does not exists in the razor language.
You should at least use && which means AND.
However in this case you don't want to use and AND operator, but an OR operator: ||. This all would be true if you are checking something in an if statement.
Here you are looping through an array. That means that you need to concatenate the two arrarys before looping through them. Normally you get two IEnumerable's from the Umbraco API. To join two IEnumerables together you could use the Concat (see MSDN) function.
What I would do:
#{
var featureList = homePage.CSSHomepages.Where("featuredPage").Concat(homePage.HTMLHomepages.Where("featuredPage"))
}
<div class="row">
#foreach( var feature in featureList) {
// your existing code
}
</div>
In my ASP.NET MVC 2.0 project, I have a user control that loops through the Model data and displays multiple rows. Here is the code:
<div id="DivMain">
<%
var index = 0;
foreach (var item in Model)
{ %>
<div data_id="<%= item.Id %>" onclick="page.toggleId(<%= item.Id %>)">
<div style="display:none">
<%= Html.Encode(item.Id)%>
</div>
<div>
<%= Html.Encode(item.Question)%>
</div>
</div>
<%
index++;
} %>
</div>
I want the item.Name column to display a master/slave relationship. example - Question1(Question column on the first row) should display a + sign next to it. Clicking on the + sign should list all the Answers associated with that Question. Basically the model data has a one to many relationship between Question and Answers.
How can this be achieved?
Take a look at the Telerik mvc controls, the grid there is fairly easy to use for scenarios like this. And it's free if you do not need support. Samples can be found here.