Thymeleaf How implement fragment container with flexible layouts - thymeleaf

I need a Thymeleaf fragment that implements a collapsable panel (bootstrap).
The contents of the panel may be other or static html.
I try to implements a flexible layouts and bootstrap
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#flexible-layouts-beyond-mere-fragment-insertion
I've tried but all my attempts have ended in Exception java.lang.StackOverflowError: null
frag.html
<div th:fragment="ANOTHER">
<div><span>Test</span></div>
<div/>
...
<th:block th:fragment="AUDIT">
<input type="hidden" th:field="*{createDate}"/>
<input type="hidden" th:field="*{lastChangedate}"/>
</th:block>
....
<th:block th:fragment="COLLAPSE(title)">
<div class ="row">
Title
<div th:id="${title}" class ="row collapse">
<div class="panel panel-primary">
<div class="panel-body">
<th:block th:replace="~{:: ?????}"/> <<<----------------¿?
</div>
</div>
</div>
</div>
</th:block>
....
<div th:fragment="more" />
<th:block th:fragment="many" />
....
view.html
<div th:replace="~{frag :: COLLAPSE('Label_Audit')}">
<div th:replace="~{frag :: AUDIT}"/>
<div th:replace="~{frag :: ANOTHER}"/>
Help me!
</div>
¿Do you have any solution?

Related

AntD Carousel only displays the first div in it

This is the Carousel gist from my code.
<Carousel arrows={true}>
<div className='new-offers-item'>
<div className='new-offers-item-bg'>
<div className='new-offers-item-rent-tag'>TEXT HERE</div>
<div className='new-offers-item-favourite' />
<div className='new-offers-posted-at'>ANOTHER TEXT HERE, 10:44</div>
</div>
<div className='new-offers-item-location-rate'>
<div className='new-offers-item-location'>street address, 5<br />CC Espiral,<br /> 1 floor</div>
<div className='new-offers-item-rate'>
<div>
<span className='new-offers-item-rate-value'>240 000 </span>
<span className='new-offers-item-rate-unit'>abcd.</span>
</div>
</div>
</div>
<div className='new-offers-item-city-street'>
<span>City</span>
<span> </span>
<span>Address1</span>
</div>
<div className='new-offers-item-description'>
<div className='new-offers-item-description-row'>
<div className='new-offers-item-description-row-space'>
<div className='new-offers-item-description-row-space-division'>
<div>
<img src={sqM} />
</div>
<p>
<span>Total</span>
<span>600</span>
</p>
<p>
<span> </span>
<span className='span-divider'>/</span>
</p>
<p>
<span>Sale</span>
<span>300</span>
</p>
</div>
<div className='new-offers-item-description-row-metre-rate'>
<p>
<span>Per meter</span>
</p>
<p>
<span>6 700 </span>
<span>unit<sup>2</sup></span>
</p>
</div>
</div>
<div className='new-offers-item-description-row'>
<div className='new-offers-item-description-row-space'>
<div className='new-offers-item-description-row-space-division'>
<div className='new-offers-item-description-second'>
<img src={bldgIcon} />
<span className='item-type'>Торговый центр</span>
</div>
</div>
<div className='new-offers-item-description-row-metre-rate'>
<div className='new-offers-item-description-second'>
<img src={doorsIcon} />
<span className='item-type'>10 floor</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className='new-offers-item'>
<div className='new-offers-item-bg'>
<div className='new-offers-item-rent-tag'>TEXT HERE</div>
<div className='new-offers-item-favourite' />
<div className='new-offers-posted-at'>ANOTHER TEXT HERE, 10:44</div>
</div>
<div className='new-offers-item-location-rate'>
<div className='new-offers-item-location'>street address, 5<br />CC Espiral,<br /> 1 floor</div>
<div className='new-offers-item-rate'>
<div>
<span className='new-offers-item-rate-value'>240 000 </span>
<span className='new-offers-item-rate-unit'>abcd.</span>
</div>
</div>
</div>
<div className='new-offers-item-city-street'>
<span>City</span>
<span> </span>
<span>Address1</span>
</div>
<div className='new-offers-item-description'>
<div className='new-offers-item-description-row'>
<div className='new-offers-item-description-row-space'>
<div className='new-offers-item-description-row-space-division'>
<div>
<img src={sqM} />
</div>
<p>
<span>Total</span>
<span>600</span>
</p>
<p>
<span> </span>
<span className='span-divider'>/</span>
</p>
<p>
<span>Sale</span>
<span>300</span>
</p>
</div>
<div className='new-offers-item-description-row-metre-rate'>
<p>
<span>Per meter</span>
</p>
<p>
<span>6 700 </span>
<span>unit<sup>2</sup></span>
</p>
</div>
</div>
<div className='new-offers-item-description-row'>
<div className='new-offers-item-description-row-space'>
<div className='new-offers-item-description-row-space-division'>
<div className='new-offers-item-description-second'>
<img src={bldgIcon} />
<span className='item-type'>Торговый центр</span>
</div>
</div>
<div className='new-offers-item-description-row-metre-rate'>
<div className='new-offers-item-description-second'>
<img src={doorsIcon} />
<span className='item-type'>7 floor</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</Carousel>
Only the first div.new-offers-item gets displayed.
How do I get the second one and others to display?
it is as designed, this shows the first item as current and to move to next item you can click on the navigation. You can set the background of new-offers-item to see the navigation. you can refer to here
https://codesandbox.io/s/nn44020wzp
This is the soultion that produced the desired outcome. Added 2 more
.new-offers-item.
const carouselSettings = {
arrows: true,
slidesToShow: 3,
slidesToScroll: 1
};
Then add the const carouselSettings to the Carousel component:
<Carousel {...carouselSettings}>...</Carousel>.
Based on react-slick docs and playground at https://github.com/akiran/react-slick.
AntD Carousel doesn't place the arrows to the html layout when the number of items inside the Carousel equals to slidesToShow. The arrows which are buttons are transparent by default you'd need to put an arrow image inside the buttons. The css classes for buttons are .ant-carousel .slick-prev and .ant-carousel .slick-next.

