I've a simple row where there's a label and two input type number
<form class="form-horizontal">
<br>
<div class="container">
<label class="col-sm-2 control-label">Numero documento:</label>
<div class="col-sm-3">
<input type="number" id="firstDocumentNumber" class="form-control">
</div>
<div class="col-sm-1">
<input type="number" id="secondDocumentNumber" class="form-control">
</div>
</div>
</form>
I need to insert a slash ( / ) between the two input type like this
Can anyone help me, please? Here there's the code I use Bootply
Thanks in advance
Simplest way I found is with CSS (tried with Bootstrap 4):
<div class="col-sm-1" id="secondDocumentNumberCont">
<input type="number" id="secondDocumentNumber" class="form-control">
</div>
#secondDocumentNumberCont:before {
content: '/';
position: absolute;
margin-left: -8px;
line-height: 2.3em;
}
margin-left & line-height might require some tuning.
You shuold use a span and format with size and align how you prefer..
<div class="site-index">
<div class="body-content">
<form class="form-horizontal">
<br>
<div class="container">
<label class="col-sm-2 control-label">Numero documento:</label>
<div class="col-sm-3">
<input type="number" id="firstDocumentNumber" class="form-control">
</div>
<span class="col-sm-1 text-right" > / </span>
<div class="col-sm-1">
<input type="number" id="secondDocumentNumber" class="form-control">
</div>
</div>
</form>
or use an add-on
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">/</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
Related
I have html code which allows a user to select a percentage with an input type range. This is the code I am using:
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<label for="beneName">Name</label>
<input class="form-control form-control-sm" type="text" name="beneName" id="beneName" placeholder="#Model.BeneficiaryUpdateData[r].beneName" required="">
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="beneAddressLine1">Address Line 1</label>
<input class="form-control" type="text" name="beneAddressLine1" id="beneAddressLine1" placeholder="#Model.BeneficiaryUpdateData[r].beneAddressLine1" required="">
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="beneAddressLine2">Address Line 2</label>
<input class="form-control" type="text" name="beneAddressLine2" id="beneAddressLine2" placeholder="#Model.BeneficiaryUpdateData[r].beneAddressLine2" required="">
</div>
</div>
<div class="row">
<div class="col-md-12">
<label for="beneAddressLine3">Address Line 3</label>
<input class="form-control" type="text" name="beneAddressLine3" id="beneAddressLine3" placeholder="#Model.BeneficiaryUpdateData[r].beneAddressLine3" required="">
</div>
</div>
<div class="row">
<div class="col-md-6">
<label for="beneSSN">Social Security Number</label>
<input class="form-control" type="text" name="beneSSN" id="beneSSN" placeholder="#Model.BeneficiaryUpdateData[r].beneSSN" required="">
</div>
<div class="col-mid-6">
<div class="form-group">
<label for="benePercent" class="form-label">Percentage</label>
<input type="range" name="benePercent" id="benePercent" class="percentAlign" value="#Model.BeneficiaryUpdateData[r].benePctInt" min="0" max="100" oninput="this.nextElementSibling.value = this.value">
<output class="percentAlign">#Model.BeneficiaryUpdateData[r].benePctInt</output>
</div>
</div>
</div>
And this is the css for percentAlign:
.percentAlign {
display: inline-block;
vertical-align: middle;
}
And this is what gets generated:
I dont understand why the percent value displays below the slider and not next to it.
Any assistance is greatly appreciated.
Thank you.
First edit: A slight change suggested by Drexx_Dusan. Now, the slider reaches to the end of the <DIV> but the <OUTPUT> is still displaying underneath the slider, not next to it.
It doesn't work because you have col-mid-6 instead of col-md-6, in the div above last form group.
I am new and learning front end.
I created a simple form contains 4 fields. how to align all these in line equally divided?
below is my code written on HTML along with the output what i see:
<div>
<form>
<div class="form-inline">
<div class="col-sm-6">
<label>Name: </label>
<input type="text" class="form-control" >
</div>
<div class="col-sm-6">
<label>Email: </label>
<input type="text" class="form-control" >
</div>
<br>
<br>
<div class="col-sm-6">
<label>Phone #: </label>
<input type="text" class="form-control" >
</div>
<div class="col-sm-6">
<label>Education Qualificiation: </label>
<input type="text" class="form-control" >
</div>
</div>
</form>
</div>
Output above code
You can do something like this:
fiddle to validate
.lblClass {
width: 50%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div>
<form>
<div class="form-inline d-flex">
<div class="col-sm-6 d-flex">
<label class="lblClass">Name: </label>
<input type="text" class="form-control">
</div>
<div class="col-sm-6 d-flex">
<label class="lblClass">Email: </label>
<input type="text" class="form-control">
</div>
<br>
<br>
<div class="col-sm-6 d-flex">
<label class="lblClass">Phone #: </label>
<input type="text" class="form-control">
</div>
<div class="col-sm-6 d-flex">
<label class="lblClass">Education Qualificiation: </label>
<input type="text" class="form-control">
</div>
</div>
</form>
</div>
There are lots of ways to align element. But here you are uses bootstrap and bootstrap have predefined classes for align element. You want to align elements in the form so bootstrap have Form-group, form control class for your all. Problems
Visit this link for more info
https://getbootstrap.com/docs/4.3/components/forms/
I use horizontal form and custom errors:
<div class="form-horizontal">
<form name="ctrl.myForm" ng-submit="ctrl.save()">
<div class="form-group col-sm-12 text-center">
<color-picker selected="ctrl.selectedColor"></color-picker>
</div>
<div class="form-group has-error">
<label for="logName" class="col-sm-3 control-label">Log Name</label>
<div class="col-sm-9">
<label ng-show="ctrl.logNameHasError" class="control-label" for="logName">
<i class="fa fa-times-circle-o"></i> Input with error
</label>
<input type="text" ng-model="ctrl.logName" class="form-control" id="logName"
placeholder="Enter a new log name" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="ctrl.isDailyDigestEmail"> Daily Digest Email
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-3 col-sm-9">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="ctrl.isNewErrorEmail"> New Error Email
</label>
</div>
</div>
</div>
</form>
Open DEMO please and you will see that Log Name field has wrong alignment. How to center it?
Make output window in JSBIN as 768px minimum to see what I mean.
Use can add css when .has-error class is exists:
.form-group.has-error .col-sm-3.control-label {
padding-top: 34px;
}
I'm building a form using Bootstrap in which I need to place many inputs on one line like if it where a Spreadsheet. So using the regular Bootstrap grid system I did this (snippet):
<div class="col-sm-1">
<div class="form-group">
<textarea placeholder="Description" class="form-control" rows="1" required></textarea>
</div>
</div>
<div class="col-sm-1">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
<div class="col-sm-1">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
etc.
which results in:
Obviously that looks horrible. For this specific form I need to place the inputs closer to eachother so that they (almost) touch eachother.
Does anybody know how I can style this better? All tips are welcome!
You could override the padding on the col-sm-* with a class like this
.inputItem {
padding-left: 2px;
padding-right: 2px;
}
This might be useful.
You can adjust your column padding by media queries in the event you want the form to stack on smaller devices so the padding returns to normal.
#media (min-width: 768px) {
form .form-gutter >[class*='col-'] {
padding-right: 1px;
padding-left: 1px;
}
}
form .form-control,
form .input-group-addon {
border-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<form class="form">
<div class="container-fluid">
<h1>Form </h1>
<div class="row form-gutter">
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<input placeholder="Contract rental" class="form-control" type="text">
<div class="input-group-addon">€</div>
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">Some</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">Thing</label>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<input placeholder="Remaining contract term" class="form-control" type="text">
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">€</div>
<input placeholder="Contract rental" class="form-control" type="text">
</div>
</div>
</div>
</div>
</div>
</form>
I want to align 2 input groups, one with span 8 & other with 4 next to each other. I used form inline but it doesn't take the intended width.
<div class="form-inline">
<div class="form-group">
<!-- <div class="input-group"> -->
<input type="text" class="form-control col-sm-8" placeholder="Username">
<!-- </div> -->
</div>
<div class="form-group">
<!-- <div class="input-group"> -->
<input type="text" class="form-control col-sm-4" placeholder="Ref No.">
</div>
</div>
try the following css
.form-group{
float:left;
}
After playing around i found this solution:
HTML
<div class="row form-input">
<div class="col-sm-8">
<input type="text" class="form-control" placeholder="Username">
</div>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="ref no.">
</div>
</div>
<div class="row form-input">
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Monthly Rent">
</div>
<div class="col-sm-6">
<input type="text" class="form-control" placeholder="Deposit">
</div>
</div>
CSS
.form-input, .form-input input{
margin-top: 10px;
}