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;
}
Related
I need to make my form look like "Title over the checkbox and text on the right side" and etc. It's like a list of settings
But I can't display it properly
Here is my code
<div class="modal-body">
<form>
<div class="col-md-12">
<div class="form-group col-md-6" style="display: inline-block">
<label for="defaultG">To default view </label>
<input class="form-control" type="checkbox" value="Default" id="defaultG">
</div>
<div class="form-group col-md-6" style="display: inline-block">
<p>Auto generated style due to common stylish rules.</p>
</div>
</div>
<div class="form-group">
<label for="extendedG">To extended view</label>
<input class="form-control" type="checkbox" value="Extended" id="extendedG">
</div>
<div class="form-group">
<label for="CompactG">To Compact view</label>
<input class="form-control" type="checkbox" value="Compact" id="CompactG">
</div>
<div class="form-group">
<label for="extendedBracketsG">Left stady view</label>
<input class="form-control" type="checkbox" value="ExtendedBrackets" id="extendedBracketsG">
</div>
<div class="form-group">
<label for="BeforeG">Comas before</label>
<input class="form-control" type="checkbox" value="Before" id="BeforeG">
</div>
<div class="form-group">
<label for="AfterG">Comas after</label>
<input class="form-control" type="checkbox" value="After" id="AfterG">
<div class="form-group">
<label for="setTrimsAfterDotKomaG">Set trims after ;</label>
<input class="form-control" type="checkbox" value="SetTrimsAfterDotKoma" id="setTrimsAfterDotKomaG">
</div>
<div class="form-group">
<label for="setTrimsBeforeDotKomaG">Set trims before ;</label>
<input class="form-control" type="checkbox" value="SetTrimsBeforeDotKoma" id="setTrimsBeforeDotKomaG">
</div>
<div class="form-group">
<label for="removeTrimsG">Remove trims</label>
<input class="form-control" type="checkbox" value="RemoveTrims" id="removeTrimsG">
</div>
<div class="form-group">
<label for="removeEmptyLinesG">Remove empty lines</label>
<input class="form-control" type="checkbox" value="RemoveEmptyLines" id="removeEmptyLinesG">
</div>
<div class="form-group">
<label for="allVarsUpperCaseG">All variables upper case</label>
<input class="form-control" type="checkbox" value="VarsUpper" id="allVarsUpperCaseG">
</div>
<div class="form-group">
<label for="allVarsLowerCaseG">All variables lower case</label>
<input class="form-control" type="checkbox" value="VarsLower" id="allVarsLowerCaseG">
</div>
<div class="form-group">
<label for="varsUnderscoredG">All variables underscored</label>
<input class="form-control" type="checkbox" value="VarsUnderscored" id="varsUnderscoredG">
</div>
<div class="form-group">
<label for="toExtendedViewG">All variables to extended view</label>
<input class="form-control" type="checkbox" value="ExtendedView" id="toExtendedViewG">
</div>
<div class="form-group">
<label for="removeUnusedVarsG">Remove unused vars</label>
<input class="form-control" type="checkbox" value="removeUnusedVars" id="removeUnusedVarsG">
</div>
</div>
</form>
And I get this https://ibb.co/cqTqaT
I have no idea what the hell is going on with this. Help please!
Thanks!
At first you should check your HTML Structure and used classes.
An example, your following code:
<div class="col-md-12">
<div class="form-group col-md-6" style="display: inline-block">
<label for="defaultG">To default view </label>
<input class="form-control" type="checkbox" value="Default" id="defaultG">
</div>
<div class="form-group col-md-6" style="display: inline-block">
<p>Auto generated style due to common stylish rules.</p>
</div>
</div>
creates a div with two divs inside, which take both 50% width. In the first div with there is the label and also the checkbox. In the second div, there is the text you would like to have beside the checkbox. But this isn't working with your markup.
Better would be the following markup:
<div class="col-md-12">
<div class="form-group">
<label for="defaultG">To default view </label>
<input class="form-control" type="checkbox" value="Default" id="defaultG">
<p>Auto generated style due to common stylish rules.</p>
</div>
</div>
As you can see, I removed the two div's and used only one form-group. With the following simple CSS:
label{
display: block;
}
p {
display: inline-block;
}
You should get the wanted result.
A bit of a beginner's question, I am trying to make my form to look like the following image where the text on the left are vertically aligned and the input field has the same widths.
twitter form
<div class="container">
<div class="row">
<div class="col-md-6">
<label class="d-inline">Full Name: </label>
<input type="text" placeholder="First Name" formControlName="firstName">
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6">
<label class="d-inline">Email: </label>
<input type="email" placeholder="Email" formControlName="email">
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
</div>
Which gives me the following result. I also want the input to stretch to the remaining parent container so that it stops before the "some text".
my attempt
I have tried to set the width css property of the input field to 100% hoping that it will do it. However, that just stretch it all the way which forces it to go to the next line.
I am using bootstrap 4 with Angular2.
Just give your p tag a min-width. I gave the input a max-width so it's better when your screen size is smaller. Hope this answers your question
p.d-inline {
min-width: 75px;
display: inline-block;
text-align: right;
margin-left: 30px;
}
h6 {
margin-left: 30px;
}
input {
max-width: 100px;
}
You said you are using Bootstrap.
Why not Use Bootstrap Form then?
You can find how-to HERE
Open the following snippet in Full Page to see how it works
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-lg-1 control-label">Email</label>
<div class="col-lg-2">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-lg-1 control-label">Password</label>
<div class="col-lg-2">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-2">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-1 col-lg-3">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
As form-horizontal is not working as expected in bootstrap 4 so, you can try like this.
<div class="container">
<div class="row">
<div class="col-md-6 form-group row">
<label class="d-inline control-label col-md-3 text-right">Full Name: </label>
<div class="col-md-9">
<input class="form-control" type="text" placeholder="First Name" formControlName="firstName">
</div>
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
<br>
<div class="row">
<div class="col-md-6 form-group row">
<label class="d-inline control-label col-md-3 text-right">Email: </label>
<div class="col-md-9">
<input class="form-control" type="email" placeholder="Email" formControlName="email">
</div>
</div>
<div class="col-md-6">
<h6>Some text</h6>
</div>
</div>
</div>
My second week of learning and doing WebDevelopment! I have written this Bootstrap layout and the result is in the picture below.
Note the areas marked as yellow? why is that happening? How can I fix it? I know I can for example play around with margin-left ,etc.. to make it look right but I am still thinking if I define they correctly in bootstrap, it shouldn't have this problem.
Here is the Bootply to see the issue: http://www.bootply.com/zRyxHyhdbM
Here is the generated HTML code:
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Email">Email</label></div>
<div class="col-sm-4">
<input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
<span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px;"></span>
</div>
<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
<label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Phone">Phone</label></div>
<div class="col-sm-9 form-group">
<input class="col-sm-2" id="AdminPhone" name="AdminPhone" type="text" value="">
<label class="control-label col-sm-1" for="Ext">Ext</label>
<input class="col-sm-2" id="AdminExt" name="AdminExt" type="text" value="">
</div>
</div>
The misalignment is there because, the email input box is col-sm-4. To align bottom inputs we have to fit them with in col-sm-4. You can add margin-left(approx 12px) to align it but it will not be responsive.
Hence, I have changed the markup a little bit to remain responsive--
Link --- http://www.bootply.com/x0fgleMTp2
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Email">Email</label></div>
<div class="col-sm-4">
<input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
<span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px;"></span>
</div>
<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
<label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Phone">Phone</label></div>
<div class="col-sm-4 multi-row">
<span class="col-sm-5"><input class="form-input" id="AdminPhone" name="AdminPhone" type="text" value=""></span>
<span class="col-sm-2"><label class="control-label" for="Ext">Ext</label></span>
<span class="col-sm-5"><input class="form-input" id="AdminExt" name="AdminExt" type="text" value=""></span>
</div>
</div>
Is this what you wanted to achieve? Hope it may help.
<div class="container">
<div class="row">
<div class="form-group">
<label for="exampleInputEmail3">Phone</label>
<input type="text" class="form-control" id="exampleInputEmail3" placeholder="Phone">
</div>
<div class="form-inline">
<div class="form-group">
<label for="exampleInputEmail3">Phone</label>
<input type="text" class="form-control" id="exampleInputEmail3" placeholder="Phone">
</div>
<div class="form-group pull-right">
<label for="exampleInputEmail3">Ext</label>
<input type="text" class="form-control" id="exampleInputEmail3" placeholder="Ext">
</div>
</div>
</div>
</div>
The fiddle
I have a row with three inputs, two of the inputs have labels to their left. What is happening is the label is being displayed on top of the input box rather than to the side, like so:
Here is what I am trying to achieve:
<div class="row">
<div data-bind="foreach: items" class="padding-left-lg">
<div class="col-sm-4">
<input type="text" data-bind="value: Description,valueUpdate: 'afterkeydown'" class="form-control"/>
</div>
<div class="col-sm-4">
<label class="control-label">
Quantity: <input type="text" data-bind="value: Quantity,valueUpdate: 'afterkeydown'" class="form-control"/>
</label>
</div>
<div class="col-sm-1">
<input type="text" data-bind="value: Units,valueUpdate: 'afterkeydown'" class="form-control"/>
</div>
</div>
</div>
I would try something like this:
<form class="row form-horizontal">
<div class="col-sm-5">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</div>
</form>
Here is the fiddle I made https://jsfiddle.net/g3e8yjyg/.
What is different from the default Bootstrap example? You treat your form as a row or a set of rows, and each formgroup becomes a cell, where you will only vary the value of the size. This will allow you to put many fields in a single row.
<form class="row">
<!--Columns -->
<div class="col-lg-*">
<!--Your form group in here -->
<div class="form-group">
<!--The elements of you formgroup treated as col divs-->
<label for="inputPassword3" class="col-lg-*">Your label</label>
<div class="col-lg-*">
<input name="my-input">
</div>
</div>
</div>
<!--Columns -->
<div class="col-lg-*">
...
</div>
</form>
Add the form-inline class to your form, add the form-group class to the containing div, and move the input tag out of your label tag:
<form class="form-inline">
<div class="form-group col-sm-4">
<label class="control-label">Quantity:</label>
<input type="text" data-bind="value: Quantity,valueUpdate: 'afterkeydown'" class="form-control"/>
</div>
</div>
Labels are not in aligned with the fields.I want to make sure that labels be wrapped elegantly if exceeds the column width. Here is complete jsfiddle
HTML
<div class="row row-padded">
<strong>Question: </strong><p>Are you 18 years old?</p>
<strong>Answer:</strong>
<div class="radio-inline">
<label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">Yes</label>
</div>
<div class="radio-inline">
<label><input type="radio" name="optionsRadios1" id="optionsRadios2" value="option1">No</label>
</div>
<div class="row">
<div class="col-md-8 childFields">
<p class="">Give full details here: </p>
<div class="row">
<div class="col-md-6 colChildFields">
<label>Nature of Condition</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Dates and Duration</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Name Of Doctor</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Name of Hospital</label>
<input type="text" name="city"/>
</div>
<div class="col-md-6 colChildFields">
<label>Address of Hospital</label>
<input type="text" name="city"/>
</div>
</div>
</div>
</div>
</div>
I'm not sure I understood you right, but if that's what you're looking for, you should just add this to the CSS:
.col-md-6 label {
width: 150px;
}
If you want to do an horizontal form, you'll have to use a container div with class form-group and add a class control-label to the label, form-control to the input, with a structure like this :
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail1" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail1" placeholder="Email">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
Replace (in classes) -lg- by -xs- and it will be responsive and self managed if the label is longer.
See example with my jsFiddle