Bootstrap 3 - textarea is not editable on mobile screen (but editable on other screens)

When using textareas in my application, the textarea become 'not editable' on mobile screens. On other screen sizes there are no problems. The input (text) fields are working fine on mobiles.
Why is the textarea not editable on mobiles? How can I make it editable again?
<div class="row">
<div class="col-sm-12">
<form #f="ngForm">
<div class="form-group">
<div class="row">
<div class="col-sm-3"><label for="gcid">GcId</label></div>
<!-- <div class="col-xs-9"><input type="text" id="gcid" name="gcid" [(ngModel)]="gcid" #gcid="ngModel" class="form-control"></div> -->
<div class="col-sm-9 col-xs-10">
<input type="text" id="gcid" name="gcid" [(ngModel)]="gcid" required class="form-control" #v_gcid="ngModel">
<span *ngIf="!v_gcid.valid && v_gcid.touched" class="text-danger">GC mag niet leeg zijn. Vul een geldige GC code in. </span>
</div>
<div class="clearfix visible-sm-block"></div>
</div>
</div>
...
<div class="form-group col-xs-11">
<div class="row">
<label for="description">Description</label>
<textarea rows="3" id="description" name="description" [(ngModel)]="description" class="form-control"></textarea>
</div>
</div>
<div class="form-group col-xs-11">
<div class="row">
<label for="hint">Hint</label>
<textarea rows="4" id="hint" name="hint" [(ngModel)]="hint" class="form-control"></textarea>
</div>
</div>
I think it likely has something to do with the fact that your <div class="row"> element that contains the textarea doesn't have the proper row/column/group nesting. Try restructuring the HTML like this and see if that helps the cause.
<div class="row">
<div class="col-xs-11">
<div class="form-group">
<label for="description">Description</label>
<textarea rows="3" id="description" name="description" [(ngModel)]="description" class="form-control"></textarea>
</div>
</div>
</div>
As mentioned in my comment, this article gave me the idea: Bootstrap 3 inputs read-only in desktop mode but not on small devices.
You could also try adding the contenteditable="true" attribute to the textarea to see if that works. It shouldn't need it, but might help force the mobile screen to do what is needed.

Error when parsing HTML Thymeleaf pages

