How to get form-control to extend across fieldset? - html

I am having a hard time figuring out how to figure out how to make my contact form-control match the edge of my Work form-control. I'm still new with Bootstrap and not sure what I am doing wrong or how to fix the issue. I need my Contact and Email form-control to go all the way to the edge of my Work form-control.
Here is a screen to better explain. As you can see my layout is off in the Contact fieldset
Here is my markup
<div class="col-md-12">
<div class="col-lg-6">
<form>
<fieldset>
<legend>Add Customer</legend>
<div class="form-horizontal">
<div class="container col-md-12">
<div class="form-group">
<label for="txtCustomer" class="control-label col-md-2">Customer</label>
<div class="col-md-10">
<input id="txtCustomer" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtAddress1" class="control-label col-md-2">Address</label>
<div class="col-md-10">
<input id="txtAddress1" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtAddress2" class="control-label col-md-2">Address2</label>
<div class="col-md-10">
<input id="txtAddress2" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtCity" class="control-label col-md-2">City</label>
<div class="col-md-10">
<input id="txtCity" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtState" class="control-label col-md-2">State</label>
<div class="col-md-2">
<input id="txtState" type="text" class="form-control" />
</div>
<label for="txtZip" class="control-label col-md-2">Zip/Postal</label>
<div class="col-md-3">
<input id="txtZip" type="text" class="form-control" />
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-lg-6">
<div class="form-horizontal">
<div class="container col-md-12">
<form>
<fieldset>
<legend>Contact</legend>
<div class="form-group">
<label for="txtContactName" class="control-label col-md-2">Contact</label>
<div class="col-md-10 RemovingPadding">
<input id="txtContactName" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtEmail" class="control-label col-md-2">Email</label>
<div class="col-md-10">
<input id="txtEmail" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtPhone" class="control-label col-md-2">Phone</label>
<div class="col-md-4">
<input id="txtPhone" type="text" class="form-control" />
</div>
<label for="txtWork" class="control-label col-md-2">Work</label>
<div class="col-md-4">
<input id="txtWork" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtMobile" class="control-label col-md-2">Mobile</label>
<div class="col-md-4">
<input id="txtMobile" type="text" class="form-control" />
</div>
<label for="txtFax" class="control-label col-md-2">Fax</label>
<div class="col-md-4">
<input id="txtFax" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtOther" class="control-label col-md-2">Other</label>
<div class="col-md-4">
<input id="txtOther" type="text" class="form-control" />
</div>
<label for="txtOther2" class="control-label col-md-2">Other 2</label>
<div class="col-md-4">
<input id="txtOther2" type="text" class="form-control" />
</div>
</div>
<div class="form-group">
<label for="txtOther3" class="control-label col-md-2">Other 3</label>
<div class="col-md-4">
<input id="txtOther3" type="text" class="form-control" />
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>

Related

Try to make horizontal bootstrap form with three column

I am trying to make horizontal form with three field but I am facing space issue between label and input type.
I want to reduce space between label and input.
HTML code:
<div class="container-fluid">
<form class="row">
<div class="col-md-12">
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">Last Name</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<label for="inputValue" class="col-md-2 control-label">First Name</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
<label for="inputValue" class="col-md-2 control-label">First Name</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-md-2 control-label">State</label>
<div class="col-md-2">
<input type="text" class="form-control" id="inputSt" placeholder="ST">
</div>
<div class="col-md-2">
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
<label for="inputValue" class="col-md-2 control-label">Other</label>
<div class="col-md-4">
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
</div>
</div>
You just need to remove the col-sm-2 in your label. You can also check the my code below, it could save more space.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container-fluid">
<form class="row">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-4">
<label for="inputKey" class=" control-label">Last Name</label>
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<div class="col-md-4">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
<div class="col-md-4">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
<div class="form-group row">
<div class="col-md-2">
<label for="inputKey" class=" control-label">State</label>
<input type="text" class="form-control" id="inputSt" placeholder="ST">
</div>
<div class="col-md-2">
<label for="inputKey" class="control-label">zip</label>
<input type="text" class="form-control" id="inputZip" placeholder="Zip">
</div>
<div class="col-md-4">
<label for="inputValue" class=" control-label">Other</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
</div>
</div>
<hr>
<h3>Or remove the col-sm for labels.</h3>
<div class="container-fluid">
<form >
<div class="col-md-12">
<div class="form-group row">
<label for="inputPassword" class="col-form-label">Last Name</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<label for="inputPassword" class="col-form-label">Last Name</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
<label for="inputPassword" class="col-form-label">Last Name</label>
<div class="col-sm-3">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</div>
</form>
</div>
</div>
Open the snippet in full page.
Just put label and input in same column that is in my case col-md-4 and give it a class like columns. and
.columns {
display: flex;
flex-direction: row;
}
label {
width: 6rem;
margin-right: 2rem;
}
<div class="container-fluid">
<form class="row">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-4 columns">
<label for="inputKey" class="control-label">Last Name</label>
<input type="text" class="form-control" id="inputKey" placeholder="Key">
</div>
<div class="col-md-4 columns">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
<div class="col-md-4 columns">
<label for="inputValue" class="control-label">First Name</label>
<input type="text" class="form-control" id="inputValue" placeholder="Value">
</div>
</div>
</div>
</form>
</div>

