I am reading a page using Thymeleaf.
In "Edit page", there is a "Back" button for going back to "User List Page". The strange thing for me is this button has "href" and "th:href" at the same time.
image detail of the button
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>user</title>
<link rel="stylesheet" th:href="#{/css/bootstrap.css}"></link>
</head>
<body class="container">
<br/>
<h1>修改用户</h1>
<br/><br/>
<div class="with:80%">
<form class="form-horizontal" th:action="#{/edit}" th:object="${user}" method="post">
<input type="hidden" name="id" th:value="*{id}" />
<div class="form-group">
<label for="userName" class="col-sm-2 control-label">userName</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="userName" id="userName" th:value="*{userName}" placeholder="userName"/>
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label" >Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" name="password" id="password" th:value="*{password}" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<label for="age" class="col-sm-2 control-label">age</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="age" id="age" th:value="*{age}" placeholder="age"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" value="Submit" class="btn btn-info" />
Back
</div>
</div>
</form>
</div>
</body>
</html>
It is obvious that "th:href" is for going back. Is there any opition on what is the function of the atrribute "href"?
ThymeLeaf is designed to use the same file for both as prototype you can view in your browser as well as a working template file. What this means in practice is that if you want, you can open the template file in a browser without actually running it and it still looks okay. For example, in this code:
Back
If you open the file directly in a browser, the browser will ignore the th:href (because it doesn't know what to do with it) and instead use href="/toAdd". However, when you run it through the templating engine on a server, href="/toAdd" is replaced with the result of the dynamic expression th:href="#{/list}".
This is more easily shown with a table. Like this:
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
</table>
When you open that in a browser, you'll see a table with a single row (Onions, 2.41, yes). But when you run it through the server, the actual content of the table is replaced with whatever data exists in the ${prods} variable.
Related
I'm trying to change the size of inputs in a multiple-input row (Bootstrap 5). I can change the label size but not the two inputs next to it. I want one to be col-7 and the other col-1. But the two inputs stay the same in size (see screenshot).
Here is the code:
<div class="row">
<!-- left column -->
<div class="col-5">
<div class="input-group my-3">
<label class="col-4 col-form-label"><?php echo $label['client-name']; ?>: *</label>
<input type="text" class="form-control col-7" name="clientname" value="<?php echo (isset($clientname)? $clientname : ""); ?>" />
<input type="text" class="form-control col-1" name="clientID" value="<?php echo (isset($clientID)? $clientID : ""); ?>" />
</div>
you can use width for input text.use this code:
<div class="row">
<!-- left column -->
<div class="col-5">
<div class="input-group my-3">
<label class="col-form-label">
clientname:
</label>
<div class="d-flex">
<input type="text" class="form-control w-25" name="clientname"
value="" />
<input type="text" class="form-control " name="clientID"
value="" style="width: 10%;" />
</div>
</div>
</div>
You should put your label in a separated column giving it a width like I did here so that the label column always takes col-3 and the content column always takes col-9.
Then you can treat the content column as another row and split it in 7-2 (but the bootstrap canonic layout would expect 12 cols in total).
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-3">
<label class="col-4 col-form-label">Label</label>
</div>
<div class="col-9">
<div class="row input-group">
<div class="col-7">
<input
type="text"
class="form-control"
name="clientname" value="***" />
</div>
<div class="col-2">
<input
type="text"
class="form-control"
name="clientID"
value="***" />
</div>
</div>
</div>
</div>
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!
I am writing integration test for following html structure but i am stuck on text fields and capybara fill_in method
<div class="row" id="attr_3">
<div class="span4">
<input name="description[]" type="text" value="Air Conditioning" />
</div>
<div class="span4">
<input id="value_" name="value[]" type="text" value="" />
</div>
</div>
<div class="row" id="attr_20">
<div class="span4">
<input id="description_" name="description[]" type="text" value="Autopilot" />
</div>
<div class="span4">
<input id="value_" name="value[]" type="text" value="" />
</div>
</div>
This is a chunk of code Now I have to fill the value of text box whose description is "Air Condition". How I can do that? because there is no formal structure of this html and Air Condition is not label it is also a text box.
I have used the basic angular script which update what ever you type in the input field on any element we specify, real time...
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div>
<label>Name:</label>
<input type="text" ng-model="yourName" placeholder="Enter a name here">
<hr>
<h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>
Im new to Angular. I used this on may rails app. But the problem is, the field I used ng-model will reset its valu after submit. Even setting the 'value' attribute won't work. How can I fix this?
Exact code generated from my rails application :
<form accept-charset="UTF-8" action="/members" class="custom" id="new_member" method="post">
<div class="row collapse text-field">
<div class="small-4 columns">
<h3>Add Member : </h3>
</div>
<div class="small-6 columns left inline">
<h3 class="subheader inline"> {{newEntry.name}}</h3>
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_name">Full Name</label>
</div>
<div class="small-7 columns left">
<input class="input" id="member_name" name="member[name]" ng-model="newEntry.name" type="text" value="gj" />
</div>
</div>
<div class="row collapse text-field">
<div class="small-3 columns">
<label class="prefix" for="member_address">Address</label>
</div>
<div class="small-9 columns">
<textarea class="input" height="115" id="member_address" name="member[address]">
</textarea>
</div>
</div>
<div class="row">
<div class="small-9 columns" ><input class="button radius" name="commit" type="submit" value="Add Member" /></div>
</div>
</form>
Note : I haven't used an ng-controller. Im new to Angular. If its required, please tell me how to convert the above to the controller. I can get the value of the field and send it back to the form in rails. Its there in a variable. But Angular keeps wiping it!
Note2 : This problem persist only for the input field I used angular-model.. All the other fields retained the data!
Ok this is not the best solution but you could do this:
<input type="text" ng-init="yourName = 'Your Value Goes Here'" ng-model="yourName" placeholder="Enter a name here">
ng-init directives are run when the app intialises, so your value will be assigned to angular's internal "yourName" model and be updated in the view accordingly.
That would solve your problem but its not the best way. Hopefully that will get you going for now - I'll try and post a more "ideal" solution shortly.
I am developing MVC 3 application along with it I am using bootstrap for design.
I have created the log in form.
I am trying to set it at center position of the screen but some how its not working.
This is my code.
#using (Html.BeginForm("LoginUser","Login",FormMethod.Post))
{
<div class="container-fluid" style="padding-left:0px; margin-top:165px; margin-left:140px;">
<div class="row-fluid">
<div class="span12 roundedDiv offset4" style="width:400px; height:250px;">
...
...
...
Controls...
....
....
</div>
</div>
</div>
}
what to do ?
Margin auto does this for you, without having to use <center>.
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<style type="text/css">
#loginBox {
margin: 20% auto;
width: 200px;
}
</style>
</head>
<body>
<form action="index.php" method="POST" id="loginBox">
<input type="text" name="user" placeholder="Username" autocapitalize="off" /><br />
<input type="password" name="pass" placeholder="Password" /><br />
<input type="checkbox" name="remember"> Remember Me<br />
<input type="submit" value="Log In" name="login" />
</form>
</body>
</html>
I would advise against usage of margins for the horizontal alignment. Try something like this:
<div class="container-fluid">
<div style="margin-top:20px;" class="row-fluid">
<div class="offset4 span4 well">
<h1>Login page</h1>
<form method="POST">
<label>Login:
<input type="text" placeholder="Enter your login" name="username" autofocus class="span12">
</label>
<label>Password:
<input type="password" placeholder="Enter your password" name="password" class="span12">
</label>
<hr>
<div class="btn-toolbar">
<button type="submit" class="btn btn-info">Log in</button>Sign in with Google
</div>
</form>
</div>
</div>
This is code I used to build a simple login form.
Since you're using fluid container hence responsive design I'd recommend to avoid using hardcoded values like 400 px. Instead you can set it width by applying span class like:
<div class="row-fluid">
<div class="offset3 span6">
It gives you login form width of 6 rows and 3 rows offset on the left and right (12 rows is default bootstrap grid).