In Bootstrap, if I have an input box with label and button in the same row, how do I get the button to align? I don't want to append it to the input box using input-append - any ideas?
<div class="row">
<div class="form-group col-sm-3">
<label for="txtSchedFromDate">
From:</label>
<input type="text" class="form-control input-sm" id="txtSchedFromDate" />
</div>
<div class="form-group col-sm-3">
<label for="txtSchedToDate">
To:</label>
<input type="text" class="form-control input-sm" id="txtSchedToDate" />
</div>
<div class="form-group col-sm-3">
<button type="button" id="btnResetEngineers" class="btn btn-default">
Reset Engineers</button>
</div>
</div>
JSFiddle
Many thanks
These are the changes I have made
Just include form-control in the button class and an empty label for the button's div
<div class="form-group col-sm-3">
<label for="txtSchedFromDate">
</label>
<button type="button" id="btnResetEngineers" class="form-control btn btn-default">Reset Engineers</button>
</div>
Here's a corrected fiddle
https://jsfiddle.net/Indu9594/rcwyso3x/
Related
I am trying to center everything in a form, with the labels and the values in input fields. This works, except when using the input-group-append class in Bootstrap. The input field and the appended button is treated as one and the entire thing is centered. How can I center just the input field?
It looks like this:
My code:
<div class="col-lg-12 text-center">
<div class="form-group boxed">
<div class="input-wrapper">
<label class="label" for="firstname">Name</label>
<input name="firstname" class="form-control" style="text-align:center"type="text" value="john">
</div>
</div>
<div class="form-group boxed">
<div class="input-wrapper">
<label class="label" for="email">E-mail</label>
<div class="input-group">
<input name="email" type="text" class="form-control" style="text-align:center" value="info#domain.com">
<span class="input-group-append numspan">
<button class="btn btn-primary" type="button">Search</button>
</span>
</div>
</div>
</div>
I have the following html form
<form name="enviarAutorizacao" id="enviarAutorizacao" novalidate>
<label class="form-label-gray">autorization</label>
<input class="form-control col-sm-6" ng-model="current.autorizacao" id="autorizacao" ui-mask="" maxlength="20" required>
<div class="form-group col-sm-8">
<label class="form-label-gray"> Value </label>
<div class="form-group col-sm-2 form-label-gray">
<label>$</label>
</div>
<div class="form-group col-sm-9">
<input class="form-control" maxlength="16" ng-model="current.valor" required id="valor">
</div>
</div>
<div class="form-group col-sm-12">
<button class="btn btn-default" ng-disabled="enviarAutorizacao.$invalid || enviarAutorizacao.$pristine" id="submit-representante-estabelecimento" ng-click="validateAssociate()">click me</button>
</div>
</form>
I am trying to enable the submit button, only when the 2 inputs are filled, but it is enabling right when I type on the first input (autorizacao).
I tried few alternatives, like change "ng-disabled="enviarAutorizacao.$invalid" to "ng-disabled="!enviarAutorizacao.$valid", but didnt works.
What is wrong with this html ?
If you use enviarAutorizacao.autorizacao.$invalid you will know if the "autorizacao" input is Invalid.
[form id].[input name].[$valid or $invalid or $dirty...]
So your code should be like this:
I changed the input's name and submit's ng-disabled
<form name="enviarAutorizacao" id="enviarAutorizacao" novalidate>
<label class="form-label-gray">autorization</label>
<input class="form-control col-sm-6" ng-model="current.autorizacao" id="autorizacao" ui-mask="" maxlength="20" name="autorizacao" required>
<div class="form-group col-sm-8">
<label class="form-label-gray"> Value </label>
<div class="form-group col-sm-2 form-label-gray">
<label>$</label>
</div>
<div class="form-group col-sm-9">
<input class="form-control" maxlength="16" ng-model="current.valor" required id="valor" name="valor">
</div>
</div>
<div class="form-group col-sm-12">
<button class="btn btn-default" ng-disabled="enviarAutorizacao.autorizacao.$invalid || enviarAutorizacao.valor.$invalid" id="submit-representante-estabelecimento" ng-click="validateAssociate()">click me</button>
</div>
</form>
Try using the ids of the actual inputs individually as the arguments to ng-disabled.
Alternatively you could check the validity of current.autorizacao and current.valor and use those.
I am using Bootstrap 3 and I stuck on some form formatting.
E.g. I want to have 3 inline forms (each with label, text input and button) so they elements (label, text input, button) will be all perfectly matching (in column?)
If you look at this fiddle example you can see, that I almost achieved this by setting col-xs-6 to each form-group. But this makes too big space between input and submit button and also break too soon when resizing (and also when I try to align whole form set to left, everything is broken).
So is there any way to align this form elements instead of this?
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group col-xs-6 text-right">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2" >
</div>
<div class="form-group col-xs-6">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
This fiddle might help you. The entire layout can be put into container and each form can be given a margin and text-align css properties.
And I dont think there is a need for text-right and col-xs-6 to be included, instead you can use container to restrict the max-width and make it more responsive as shown in the fiddle.
Why not just give a width to your label? If you put the three elements into the same column then you can just make the label inline-block and give it a width (you may need to use the full page link in the snippet below to see this working)
.form-group > label {
display: inline-block;
vertical-align: middle;
width: 9em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Keyword weight</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Results per page</label>
<input type="text" class="form-control" id="exampleInputName2">
<button type="submit" class="btn btn-default">Save</button>
</div>
</form>
I have a password input box which contains a glyphicon info image on the right side. I am using parsley.js to validate this input box. On form submit if password validation fails parsley displays the error message beneath the input box as expected but also breaks the alignment of the glyphicon icon and makes it protrude out of the input box. Please find jsfiddle demo here
https://jsfiddle.net/bsbef0qd/2/ . Thanks
<form id="form" data-parsley-validate="">
<div class="row">
<div class="col-xs-4">
<label for="password" class="control-label">Password</label>
<div class="input-group add-on">
<input type="password" name="userFormPassword" id="userFormPassword" value="" class="form-control input-sm" required/>
<span class="input-group-addon">
<a class='my-tool-tip' data-toggle="tooltip" data-placement="left" title="Some password instructions">
<i class='glyphicon glyphicon-info-sign'></i>
</a>
</span>
</div>
</div>
<div class="form-group col-xs-4">
<label for="confirm" class="control-label">Confirm Password</label>
<input type="password" name="confirm" value="" class="form-control input-sm" />
</div>
</div>
<button type="submit">Submit</button>
</form>
You can change the error displaying position..
Add this part to your form tag as a attribute "data-parsley-errors-container="#errorContainer""
<form id="form" data-parsley-validate="" data-parsley-errors-container="#errorContainer">
put this div to where you want the errors to display
<div id="errorContainer"></div>
I have edited your fiddle check the demo
Also Check the Plugin documentation here
also, you can use data-parsley-errors-container="#your-div-id" in your input element
<div class="form-group">
<label for="middle-name" class="control-label col-md-3 col-sm-3 col-xs-12">Start Time</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<div class=" datetimepicker3 input-append timepick">
<input class="form-control" data-format="hh:mm" placeholder="HH:MM" type="text" name="startTime" data-parsley-errors-container="#startTimeErrorContainer" required="required" id="startTime" />
<span class="add-on"><i class="fa fa-clock-o icon-time"></i></span>
</div>
<div id="startTimeErrorContainer"></div>
</div>
How to align button to text box?
<form accept-charset="UTF-8" action="/action" method="get">
<div class="form-group">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<label for="from_date">From date</label>
<input class="form-control" id="from_date" name="from_date" type="text">
<p class="help-block">* Dates are inclusive</p>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<label for="to_date">To date</label>
<input class="form-control" id="to_date" name="to_date" type="text">
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input class="btn btn-primary" name="commit" type="submit" value="Go">
</div>
</div>
</div>
</form>
Adding a padding to your last div is one solution.
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 toppadding">
<input class="btn btn-primary" name="commit" type="submit" value="Go">
</div>
in css class add
.toppadding
{
padding-top:23px;
}
Check this Demo
Labels are what's throwing it off, you can use the solution above or get rid of labels altogether by using placeholders:
<input class="form-control" name="to_date" type="text" placeholder="To Date">
http://jsfiddle.net/6y88u1ts/