form element alignment problem with bootstrap 3

I am using bootstrap 3 for my form design. i am using below structure.
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Age</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Class</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">School</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Subject</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Grade</label>
<div class="col-sm-9">
<input type="text" class="form-control"/>
</div>
</div>
</div>
<div class="col-md-6" id="monthData">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Monthly Amount</label>
<div class="col-sm-5">
<input type="text" class="form-control"/>
</div>
<div class="col-sm-4">
<input type="text" size="9" class="form-control" placeholder="No.of months">
</div>
</div>
</div>
</div>
This layout is working well. But problem is, sometimes i need to hide "monthData" division. When i hide it, there is a empty space right side of the row. how i avoid this.
As a solution i tried to change my layout as below.
<div class="row">
<div class="col-md-6">
form elements
</div>
<div class="col-md-6">
form elements
</div>
</div>
According to my solution, empty space issue is fixed. But Tab index is going up to down. but i need to left to right.
Can you help me to solve these issues. any one know better structure??
Add the tabindex attribute to the input with value in the required sequence.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="1">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Age</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="3" />
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Class</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="2" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">School</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="4" />
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Subject</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="5" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Grade</label>
<div class="col-sm-9">
<input type="text" class="form-control" tabindex="9" />
</div>
</div>
</div>
<div class="col-md-6" id="monthData">
<div class="form-group">
<label class="col-sm-3 control-label" for="concept">Monthly Amount</label>
<div class="col-sm-5">
<input type="text" class="form-control" tabindex="6" />
</div>
<div class="col-sm-4">
<input type="text" size="9" class="form-control" placeholder="No.of months" tabindex="7">
</div>
</div>
</div>
</div>

How to right align horizontal form

Hi can someone help me with aligh this form to the right, i give it a try(stupid one but why not to try) and set form-horizontal margin-left: some px; and it did move form but it resize input. I want to align it to a specific place.
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="inputIme" class="col-sm-2 control-label">Ime</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Ime">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">E-mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="E-mail">
</div>
</div>
<div class="form-group">
<label for="inputTelefon" class="col-sm-2 control-label">Telefon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Broj Telefona">
</div>
</div>
<div class="form-group">
<label for="inputAdresa" class="col-sm-2 control-label">Adresa</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Vasa Adresa">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Posalji zahtev</button>
</div>
</div>
</form>
</div>
<div class="col-sm-6 offset-sm-6">
<form class="form-horizontal">
<div class="form-group">
<label for="inputIme" class="col-sm-2 control-label">Ime</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Ime">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-sm-2 control-label">E-mail</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="E-mail">
</div>
</div>
<div class="form-group">
<label for="inputTelefon" class="col-sm-2 control-label">Telefon</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Broj Telefona">
</div>
</div>
<div class="form-group">
<label for="inputAdresa" class="col-sm-2 control-label">Adresa</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPassword3" placeholder="Vasa Adresa">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Posalji zahtev</button>
</div>
</div>
</form>
</div>
although your question is not clear to but I guess you need to shift your form at right side so you can use above code

Part of html with thymeleaf not displayed

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";
}

Bootstrap Form group

