I'm trying to inline input and checkbox using Bootstrap
My code is:
<!-- Bootstrap-3.4.1 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!-- Body -->
<form class="form " style=" width:250px; height:250px;">
<div class="form-group">
<input class="form-control " id="mawbNoCheck" type="checkbox" style="height: 34px;width:20px;">
<label style="width:100%;"> <input class="form-control" maxlength="50" id="txtMawb" placeholder="MAWB No" type="text" disabled /></label>
</div>
<div class="form-group">
<input class="form-control" id="collectionDatecheck" type="checkbox" style="height: 34px;width:20px;">
<label style="width:100%;"><input class="form-control date-picker" id="txtCollectionDate" maxlength="50" placeholder="Toplama Tarihi" type="text" disabled /></label>
</div>
<div class="form-group">
<input class="form-control " id="manifestDateCheck" type="checkbox" style="height: 34px;width:20px;">
<label style="width:100%;"><input class="form-control date-picker" id="txtManifestDate" maxlength="50" placeholder="Manifesto Tarihi" type="text" disabled /></label>
</div>
<div class="form-group ">
<a class="btn btn-success">Güncelle</a>
</div>
</form>
But it looks like this:
Just set display:inline-flex !important;
<style>
form div.form-group{
display:inline-flex !important;
}
</style>
.form-group {
position: relative;
}
label {
position: absolute;
top: 0;
left: 35px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<form class="form " style=" width:250px; height:250px;">
<div class="form-group">
<input class="form-control " id="mawbNoCheck" type="checkbox" style="height: 34px;width:20px;">
<label style="width:100%;"> <input class="form-control" maxlength="50" id="txtMawb" placeholder="MAWB No" type="text" disabled /></label>
</div>
<div class="form-group">
<input class="form-control" id="collectionDatecheck" type="checkbox" style="height: 34px;width:20px;">
<label style="width:100%;"><input class="form-control date-picker" id="txtCollectionDate" maxlength="50" placeholder="Toplama Tarihi" type="text" disabled /></label>
</div>
<div class="form-group">
Related
I am working on a personal project, and I need to make some changes to my current form but I cannot get it working so far.
I need the label and input to be inline. Here is a screenshot how the form should look like.
And here is my current code:
.personal_details {
max-width: 503px;
float: none;
margin: 0 auto;
padding: 40px;
border-radius: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="personal_details">
<form class="personal_details">
<div class="form-group">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="inputFirstName" />
</div>
<div class="form-group">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="inputLastName" />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" id="inputEmail" />
</div>
<div class="form-group">
<label for="phone_nummber">Account type</label>
<select class="form-control" name="profile_type">
<option value="Basic" selected>Freelancer</option>
<option value="Company">Employer</option>
</select>
</div>
<button class="btn btn-primary mt-4 px-5" type="submit">EDIT</button>
</form> <!-- Form ends here -->
</div>
How to make multiple text fields in the same line.
This is my code:
<div class="col-lg-2">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control " placeholder="Year"/>Year
<input type="text" class="form-control " placeholder="Month"/>Month
<input type="text" class="form-control " placeholder="Day" />Day
</div>
</div>
It's by default. input is inline element.
<div class="col-lg-2">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control " placeholder="Year" />Year
<input type="text" class="form-control " placeholder="Month" />Month
<input type="text" class="form-control " placeholder="Day"
Day
</div>
</div>
In bootstrap you can put all of the fields that you want on a single line within a single form-group
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label for="birthday" class="col-xs-3 col-sm-2 control-label">Birthday</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="year"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="month"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="day"/>
</div>
</div>
It seems, you are using Bootstrap, if yes, then;
Add class .form-inline to the <form> element.
else, Add these css properties to <form>,
display: inline-block;
width: auto;
You can try this way too.
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="col-lg-2">
<div class="form-group" >
<label style="width:25%; float:left;">Working experience</label>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Year"/>Year
</div>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Month"/>Month
</div>
<div style="width:25%; float:left;">
<input type="text" class="form-control " placeholder="Day"/>Day
</div>
</div>
</div>
</body>
</html>
Use Bootstrap:
<form class="form-inline" action="/action_page.php">
<label>Working experience : </label>
<div class="form-group">
<input type="text" class="form-control" id="year" placeholder="Year" name="year">
</div>
<div class="form-group">
<input type="text" class="form-control" id="month" placeholder="Month" name="month">
</div>
<div class="form-group">
<input type="text" class="form-control" id="day" placeholder="Day" name="day">
</div>
</form>
You could use inline form class.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form class="form-inline">
<div class="form-group">
<label>Working experience</label>
<input type="text" class="form-control" placeholder="Year">
<input type="text" class="form-control" placeholder="Month">
<input type="text" class="form-control " placeholder="Day">
</div>
</form>
Use Expand snippet to see actual result.
Hi I've had a look all around google and SO cant seem to find a solution for this.
What i'm trying to do is align an input-group with all my other form-groups. Every time i use an input-group it adds like a padding to it.
I've tried almost every answer I've found on here:
padding:0px !important;
margin:0px !important;
float: left !important;
Nothing seems to work!
Code:
<div class="col-md-6">
<div class="form-group">
<input id="est_mileage" name="est_mileage" type="text" placeholder="Estimated Mileage" autocomplete="off" class="form-control input-md"/>
</div>
<!--Padding Issue is Here-->
<div class="input-group" style="padding:0px !important; margin:0px !important; float:left; width:100%;">
<span class="input-group-addon" style="width: 45px;">
<input value="1" type="checkbox" id="combinedSelector" name="one_off" />
</span>
<input id="acc_mileage" name="acc_mileage" type="text" placeholder="Actual Mileage" autocomplete="off" class="form-control"/>
</div>
<!--End Issue-->
<div class="form-group">
<input id="fuel" name="fuel" type="text" placeholder="Fuel(ltrs)" autocomplete="off" class="form-control input-md"/>
</div>
<div class="form-group">
<input id="price" name="price" type="text" placeholder="Price" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="cwt_dwt" name="cwt_dwt" type="text" placeholder="CWT & DWT" autocomplete="off" class="form-control input-md" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input id="def_ser_num" name="def_ser_num" type="text" placeholder="Defect Serial Number" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input required id="product_volume" name="product_volume" type="text" placeholder="Product Volume" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="ref_po" name="ref_po" type="text" placeholder="Ref/PO" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="comments" name="comments" type="text" placeholder="Job Specifics" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="billing_com" name="billing_com" type="text" placeholder="Billing Info" autocomplete="off" class="form-control input-md" />
</div>
<div class="form-group">
<input id="iss_rep" name="iss_rep" type="text" placeholder="Issues/Repairs" autocomplete="off" class="form-control input-md" />
</div>
</div>
This form is nested in a collapse div and is in a modal view.
This is the result:
You have to add the class form-group to div with input-group class and remove the styles: padding:0px !important; margin:0px !important; float:left;
and this will make it similar to the other form groups
See Demo Here
I am trying to position my form box. To see where I was going I just made some inline style. It is also looking like I want on the desktop version, but when I see it on mobile version the form box is out of the picture.
If I made the Inline CSS in an external stylesheet, and made a Mediaquery, it would not be the correct way to do it, would it? For me it seems like bad practice?
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-12" style="width:25%; top: 70px; left: 1000px;">
#Umbraco.RenderMacro("Ebook")
</div>
</div>
</div>
<div class="sign-up">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
Here's an example with the form floating to the right for larger screens, and showing full-width for smaller screens.
.floating-form {
background: #eee;
float: right;
padding: 20px 0;
width: 320px;
}
#media (max-width: 479px) {
.floating-form {
float: none;
width: auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="floating-form">
<div class="container-fluid">
<div class="row">
<div class="sign-up col-xs-12">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
</div>
<!-- Content -->
<div class="container-fluid">
<div class="row">
<div class="col-xs-6 col-md-6 col-lg-6">
#Umbraco.RenderMacro("Ebook")
</div>
<div class="sign-up col-xs-6 col-md-6 col-lg-6">
<form id="ebog-trin-for-trin">
<div class="form-group">
<label class="sr-only" for="name">Navn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Navn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="lastname">Efternavn</label>
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Efternavn" required/>
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Telefonnummer" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomhed</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required/>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<button type="submit" class="btn btn-default active">Hent E-bogen</button>
</form>
</div>
</div>
</div>
Fiddle
This Will Useful for you..
I'm not sure how to go about getting the effect I want here. I have two input boxes that are on the same line and I want to have labels underneath them and aligned to match the respective input box.
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<label for="decimal_input">Label 1</label>
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
= <label for="input2">Label 2</label>
<input type="text" value="I" width="30" id="input2" class="form-control" />
</div>
</div>
</form>
Take a look at the jsfiddle here for more info:
http://jsfiddle.net/justinhj/bTVKZ/2/
http://jsfiddle.net/isherwood/bTVKZ/6
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<div class="pull-left">
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
<br />
<label for="decimal_input">Label 1</label>
</div>
<div>
<input type="text" value="I" width="30" id="input2" class="form-control" />
<br />
<label for="input2">Label 2</label>
</div>
</div>
</form>
</div>
Your new HTML:
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<span class="inner-container">
<label for="decimal_input">Label 1</label>
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
</span>
=
<span class="inner-container">
<label for="input2">Label 2</label>
<input type="text" value="I" width="30" id="input2" class="form-control" />
</span>
</div>
</div>
</form>
</diV>
Your new CSS (of course I would add a class to the labels):
.container {
margin-top: 10px;
}
.inner-container {
position: relative;
}
label {
top: 25px;
left: 5px;
position: absolute;
}
here's the fiddle
You may try this
Extra CSS:
label {
display:block;
}
.form-group {
display:inline-block;
}
Modified HTML:
<div class="container">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" value="1" width="10" id="decimal_input" class="form-control" />
<label for="decimal_input">Label 1</label>
</div>
<div class="form-group">
<input type="text" value="I" width="30" id="input2" class="form-control" />
<label for="input2">Label 2</label>
</div>
</form>
</div>
DEMO.