How can I add new line after each iteration in thymeleaf?
th:each generated content is rendered on a single line.
<div th:each="table: ${mapEntry.value}">
<div>
<span th:text="${table}"></span>
</div>
</div>
You can do it with using <br> or <hr> tag before each statement finish.
<div th:each="table: ${mapEntry.value}">
<div>
<span th:text="${table}"></span>
</div>
<br/>
</div>
mrtasln is correct. Even you can add one more <div> </div> or set some stylesheet with adding padding / margins for bottom.
<div th:each="table: ${mapEntry.value}">
<div>
<span th:text="${table}"></span>
</div>
<div>
</div>
</div>
Related
I made formulas with div and span, which contain some special symbols, but why can't they be displayed on the same line. I want them to show up like this -->[enter image description here], But they are displayed line by line.[enter image description here]
Please tell me what I am doing wrong!
<p>
<sub>n</sub>C<sub>r</sub> =
<div class="top"><sub>n</sub>P<sub>r</sub></div>
<div> r!</div> =
<div class="top">n!</div>
<div> r!(n-r)!</div>
</p>
<br>
<p>
<span>∫</span>
<div class="top">tan x</div>
<div>sec<sup>4</sup>x</div> dx =
<span>∫</span>
<div class="top">tan xsec x</div>
<div>sec<sup>5</sup>x</div> dx
</p>
Currenly you are not using float:left or not using display:flex css to make element in one line.
Try below code. You will get expected result.
<div style="display: flex;align-items: center;text-align: center;">
<div style="margin-right: 10px">
<sub>n</sub>C<sub>r</sub> =
</div>
<div style="margin-right: 10px">
<div class = "top"><sub>n</sub>P<sub>r</sub></div>
<hr>
<div> r!</div>
</div>
<div style="margin-right: 10px">=</div>
<div>
<div class = "top">n!</div>
<hr>
<div> r!(n-r)!</div>
</div>
</div>
I have a wrapper wrapping around 3 divs that are inline-block and all three divs are 128px high. There is no padding nor margin anywhere. The first div contains an image and ends up not the same height as the other two (lower by 3.3px).
<div style={{width:"700px",height:"700px",position:"relative",left:"50%",transform:"translateX(-50%)"}}>
<hr style={{width:"100%"}}/>
<div>
<div style={{display:"inline-block",width:"128px",height:"128px",backgroundColor:"grey",position:"relative",top:0}}>
<img style={{width:"100%"}} src="https://screenshotlayer.com/images/assets/placeholder.png"/>
</div>
<div style={{display:"inline-block",height:"128px",width:"*"}}>
<span style={{display:"block"}}>Name of Product</span>
<span style={{display:"block"}}>Quantity: <input type="text" className="form-control" style={{width:"50px",display:"inline-block"}}/></span>
<span style={{display:"block"}}><button className="btn-link">Remove from cart</button></span>
</div>
<div style={{display:"inline-block",height:"128px",float:"right"}}>
<span style={{position:"relative",top:"50%",transform:"translateY(-50%)",display:"block"}}>$$$</span>
</div>
</div>
<hr style={{width:"100%"}}/>
</div>
The code is written in JSX.
I've tried setting the wrapper to 128px, but the <img> is still sticking out the bottom
Why does the <img> act like that?
Add verticalAlign:top to each of the three <div>'s style attributes. This align's inline-block elements along their top edges.
<div style={{width:"700px",height:"700px",position:"relative",left:"50%",transform:"translateX(-50%)"}}>
<hr style={{width:"100%"}}/>
<div>
<div style={{verticalAlign:"top",display:"inline-block",width:"128px",height:"128px",backgroundColor:"grey",position:"relative",top:0}}>
<img style={{width:"100%"}} src="https://screenshotlayer.com/images/assets/placeholder.png"/>
</div>
<div style={{verticalAlign:"top",display:"inline-block",height:"128px",width:"*"}}>
<span style={{display:"block"}}>Name of Product</span>
<span style={{display:"block"}}>Quantity: <input type="text" className="form-control" style={{width:"50px",display:"inline-block"}}/></span>
<span style={{display:"block"}}><button className="btn-link">Remove from cart</button></span>
</div>
<div style={{verticalAlign:"top",display:"inline-block",height:"128px",float:"right"}}>
<span style={{position:"relative",top:"50%",transform:"translateY(-50%)",display:"block"}}>$$$</span>
</div>
</div>
<hr style={{width:"100%"}}/>
</div>
See My inline-block elements are not lining up properly for additional information.
My website shows different articles each in one thumbnail.
The problem is that the thumbnails seems to float everywhere. They are not aligned as it should be.
This is how my HTML code looks like.
</head>
<body>
<div class="top-bar">
<div class="logo"></div>
</div>
<div class="title-bar">
</div>
<br></br>
<div class="col-md-4">
<div class="thumbnail">
<img alt="300x200" src="[PIC]" width="300" />
<div class="caption">
<h3>
[Name]
</h3>
<p>
[Text]
</p>
<p>
<a class="btn btn-primary" href="index.php?action=DETAILE&id=[ID]">Go!</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
The result is that the columns are not aligned. There are 3 columns next to each other, but the height differs, as well the position on the page.
How can I solve this?
Now it looks like a staircase like in the code with the
I want:
Box 1. Box2. Box 3.
Bootstrap 3 column layout will be like
<div class="col-md-12">
<div class="row">
<div class="col-md-4">.col1</div>
<div class="col-md-4">.col2</div>
<div class="col-md-4">.col3</div>
</div>
</div>
To maintain equal height for all boxes assign equal height for all images,h3 and p tags(which are in the box)
Example snippet https://bootsnipp.com/snippets/featured/store-product-layout
and in your html code there are many closing < /div> tags check html validations once.
I'm trying to extract the text from within the div tag (Refer Code) (that is I need to extract "Stackoverflow to your rescue!")
<div class="one">
<div class="two">
<div class="three">
<div class="four">
<div class="five">
<div class="text_desc">
<p itemprop="description">
<p>
<div>
Stackoverflow to your rescue!
</div>
</p>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to scrape using scrapy in python, but I don't understand why response.selector.xpath('//div[#class="text_desc"]').extract() returns an empty list. So I'm unable to write queries to extract the text. Tell me how should I go about it! (A solution using cssSelectors would also do)
I'm trying to make a simple page header with bootstrap 3. Here's the code:
<div class="page-header">
<h1>Text on the left</h1>
<h3 class="text-right">This to the right but on the same line</h3>
</div>
Here's a jsfiddle to try: http://jsfiddle.net/DTcHh/2450/
Basically I just want to have text on the left and right inside the page-header, but on the same line.
The usual tricks of using float:left and float:right as with normal html "break" the page-header, meaning the text is properly aligned but is displayed outside (under) the page-header, which remains empty.
Any clues?
you can use "pull-right" and "pull-left" classes, with "clearfix" class after.
(Bootstrap 3)
<div class="page-header">
<div class="pull-left">
<h1>Text on the left</h1>
</div>
<div class="pull-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
also you can adjust line height on the h3 tag in the right, if you want to match with h1
Fiddle for Bootstrap 3: https://jsfiddle.net/darkosss/dy9wjk2q/
(as of Bootstrap 4.1)
use float-left and float-right instead. You still need the clearfix.
<div class="page-header">
<div class="float-left">
<h1>Text on the left</h1>
</div>
<div class="float-right">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
<div class="clearfix"></div>
</div>
Fiddle for Bootstrap 4: https://jsfiddle.net/darkosss/eozs65qb/
if you are using Bootstrap, you should do something like
<div class="page-header">
<div class="row">
<div class="col-md-6">
<h1>Text on the left</h1>
</div>
<div class="col-md-6">
<h3 class="text-right">This to the right but on the same line</h3>
</div>
</div>
</div>
if you want to "stylize" the h1, h2, etc, change it to "display:block" and you'll have to add a "width" attribute anyway
use the following structure to position with bootstrap:
<div class= 'container'>
<div class='row'>
<div class ='md-col-4'>
<h1>Text on the left</h1>
</div>
<div class = 'md-col-4.col-md-offset-4'>
<h3 class='text-right'>This to the right but on the same line</h3>
</div>
</div>
Think of the row as a grid across of 12. So fist 4 left 3rd. 2nd div is the 3rd third with a 4 grid offset or gap.
http://getbootstrap.com/css/