I want this kind of a setup as in the below screenshot.
But currently with the code that I have written, I am getting the below output. I tried various options but unable to get the same output as above.
My current HTML Code:
<form role="form" class="form-horizontal">
<div class="form-group">
<label style="" for="inputPackageName" class="col-sm-2 control-label">Package Name
</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputPackageName" placeholder="Package Name">
</div>
<label style="" for="inputApplicationName" class="col-sm-2 control-label">Application
Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputApplicationName"
placeholder="Package Name">
</div>
</div>
</form>
Any idea as to how to get the required layout as in screenshot. Also how to utilize the white space effectively. i.e. Some labels might require more space, some might require less space. How to have the consistency in bootstrap?
Just don't give the class col-sm-2 (in your case) to the labels.
Try to use this layout for the input fields:
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
This will render a row with 2 columns. To add more rows just copy the layout
Try this:
`.
< div class="col-sm-6">
...
< div class="col-sm-6">
...
<div class="col-md-12">
< div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
</div>
<div class="col-md-12">
< div class="col-md-12">
<div class="form-group">
<label>...</label>
<input class="form-control" .../>
</div>
</div>
</div>
`
This should give you what you want (as long as you don't have other CSS rules that could override Bootstrap):
<form class="form-horizontal">
<div class="form-group">
<label for="inputProjectId" class="col-sm-2 control-label">Project ID</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputProjectId" placeholder="Project ID">
</div>
<label for="inputProjectName" class="col-sm-2 control-label">Project Name</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputProjectName" placeholder="Project Name">
</div>
</div>
<div class="form-group">
<label for="inputReleaseDate" class="col-sm-2 control-label">Release Date</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputReleaseDate" placeholder="Release Date (mm/dd/yyyy)">
</div>
<label for="inputSupervisor" class="col-sm-2 control-label">Supervisor</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="inputSupervisor" placeholder="Supervisor">
</div>
</div>
<div class="form-group">
<label for="inputProjectDescriptiond" class="col-sm-2 control-label">Project Description</label>
<div class="col-sm-10">
<textarea class="form-control" id="inputProjectDescriptiond" rows="3" placeholder="Enter Project Description"></textarea>
</div>
</div>
</form>
Just paste this code:
<form role="form" class="form-horizontal">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputProjectID" class="col-sm-4 control-label">Project ID</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputProjectID" placeholder="Project ID">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputProjectName" class="col-sm-4 control-label">Project Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputProjectName"
placeholder="Project Name">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="inputReleaseDate" class="col-sm-4 control-label">Release Date</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputReleaseDate" placeholder="Release Date (mm/dd/yyyy)">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="inputSupervisor" class="col-sm-4 control-label">Supervisor</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="inputSupervisor" placeholder="Supervisor">
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label for="inputProjectDescription" class="col-sm-2 control-label">Project Description</label>
<div class="col-sm-10">
<textarea class="form-control" id="inputProjectDescription" rows="3" placeholder="Enter Project Description"></textarea>
</div>
</div>
</div>
</form>
Hope this will help you!!
Finally got a better & easy implementation the same way I wanted.Below is the code!
<form class="form-horizontal" id="main-form" role="form" data- toggle="validator" action="blank.html" method="post">
<!-- Text input-->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectID">Project ID </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectID" name="inputProjectID" type="text" placeholder="Your Project ID" class="form-control input-md">
</div>
<label class="col-md-2 control-label" for="inputProjectName">Project Name </label>
<div class="col-md-3 col-3-input">
<input id="inputProjectName" name="inputProjectName" type="text" placeholder="Your Project Name" class="form-control input-md">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<div class="group">
<label class="col-md-2 control-label" for="datepicker">Release Date </label>
<div class="col-md-3 col-3-input">
<input id="datepicker" name="inputReleaseDate" type="text" placeholder="Select Release Date" class="form-control input-md">
</div>
</div>
<div class="group">
<label class="col-md-2 control-label" for="inputSupervisor">Supervisor </label>
<div class="col-md-3 col-3-input">
<input id="textinput" name="textinput" type="text" placeholder="Your Supervisor's Name" class="form-control input-md">
</div>
</div>
</div>
<!-- Text area -->
<div class="form-group">
<label class="col-md-2 control-label" for="inputProjectDesc">Project Description </label>
<div class="col-md-9 col-9-input">
<textarea style="resize: none;" rows="3" class="form-control" id="inputProjectDesc" name="inputProjectDesc" placeholder="Your Project Description"></textarea>
</div>
</div>
</form>