I have a problem with my div element wchich contains label, input and button for opening datepicker popup. Button wchich open this one is a little below the input. I'd like to have all elements in one line. I use bootstrap for that. Below is show my HTML code:
<div class="row">
<div class="col-md-3">
<p class="input-group">
<label for="usr">Date From:</label>
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" is-open="datepickers.dt" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'dt')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="col-md-3">
<p class="input-group">
<label for="usr">Date To:</label>
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt2" is-open="datepickers.dtSecond" datepicker-options="dateOptions" ng-required="true" close-text="Close" />
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'dtSecond')"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
</div>
Could someone help me with that? I would be greatful for helping
Best regards ;)
By making use of Bootstrap's .form-group wrapper you can achieve the results you desire:
<div class="form-group">
<label for="usr" class="control-label">Date From:</label>
<div class="input-group">
<input type="text" class="form-control" uib-datepicker-popup ng-model="dt1" is-open="datepickers.dt" datepicker-options="dateOptions" ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />
<div class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event, 'dt')"><i class="glyphicon glyphicon-calendar"></i></button>
</div>
</div>
</div>
You can read more about .form-group and a variety of other form-related helper-classes on Bootstrap's documentation page: http://getbootstrap.com/css/#forms
Related
<div class="form-inline">
<div class="form-group has-feedback">
<label for="id_first_name">First Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" id="id_first_name" name="first_name" type="text" />
</div>
</div>
<div class="form-group has-feedback">
<label for="id_last_name">Last Name</label>
<div class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input class="form-control" id="id_last_name" name="last_name" type="text" />
</div>
</div>
</div>
I get a output similar to this: http://i.stack.imgur.com/YKvOY.png
But I want the labels above the fields.
I googled and I see a lot of people have the same problem but exactly the opposite. They have the labels above the fields and want them in the same line. However I tried their code, still not working.
I've created this fiddle demonstrating this using what you provided. form-group should do the trick.
I have a small contact modal on my website that does not appear. It was working before, but I must have changed something and now it won't work.
I've looked over it multiple times and I can't figure out why it's not working.
HTML:
<span data-toggle="modal">Contact</span>
<div class="modal fade" id="contact" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<h4>Contact the Developers</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="contact-name" class="col-lg-2 control-label">Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="contact-name" placeholder="Full Name">
</div>
</div>
<div class="form-group">
<label for="contact-email" class="col-lg-2 control-label">Email:</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="contact-email" placeholder="you#example.com">
</div>
</div>
<div class="form-group">
<label for="contact-msg" class="col-lg-2 control-label">Message:</label>
<div class="col-lg-10">
<textarea class="form-control" rows="8"></textarea>
</div>
</div>
</div>
<div class="modal-footer">
<a class="btn btn-default" data-dismiss="modal">Close</a>
<button class="btn btn-primary" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
You are missing the data-target attribute. Plus, you shouldn't be linking to a page when you want to open a modal ;)
<span data-toggle="modal" data-target="#contact">Contact</span>
Should fix this. See http://www.bootply.com/UED0aevXsG
I would like to design a two column horizontal form using Bootstrap V2.3.2. The following is the html:
<div id='content' class='row-fluid'>
<div class='span12 main'>
<h2>Product Data</h2>
<form class="form-horizontal">
<fieldset>
<div class="form-group">
<label for="inputAppName" class="control-label col-xs-2">Application Name </label>
<div class="col-xs-10">
<input type="text" class="form-control" id="app_name" name="app_name" placeholder="Application Name">
</div>
</div>
<div style="height:10px;"></div>
<div class="form-group">
<label for="inputAppDesc" class="control-label col-xs-2">Description </label>
<div class="col-xs-10">
<textarea class="form-control" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>
I find that the width of the input-text and textarea on the second column are smaller. I would like to extend them to take up the rest space. I tried to use the "input-block-level" class but the input-text and textarea will then not be on the same row as the label.
Can anyone help?
Thanks in advance!
The first thing to do is to don't use the Bootstrap 3 class...
Try Bootstrap 2 instead... Replace col-xx-[1-12] by span[1-12]
Your code with input in span11 :
http://www.bootply.com/119374
<div id="content" class="row-fluid">
<div class="span12 main">
<h2>Product Data</h2>
<form class="form-horizontal">
<fieldset>
<div class="form-group row-fluid">
<label for="inputAppName" class="control-label span2">Application Name </label>
<div class="span10">
<input type="text" class="form-control span11" id="app_name" name="app_name" placeholder="Application Name">
</div>
</div>
<div style="height:10px;">
</div>
<div class="form-group row-fluid">
<label for="inputAppDesc" class="control-label span2">Description </label>
<div class="span10">
<textarea class="form-control span11" id="app_desc" name="app_desc" rows="4" placeholder="Application Description"></textarea>
</div>
</div>
</fieldset>
</form>
</div>
</div>
try this
<form>
<div class="row">
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div>
</div>
<div class="col-xs-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div>
</div>
</div>
</form>
If I click on input text box, bootstrap calenar opend, the con is not clickable. Could someone help ?
</div>
<div class ="form-group">
<label class="col-sm-2 control-label" >Received Date</label>
<div class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy">
<input class="text-input form-control" type="text" name="ARDT" id="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
JSFIDDLE
Simply add class btn to this:
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i></span>
pur the id in parent class. see code below:
<div id="ARDT" class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy">
<input class="text-input form-control" type="text" name="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
Maybe someone need it...
$('.glyphicon-calendar').on('click',function(){
$('#ARDT').focus();
});
This is a working combination of the above answers.
You need to add the 'btn' class to make the glyphicon clickable.
You need to add 'datepicker' class so you can call in in the jquery.
You need to create a jquery click event for the 'datepicker' class.
<div class="input-group datepicker">
<input type='text' class="form-control" id='datepicker2'/>
<span class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
//this is to make the calendar glyphicon clickable
$('.datepicker').click(
function () {
$(this).datepicker('show');
}
);
<div class="input-group date datepicker">
<input type="text" class="form-control" />
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
and then
$('.datepicker').off('focus').datepicker().click(
function () {
$(this).datepicker('show');
}
);
This works fine.
I am trying to make dropdown login form in navigation bar using Bootstrap 3, but it does not look good - labels and inputs are wider than drop down ... panel.
How I can change drop down form width using col-* Bootstrap classes?
Here is the code (http://getbootstrap.com/css/#forms-horizontal):
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Sign in <b class="caret"></b>
<div class="dropdown-menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-lg-2 control-label">Password</label>
<div class="col-lg-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</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>
</div>
</li>
</ul>
Thanks in advance.
You could add padding to the .dropdown-menu and change your columns to col-lg-11
Example: http://bootply.com/110118