I'm using SpringBoot MVC,
I have a Thymeleaf forloop going on. and i'm trying to figure out the correct output.
I have these divs with a class box. The Class box is what needs to be repeated over and over for each blog post.
i'm just stuck on where to put the div with class box at inside the forloop
<div style="align-items: center" th:each="blogPosts : ${BlogPosts}">
<h3 style="align-items: center" th:text="${blogPosts.title}"></h3>
<p style="align-items: center" th:text="${blogPosts.description}"><p/>
<div class="box" style="width:100%">
<div class="glass"></div>
<div class="content" style="padding:0; margin:0;">
</div>
</div>
Okay So It looks like I figured it out, sorry guys.
I'm new to thymeleaf. "th:each" will be taking over the current div and repeating the current div.
<div class="box" style="width:100%" th:each="blogPosts : ${BlogPosts}">
<div class="glass" th:text="${blogPosts.title}"></div>
<div class="content" style="padding:0; margin:0;" th:text="${blogPosts.description}">
</div>
</div>
I was in a hecktic moment asking this question.
If you find this page and have similar thinking. Let me explain my code
'th:each="blogPost : ${BlogPosts}"'
here we have two parameters. parameter 1 blogPost, is what thymeleaf is going to look for within your block. The second parameter is '${BlogPosts}' this is the variable we are grabbing from in our controller.
Thanks
'
<p style="align-items: center" th:text="${blogPosts.description}"><p/>
<div class="box" style="width:100%">
<div class="glass"></div>
<div class="content" style="padding:0; margin:0;">
</div>
</div>
'
Related
Picture
Hi, this is my design right now and i want to expand it more but something is limiting me.
<div className="position-absolute start-50 translate-middle-x">
<div className="d-flex">
<div className="me-2">
<Posts />
</div>
<div className="col">
<GroupPage />
</div>
</div>
</div>
I use d-flex to add element by : by.
I want to expand it to almost whole screen but no luck.
I am trying to scrape multiple elements with the same class names but each has a different number of children. I am looking for a way to select specific elements using the xpath(this would make it easiest for my loop).
const gameTimeElement = await page.$$('//*[#id="section-content"]/div[2]/div[1]/div/div['+ i + ']');
const gameTimeString = await gameTimeElement[j].$eval('h3', (h3) => h3.innerHTML);
This currently does not work.
After I select the element, I grab the h3 tag inside and evaluate it to get the innerHTML.
Is there a way to do this utilizing xpath?
<div id="section-content" style="display: block;">
</div>
<div class="matches">
<div class="day day-28-1" data-week="1" style="display: block;">
<h4>Sat, March 28, 2020</h4>
<div class="day-wrap">
<div class="match region-7-57d5ab4-9qs98v" data-week="1">
<h3 class="time">2:00PM
<span>(Central Daylight Time)</span>
<span class="fr">Best of 7</span>
</h3>
<div class="row ac ">
<div class="col-xs-3 ar">
<img class="team-logo" src="url"></div>
<div class="col-xs-2 al">
<h4 class="loss">(NA)<br>
<span class="team-name">Team1</span>
<br>
<span class="win spoiler-wrap">0</span>
</h4>
</div>
<div class="col-xs-2">
<img class="league-logo" src="url">
<h4> V.S.</h4>
</div>
<div class="col-xs-2 ar">
<h4 class="">(NA)<br>
<span class="team-name">Team2</span>
<br>
<span class="win spoiler-wrap">4</span>
</h4>
</div>
This is a sample of what I am working with for HTML on the website.
Yes, div class="day-wrap" could have a different number of childs. But I don't think that's a problem.
You want to get game times of all Rocket League matches. As you've noticed, games times are located within h3 elements. You can access it directly with one of the following XPaths :
//div[#id="section-content"]//h3
//div[#class="day-wrap"]//h3
//div[contains(#class,"match region")]//h3
If you want something for a loop then you can try :
(//div[#class="day-wrap"]//h3)[i]
where i is the number to increment (from 1 to x).
Side notes : your sample data looks incorrect (according to your XPath). You have a closing div line 2 and it seems you omit div class="row middle-xs center-xs weeks" before div class="matches".
I have an arraylist from which I need to get values where isActive = true, and to display the data in a <div> tag with the use of ng-repeat.
My problem is that I don't want to keep using ng-repeat every time, while fetching values in each <div> tag.
Is there any generic solution which will iterate only once, and I can see the value in <div>, side by side. Please see this attempt:
enter link description here
I want to see a result like this:
You can write your ng-repeat like below.
Whenever it get isActive true, it will create the div section for this.
<body ng-controller="MainCtrl">
<div ng-repeat="tempData in data">
<div ng-if="tempData.isActive == true" >
<div class="col-xs-12" >
<div class="col-xs-4">Plan Type:</div>
<div class="col-xs-8">{{tempData.plantype}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Term:</div>
<div class="col-xs-8">{{tempData.term}}</div>
</div>
<div class="col-xs-12">
<div class="col-xs-4">Rate:</div>
<div class="col-xs-8">{{tempData.rate}}</div>
</div>
</div>
</div>
</body>
I am using bootstrap framework.
<div class="container">
<h1>Menu</h1>
<div class="row">
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
<div class="col-md-4">
<img src="images/placeholder-200x200.jpg" alt="Image" class="img-rounded center-block">
Step 1: Credit & Money
</div>
</div>
</div> <!-- /container -->
Whitespace on the left and right sides of the images are also clickable - looks like .center-block is the culprit. How to solve?
A block spans the entire div, and centers by using margin. As a link, I would suggest instead removing the center-block from the images themselves, creating a class:
.center {
text-align: center;
}
and setting that class on the containing div, in your case:
<div class="col-md-4 center">
Or something similiar.
Also I would suggest placing your text description for each image into a div, since without the image being a block, the text would flow next to it. Simply placing the text in a paragraph tag would suffice.
Here is a jsbin to demonstrate:
http://jsbin.com/zamavoha/1/edit
I'm using a knockoutjs extension to place a loader on top of an element that is loaded from an ajax request so that a loading gif is show while the request is executing.
The fiddle is very basic:
It loads a list of avatars and shows the loading image while the ajax
request is executing.
Then, when you click an avatar, it's details
are loaded into another placeholder and a loading icon is also shown
while the request is executing.
The problem is, the very first time I click on an avatar, the loading icon isn't shown but all subsequential clicks works.
What am I missing here?
Thanks!
The issue that you are seeing is related to having both with and your custom binding on the same element. When the value is null, the with binding clears the child elements. This removes your loader (although it has already been copied off as part of the "template" used by the with binding), but it is put back when you populate infos. Having them on the same element also means that the bindings fires twice (once from changing infos and once from updating isAvatarLoading.
The easy way to fix this one is to split out the bindings like:
<div class="avatar" style="margin-left: 55px;" data-bind="loadingWhen: isAvatarLoading">
<div data-bind="with: infos">
<div data-bind="text: firstName"></div>
<div data-bind="text: lastName"></div>
<div data-bind="text: age"></div>
<div data-bind="text: description"></div>
<div style="margin-left: 55px;" id="" data-bind="with: image">
<img data-bind="attr: { src: Url }" />
<div data-bind="text: Description"></div>
</div>
</div>
</div>
If you don't want to add another element, then you could use the containerless with syntax like:
<div class="avatar" style="margin-left: 55px;" data-bind="loadingWhen: isAvatarLoading">
<!-- ko with: infos -->
<div data-bind="text: firstName"></div>
<div data-bind="text: lastName"></div>
<div data-bind="text: age"></div>
<div data-bind="text: description"></div>
<div style="margin-left: 55px;" id="" data-bind="with: image">
<img data-bind="attr: { src: Url }" />
<div data-bind="text: Description"></div>
</div>
<!-- /ko -->
</div>
Sample: http://fiddle.jshell.net/rniemeyer/75Lyn/