For some reason my HTML keeps throwing parsing errors, more specifically "Exception parsing document: template="find", line 69 - column 17" and I can't figure out why, at first closing the input tags helped but the rest of the tags are properly closed. Here's the HTML code:
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="layouts/layout"
xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
</head>
<body>
<div layout:fragment="content">
<h1 data-th-text="#{application.title.h1}"></h1>
<div th:replace="fragments/profile :: profile"></div>
<div class="row">
<div>
<div>
<ul>
<li><a th:href="#{|/home-accueil|}" data-th-text="#{tab.pending}">Home</a></li>
<li class="active" role="presentation"><span th:text="#{tab.find}">Quick find</span></li>
<li role="presentation"><a th:href="#{|/updated|}" href="#" role="tab" aria-selected="true">Updated
records</a></li>
</ul>
<div>
<p th:text="#{item.agentName}">Text.</p>
<div>
<div>
<label for="patent"></label>
<div>
<label>Search</label> <input id="patent" type="text" value="" name="searchText" /> <span>View </span>
</div>
</div>
</div>
<div>
<div>
<label><span>test2</span></label>
<div>
<label>Search</label> <input id="trademark" type="text" value="" name="searchText" /> <span> View
</span>
</div>
</div>
</div>
<hr>
<div>
<div>
<div>
<label for="last">Last name</label> <input name="last" id="last" type="text" />
</div>
<div>
<label for="first">First name</label> <input name="j_password" id="first" type="password" />
</div>
<div>
<label for="firm">Firm name</label> <input name="firm" id="firm" type="password" />
</div>
Search
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The <hr> was the problem, it should be <hr /> instead, d-oh!

Wget post data with text box that has randomly generated value?

I'm trying to use Wget to log in to my router and make a complete mirror of all the pages. The problem is, the router login page does not use the traditional "user" & "pass" ID for the text fields. It has a 'Password' and 'VmWpsPin' field. The ID for the 'Password' field is randomly generated every time the page is loaded/refreshed/requested. Below is the source code of the relevant part of the router page:
<body lang="en" class="superhubGUI" onload="javascript:Init()">
<div class="globalHeader">
<div id="nav">
<div id="logo">
<h1 id="header">Super Hub</h1>
</div>
<div id="buttons">Router Status
</div>
</div>
</div>
<div id="content">
<div id="container">
<div id="main">
<div class="panel noTitle" style="*padding:38px 30px 0px 30px">
<div id="login" class="inner">
<div class="inner-section">
<h2>Welcome to your Virgin Media Super Hub 2ac</h2>
<div id="signInForm">
<form action="/cgi-bin/VmLoginCgi" method="POST" name="signIn1" id="signIn">
<h2 id="loginTitle">Sign in to view and change your settings</h2>
<div class="field formField noHint username clearfix">
<label for="username"></label>
</div>
<div style="position:relative;top:-20px;" class="field formField noHint password clearfix">
<label for="password">Settings Password</label>
<input type="password" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="KsCAqiihZb" id="password" onkeypress="handleKeyPress(event)" />
<div style="position:relative;left:-10px;" class="tooltip">
<img style="position:absolute; top:10px;" src="../images/toolTipButton.png"><span>Password can be found on the base of your Super Hub</span>
</div>
</div>
<div style="position:relative;top:-25px;" class="field formField noHint password clearfix">
<label for="password">WPS PIN</label>
<input type="text" autocomplete="off" value="" maxlength="15" class="name required onefiftyPX inactive" name="VmWpsPin" id="WpsPin" onkeypress="handleKeyPress(event)" />
<div style="position:relative;left:-10px;" class="tooltip">
<img style="position:absolute; top:10px;" src="../images/toolTipButton.png"><span>WPS PIN can be found on the base of your Super Hub</span>
</div>
</div>
<div>
Sign In
</div>
</form>
<p>
<span style="font-weight:bold;">Don't know your password?</span>
<br/>You'll find your default password on the bottom of your Super Hub.
</p>
</div>
</div>
</div><span class="pFoot"> </span>
</div>
</div>
My question is, how can I use Wget to login to the router when the ID changes at every request, is there somehow a way to request the page, parse the value out and then submit the form using something like --keep-session?
Or is there an alternative solution outside of Wget to automate the process? Any help is much appreciated.

How would I create two inputs per line with Bootstrap?

I'd like to put the label on the left and have two inputs on the right, with 'addons'. This is what I have so far, but it seems to be wrapping. What am I doing wrong?
<form class="form-horizontal" role="form">
<fieldset>
<div class="row">
<div class="col-xs-6">1. Some text</div>
<div class="col-xs-3 input-group">
<span class="input-group-addon">$</span>
<input class="form-control" type="text" placeholder="How much?">
</div>
<div class="col-xs-3">
<span class="input-group-addon">$</span>
<input class="form-control" type="text" placeholder="How much?">
</div>
</div>
</fieldset>
</form>
As mentioned in the Bootstrap docs, this:
<div class="col-xs-3 input-group">
Is incorrect. You must put the input-group class on a separate div nested within the col-xs-3 div instead, rather than chaining these classes on the same element like that.

Resources