I have a problem to put content in the 1 row. I have two content, it cannot put two content in the 1 row. Below is my coding:
<div class="row">
<div class="form-group">
<div class="col-lg-1">
<label>Insured First ID</label>
</div>
<div id="input-type" class="row" style="margin-left:1px;">
<label class="radio-inline">
<input name="insured_first_id" id="old_ic" value="Old IC" type="radio" style="margin-left:35%;"/><span>Old IC</span>
</label>
<label class="radio-inline" style="margin-left:1%;">
<input name="insured_first_id" id="birth_cert" value="Birth Cert#" type="radio" style="margin-left:35%;"/><span>Birth Cert#</span>
</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input type="text" class="form-control" id="insured_real_id" name="insured_real_id" value="" title="Insured First ID">
</div>
</div>
<div class="form-group">
<div class="col-lg-1">
<label>Insured Second ID</label>
</div>
<div id="input-type" class="row" style="margin-left:1px;">
<label class="radio-inline">
<input name="insured_second_id2" id="old_ic2" value="Old IC" type="radio" style="margin-left:35%;"/><span>Old IC</span>
</label>
<label class="radio-inline" style="margin-left:1%;">
<input name="insured_second_id2" id="birth_cert2" value="Birth Cert#" type="radio" style="margin-left:35%;"/><span>Birth Cert#</span>
</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input type="text" class="form-control" id="insured_real_second_id" name="insured_real_second_id" value="" title="Insured Second ID">
</div>
</div>
</div>
My output like below the picture:
Actually, my expected result like below the picture,:
Hope someone can guide me on how to solve this problem. Thanks.
Ashiq output - edited:
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<div class="col-lg-1">
<label>Insured First ID</label>
</div>
<div id="input-type" class="row" style="margin-left:1px;">
<label class="radio-inline">
<input name="insured_first_id" id="old_ic" value="Old IC" type="radio" style="margin-left:35%;" /><span>Old
IC</span>
</label>
<label class="radio-inline" style="margin-left:1%;">
<input name="insured_first_id" id="birth_cert" value="Birth Cert#" type="radio"
style="margin-left:35%;" /><span>Birth Cert#</span>
</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input type="text" class="form-control" id="insured_real_id" name="insured_real_id" value=""
title="Insured First ID">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-group">
<div class="col-lg-1">
<label>Insured Second ID</label>
</div>
<div id="input-type" class="row" style="margin-left:1px;">
<label class="radio-inline">
<input name="insured_second_id2" id="old_ic2" value="Old IC" type="radio" style="margin-left:35%;" /><span>Old
IC</span>
</label>
<label class="radio-inline" style="margin-left:1%;">
<input name="insured_second_id2" id="birth_cert2" value="Birth Cert#" type="radio"
style="margin-left:35%;" /><span>Birth Cert#</span>
</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input type="text" class="form-control" id="insured_real_second_id" name="insured_real_second_id" value=""
title="Insured Second ID">
</div>
</div>
</div>
</div>
I think this will work fine for you.
I just created a row inside that row, divided col to col-lg-6 each.
using container is a usual practice
<div class="row">
<div class="col-lg-6 px-5 py-5">
<div class="form-group row">
<div class="col-lg-4">
<label>Insured First ID</label>
</div>
<div id="input-type" class="col-lg-4">
<label class="radio-inline">
<input name="insured_first_id" id="old_ic" value="Old IC" type="radio" /><span>Old
IC</span>
</label>
</div>
<div id="input-type" class="col-lg-4">
<label class="radio-inline">
<input name="insured_first_id" id="birth_cert" value="Birth Cert#" type="radio" />
<span>Birth Cert#</span>
</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input type="text" class="form-control" id="insured_real_id" name="insured_real_id" value=""
title="Insured First ID">
</div>
</div>
</div>
<div class="col-lg-6 px-5 py-5">
<div class="form-group row">
<div class="col-lg-4">
<label>Insured Second ID</label>
</div>
<div id="input-type" class="col-lg-4">
<label class="radio-inline">
<input name="insured_second_id2" id="old_ic2" value="Old IC" type="radio" /><span>Old
IC</span>
</label>
</div>
<div id="input-type" class="col-lg-4">
<label class="radio-inline">
<input name="insured_second_id2" id="birth_cert2" value="Birth Cert#" type="radio" /><span>Birth Cert#</span>
</label>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<input type="text" class="form-control" id="insured_real_second_id" name="insured_real_second_id" value=""
title="Insured Second ID">
</div>
</div>
</div>
</div>
check this one
Related
I want a row with 4 inputs, with 2 groups of 2 inputs and each group has one label.
My current code:
<form>
<div class="row">
<div class="col-md-3 form-group">
<label class="font-weight-bold" for="mondaystart">Monday [Time 1]: <span style="color: red;">*</span></label>
<input type="time" class="form-control" id="mondaystart" name="mondaystart" required>
</div>
<div class="col-md-3 form-group">
<label class="font-weight-bold" for="mondayend"> </label>
<input type="time" class="form-control" id="mondayend" name="mondayend" required>
</div>
<div class="col-md-3 form-group">
<label class="font-weight-bold" for="monday2start">Monday [Time 2]: <span style="color: red;">*</span></label>
<input type="time" class="form-control" id="monday2start" name="monday2start">
</div>
<div class="col-md-3 form-group">
<label class="font-weight-bold" for="monday2end"> </label>
<input type="time" class="form-control" id="monday2end" name="maandagtijd2eind">
</div>
</div>
How do I get a form row like that? It kind of works, but the inputs with an empty label are higher than the inputs with label.
Try enclosing the "form-group" in a separate div:
<form>
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label class="font-weight-bold" for="mondaystart">Monday [Time 1]: <span style="color: red;">*</span></label>
<input type="time" class="form-control" id="mondaystart" name="mondaystart" required>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="font-weight-bold" for="mondayend"> </label>
<input type="time" class="form-control" id="mondayend" name="mondayend" required>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="font-weight-bold" for="monday2start">Monday [Time 2]: <span style="color: red;">*</span></label>
<input type="time" class="form-control" id="monday2start" name="monday2start">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label class="font-weight-bold" for="monday2end"> </label>
<input type="time" class="form-control" id="monday2end" name="maandagtijd2eind">
</div>
</div>
</div>
</form>
I have long web form to collect data, I am sharing example but actual form may be even long.
I need to know how can i print the form data in the similar format as user sees it, Simply as if user filled the PDF form and Printed it same so that printed version look as he sees it.
Code pen link https://codepen.io/anon/pen/ewYrwv
I am not sure how to make it work with A4 Page as if data was being printed from PDF form. It doesnt need to be responsive as form will be printed from desktop only..
I put container with at 800 pixel and it still prints out side of page margin.
I tried to play around with CSS http://www.tutorialspoint.com/css/css_paged_media.htm
but this doesnt make help much
.container{max-width:800px;}
#page {
size: 8.5in 11in; /* width height */
margin: 2cm; /* All margins set to 2cm */
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<div class="form-row">
<h1 class="text-center">Form</h1>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">First Name</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="First Name">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Last Name</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Last Name">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Password">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Mobile</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Mobile">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Landline</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Landline">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Start Date</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Start Date">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">End Date</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="End Date">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Time</label>
<input type="password" class="form-control" id="inputPassword4" placeholder="Time">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Venue</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputPassword4">Trainer</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Court</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Recurring
</label>
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1" disabled>
<label class="form-check-label" for="inlineCheckbox1">Sun</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2" disabled>
<label class="form-check-label" for="inlineCheckbox2">Mon</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3" disabled>
<label class="form-check-label" for="inlineCheckbox3">Tue</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="4" disabled>
<label class="form-check-label" for="inlineCheckbox3">Wed</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="5" disabled>
<label class="form-check-label" for="inlineCheckbox3">Thu</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="6" disabled>
<label class="form-check-label" for="inlineCheckbox3">Fri</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="7" disabled>
<label class="form-check-label" for="inlineCheckbox3">Sat</label>
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button> <button type="submit" class="btn btn-primary">PRINT</button>
</form>
</div>
I'm trying to create a registration form. But when I try to run my code, part of it doesn't appear on the screen. I use thymeleaf for work with Spring MVC controllers. I looked Thymeleaf tutorials, stackoverflow, etc... but have not seen any solution.
Please tell me what I do wrong or where I can read about solution of this problem.
Below I put the snippet of my html code.
P.S. Sorry for my English.
<div class="container" id="container-middle">
<form class="form-horizontal" role="form" id="register-form" method="post" th:action="#{/post-user-info}" th:object="${user}">
<h2 id="form-header">Sign up for BlaBla</h2>
<div class="form-group">
<label for="login" class="col-sm-5 control-label">Login:</label>
<div class="col-sm-4">
<input type="text" id="login" placeholder="Login" class="form-control" th:field="*{login}">
</div>
</div>
<div class="form-group">
<label for="first-name" class="col-sm-5 control-label">First name:</label>
<div class="col-sm-4">
<input type="text" id="first-name" placeholder="First name" class="form-control" th:field="*{firstName}">
</div>
</div>
<div class="form-group">
<label for="last-name" class="col-sm-5 control-label">Last name:</label>
<div class="col-sm-4">
<input type="text" id="last-name" placeholder="Last name" class="form-control" th:field="*{lastName}">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-5 control-label">Email:</label>
<div class="col-sm-4">
<input type="email" id="email" placeholder="Email" class="form-control" th:field="*{email}">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-5 control-label">Password:</label>
<div class="col-sm-4">
<input type="password" id="password" placeholder="Password" class="form-control" th:field="*{password}">
</div>
</div>
<div class="form-group">
<label for="birthDate" class="col-sm-5 control-label">Date of birth:</label>
<div class="col-sm-4">
<input type="date" id="birthDate" class="form-control" th:field="*{birthDate}">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-5">Gender:</label>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<label class="radio-inline">
<input type="radio" th:field="*{sex}" th:value="${female}">Female
</label>
<label class="radio-inline">
<input type="radio" th:field="*{sex}" th:value="${male}">Male
</label>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 col-sm-offset-5">
<button type="submit" class="btn btn-primary">Register</button>
</div>
</div>
</form>
</div>
I didn't pass any model from controller to template, so it couldn't put there any result.
That's it! something like ...
public String goAdd(Model model) {
model.addAttribute(new DtoCustomer());
return "customer/edit";
}
I have a form-group with inline radio buttons. The issue is that on larger screens the next text input label is appearing right below it on the right side instead of on a new line on the left side.
I have tried adding line breaks but it didn't help
Code:
<div class="container">
<form role="form">
<div class="form-group">
<div class="col-xs-6">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="col-sm-12">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
<br/>
<button type="submit">Submit</button>
</form>
</div>
JSFiddle Demo
You can wrap every form line into row
<div class="container">
<form role="form">
<div class="row">
<div class="form-group">
<div class="col-xs-6">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
</div>
https://jsfiddle.net/n70kLfnc/
Change divs with class="form-group" into "row form-group"
You can try to use this CSS
.form-group .label { display: block }
But the best way is to envelope col-* always in a row div.
Here's your code rewritten:
<div class="container">
<form role="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<div>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</label>
<label class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
</div>
<button type="submit">Submit</button>
</form>
</div>
here's my draft to your jsfiddle: https://jsfiddle.net/ag9aqjrz/4/
Try this
Replace <br> with <div class="clearfix"></div>
Without using <br> and clearfix you can try this format
<div class="container">
<div class="row">
<form role="form">
<div class="col-xs-6">
<div class="form-group">
<label for="phone">Phone Number:</label>
<input class="form-control" id="phone" placeholder="Enter Phone Number" type="text">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="optionsRadios">Preferred Contact Method</label>
<br>
<div class="radio-inline">
<label for="optionsRadios1">
<input name="optionsRadios" id="optionsRadios1" value="option1" checked="" type="radio">Email</label>
</div>
<div class="radio-inline">
<label for="optionsRadios2">
<input name="optionsRadios" id="optionsRadios2" value="option2" type="radio">Phone</label>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label for="website">Another Text Input:</label>
<input class="form-control" id="website" placeholder="Testing" type="url">
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div class="container">
<form role="form">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="form-group">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
<div class="col-xs-12">
<button type="submit">Submit</button>
</div>
</div>
</form>
</div>
Reverse the order from
<div class="form-group">
<div class="col-sm-12">
to
<div class="col-sm-12">
<div class="form-group">
instead of use for phone number as well as Preferred Contact Method
Phone Number:
<div class="col-sm-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
Well, the problem is with column structure, as you are mixing "col-sm-x" with "col-xs-x", you should use one of them or both, so the correct version with xs is as follows
<div class="container">
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-xs-6">
<label for="phone">Phone Number:</label>
<input type="text" class="form-control" id="phone" placeholder="Enter Phone Number">
</div>
<div class="col-xs-6">
<label for="optionsRadios">Preferred Contact Method</label>
<br />
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Email
</div>
<div class="radio-inline">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">Phone
</div>
</div>
</div>
<br />
<div class="form-group">
<div class="col-xs-12">
<label for="website">Another Text Input:</label>
<input type="url" class="form-control" id="website" placeholder="Testing">
</div>
</div>
<br />
<button type="submit">Submit</button>
</form>
</div>
I was gold-plating the signup page by adding labels above each field when suddenly:
It worked fine but not with radio buttons. I'm relying on Bootstrap 3 and I think this can be solved without extra CSS but just with right nesting of Bootstrap classes. Right?
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-3">
<label for="input-password">Password:</label>
<input name="password" type="password" class="form-control" id="input-password" placeholder="Password" required="required" />
</div>
<div class="col-sm-3">
<label for="input-confirm-password">Confirm Password:</label>
<input name="confirm_password" id="input-confirm-password" type="password" class="form-control" placeholder="Confirm Password" required="required" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label for="input-address">Address:</label>
<input name="address" id="input-address" type="text" class="form-control" placeholder="Address" />
</div>
</div>
<label class="row">Gender:</label>
<div class="form-group">
<div class="col-sm-3">
<label class="radio-inline">
<input name="gender" id="input-gender-male" value="Male" type="radio" />Male
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input name="gender" id="input-gender-female" value="Female" type="radio" />Female
</label>
</div>
</div>
<div class="form-group">
<label>Account Type:</label>
<div class="col-sm-3">
<label class="radio-inline">
<input name="account_type" id="input-type-student" value="Student" type="radio" />Student
</label>
</div>
<div class="col-sm-3">
<label class="radio-inline">
<input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
</label>
</div>
</div>
</form>
I tried 2 different placement of the elements to resolve this issue as you can see but it didn't work.
I even tried putting a div around each set of the radio buttons and then gave a label for it but that didn't work either.
You can do it this way:
<div class="form-group">
<div class="col-sm-6">
<label for="input-type">Account Type *:</label>
<div id="input-type" class="row">
<div class="col-sm-6">
<label class="radio-inline">
<input name="account_type" id="input-type-student" value="Student" type="radio" />Student
</label>
</div>
<div class="col-sm-6">
<label class="radio-inline">
<input name="account_type" id="input-type-tutor" value="Tutor" type="radio" />Tutor
</label>
</div>
</div
</div>
</div>
Do the same for the other radio buttons group.
Explanation: The col-sm-6 of the outer div is now 100% and can be divided 50:50 by col-sm-6 and col-sm-6