I am trying to center my labels on top of me datetimepicker inputs but text-align:center does not seem to be cutting it.
http://jsfiddle.net/aesh3ufk/4/
Does anyone know how to center the labels on top of my inputs? Even !important does not work...
<div class="row">
<div class="col-xs-12">
<h4><strong>ITEMS CHECKED IN</strong></h4>
<div class='col-md-6'>
<label for="From">From</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' id="From" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<div class='col-md-6'>
<label for="To">To</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' id="To" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
That's an easy fix actually. Just add text-center to your col-md-6 <div>s:
<div class="row">
<div class="col-xs-12">
<h4 class="CAlign"><strong>ITEMS CHECKED IN</strong></h4>
<!-- Right Here -->
<div class='col-md-6 text-center'>
<label for="From">From</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' id="From" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<!-- And Here -->
<div class='col-md-6 text-center'>
<label for="To">To</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker2'>
<input type='text' id="To" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
JSFiddle Example
The label's display style is inline-block and you must change it to block in order to be able to align the text to the center
One option is just to add the .text-center Bootstrap class to the parent div like so:
<div class='col-md-6 text-center'>
<label for="From">From</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' id="From" class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
http://jsfiddle.net/aesh3ufk/6/
Related
I got some questions related to positioning I don't want to use a fixed position as my browser is dynamic, how can I move my + - to the right position of the contact: input (Position here)
I try many as it seems only ways is a position to be fixed is there another way to do it?
Here the image
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" ></i></label></a>
<a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus"></i></label></a>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
.flex{display: flex;}
<div class="form-group row">
<label for="validationNumber" class="col-2 col-form-label">Contact:</label>
<div class="col-4">
<div class="flex">
<input id="validationNumber" name="phonenumber" type="text" class="form-control" pattern="\b\d{8}\b" required>
<a onclick="add()"><label style="cursor: pointer;"><i data-feather="plus" >+</i></label></a>
<a onclick="remove()"><label style="cursor: pointer;"><i data-feather="minus">-</i></label></a>
</div>
<div id="new_chq">
</div>
<input type="hidden" value="1" id="total_chq">
<div class="invalid-feedback">
Enter a correct PhoneNumber!
</div>
</div>
</div>
I need to do this card. I've done all, but my row with Date and time sucks. Please, help me to do it correctly. The first image shows how it must be, the second is mine. I don't know how to do: 1)a proper space between input date and input time. 2)How to make this card to be responsive so on the extrasmall screens it would take all 12 col. 3)why my radios are grey ? in the example they are white
<div class="form-group row">
<label for="date" class="col-md-2 col-form-label">Date and Time</label>
<div class="col-md-8">
<div class="input-group">
<div class="input-group-addon"> <span class="fa fa-calendar"></span></div>
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
<div class="col-md-1"></div>
<div class="input-group-addon"> <span class="fa fa-clock-o"></span></div>
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</div>
I solved to you the 3 problems, check the code, the last style I put it inline but you can use the class of bootstrap and put what you want of props and add (!important) to take your style
<div class="form-group row">
<label for="date" class="col-md-2 col-form-label">Date and Time</label>
<div class="input-group">
<div class="col-xs-8">
<div class="input-group">
<div class="input-group-addon" style="background-color: white"> <span class="fa fa-calendar"></span>
</div>
<input type="text" class="form-control" id="date" name="date" placeholder="Date">
</div>
</div>
<div class="col-xs-4">
<div class="input-group">
<div class="input-group-addon" style="background-color: white"> <span class="fa fa-clock-o"></span></div>
<input type="text" class="form-control" id="time" name="time" placeholder="Time">
</div>
</div>
</div>
When I put 2 fields in a row, their glyphicons are being shown with a nasty offset:
<div class="form-inline">
<div class="form-group col-xs-6 has-feedback has-error">
<input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="form-group col-xs-6 has-feedback has-error">
<input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
The full JSFiddle is here: https://jsfiddle.net/v_melnik/f8u9hvLa/6/
Is there a way to make them being shown properly?
Lots of thanks to everyone!
UPDATE: Someone marked this question as a duplicate of this one. But this question isn't about adding a glyhicon, it's rather about using glyphicons with a "narrowed" input box.
change your html
<div class="form-inline">
<div class="col-xs-6">
<div class="form-group has-feedback has-error">
<input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
<div class="col-xs-6">
<div class="form-group has-feedback has-error">
<input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</div>
jsfiddle
Use position:absolute for glyphicon.
.glyphicon-remove::before {
left: 0;
position: absolute;
}
DEMO
only for Mobile Device Because you can use xs class. Add Style.
.form-control-feedback
{
right: 7px;
}
Fiddle Demo
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.form-control-feedback
{
right: 7px;
}
.
<!-- We'll use col-xs-* here, as JSFiddle's result window is really narrow -->
<div class="ibox col-xs-12">
<div class="ibox-content">
<form action="#">
<div>
<label>Location</label>
<div class="form-inline">
<div class="form-group col-xs-6 has-feedback has-error">
<input data-placeholder="Your Latitude" id="latitude" name="latitude" type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="form-group col-xs-6 has-feedback has-error">
<input data-placeholder="Your Longitude" id="longitude" name="longitude" type="text" class="form-control">
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
</div>
</div>
</form>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
I have a angularJs form, which has multiple controls. When the page loads initially, all the contents fit in the form. When the validation messages are shown, the submit button, cancel button are not shown. These buttons are getting below.
Below is the code in index.cshtml. I have only put few controls, additional controls are also there.
<body class="ng-cloak">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"></link>
<div ng-controller="testController" ng-init="init()">
<form name="mainForm" id="createForm" ng-submit="mainForm.$valid && add()" novalidate="">
<div>
<!-- HEADER AND NAVBAR -->
<header>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">Test</a>
</div>
<ul class="nav navbar-right nav-pills">
<li ng-class="{active: createMenu}">
Create</li>
<li ng-class="{active: dashboardMenu}">
Dashboard
</li>
</ul>
</div>
</nav>
</header>
</div>
<div class="container" ng-show="createMenu">
<br />
<div class="row">
<div class="col-sm-2">
<label class="control-label">Groups:</label>
</div>
<div class="col-sm-4 form-group">
<select name="grpTypeSelect" required="" ng-model="selectedgrpType" class="dropdown form-control cl-sm-6" ng-options="grp.GrpTypeName for grp in grpss" ng-change="updateImageUrl(selectedgrpType)">
<option value="">-- Select the Group --</option>
</select>
</div>
</div>
<span id="span1" style="color:red" ng-show="submitted == true && mainForm.grpTypeSelect.$error.required">Group is required</span>
<br />
<div class="row">
<div class="col-sm-2">
<label>Name :</label>
</div>
<div class="col-md-6 form-group">
<input type="text" maxlength="150" class="input-md form-control col-md-4" required="" ng-model="testName" name="testName" />
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.testName.$error.required">Name is required</span>
<br />
<br />
<div class="row">
<div class="col-sm-6">
<label class="control-label">Start date</label>
<div class="form-group">
<div class="input-group date" id="startDatepicker">
<input type="text" required class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultStartDate" name="startDate">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.startDate == '' && mainForm.startDate.$error.required">Start Date is required</span>
</div>
<div class="col-sm-6">
<label class="control-label">End date</label>
<div class="form-group">
<div class="input-group date" id="endDatepicker">
<input type="text" required="" class="form-control" placeholder="MM/DD/YYYY" ng-model="defaultEndDate" name="endDate">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.endDate.$error.required">End Date is required</span>
</div>
<!--/col-->
<div class="col-sm-6">
<label class="control-label">Start Time</label>
<div class="form-group">
<div class="input-group" id="startTimepicker">
<input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultStartTime" name="startTime">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.startTime.$error.required">Start Time is required</span>
</div>
<div class="col-sm-6">
<label class="control-label">End Time</label>
<div class="form-group">
<div class="input-group" id="endTimepicker">
<input type="text" required="" class="form-control" placeholder="00:00 AM/PM" ng-model="defaultEndTime" name="endTime">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
<span style="color:red" ng-show="submitted == true && mainForm.endTime.$error.required">End Time is required</span>
</div>
<div class="form-group">
<div class="col-sm-offset-4 col-sm-6">
<input type="submit" value="Submit" ng-click="submitted=true" class="btn btn-primary" />
<input type="button" id="btnReset" value="Cancel" ng-click="reset()" class="btn btn-primary" />
</div>
</div>
<br/>
</div>
</div>
Is it possible to fit the contents even during the validation messages are shown? i am not setting any specific class to set height. How to make sure that submit and cancel button are also visible, when the form height increases. I checked this link extending a form's height to fit the content in the form , but could not find the solution.
Adding the snippet to show the issue:
Initial load shows as :
After error message:
Thanks
For making anything auto-adjustable according to its content, you can use min-height property.
min-height:100px;
Try this, add it in your form css, like this
<form name="mainForm" id="createForm"
ng-submit="mainForm.$valid && add()"
novalidate=""
style="min-height:100px;">
I am trying to layout a form using bootstrap 3 but for some reason the input is pushed to left.
My markup looks like this
<div class="jumbotron">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date" >Date work performed</label>
<p class="input-group col-sm-3">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</p>
</div>
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<div class="col-sm-2">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
<div role="alert">
<span class="error has-error alert-danger" ng-show="invoiceForm.txt_job_ref_no.$error.required">
Ref no is required!</span>
</div>
</div>
</form>
</div>
Here is the link to fiddle
Many thanks in advance!
This should help. Wrap the labels and elements in cols, and the form in a .container inside the .jumbotron. You were over-complicating the layout.
<div class="jumbotron">
<div class="container">
<form name="invoiceForm" class="form-horizontal" role="form" data-toggle="validator">
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_date">Date work performed</label>
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<label class="control-label" for="txt_job_ref_no" required-asterix="" >Ref No</label>
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/1/
Edit: Missed part about form being horizontal. Added new code below to reflect that.
This has the layout you're looking for
<div class="jumbotron">
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label class="control-label col-sm-3" for="txt_job_date">Date work performed</label>
<div class="col-sm-7">
<div class="input-group">
<input type="text"
class="form-control"
datepicker-popup="{{format}}" ng-model="dt"
is-open="opened" min-date="minDate"
max-date="'2015-06-22'"
datepicker-options="dateOptions"
date-disabled="disabled(date, mode)"
ng-required="true"
close-text="Close"
id="txt_job_date"
ng-model="job_date"
/>
<span class="input-group-btn">
<button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label" for="txt_job_ref_no" required-asterix="">Ref No</label>
<div class="col-sm-7">
<input type="text" class="form-control" ng-model="ref_no" id="txt_job_ref_no" placeholder="123RTE" required="required">
</div>
</div>
</form>
</div>
</div>
http://jsfiddle.net/j8x15dbs/2/
A real easy thing to do - and a great way to learn - is to just copy the examples off of Bootstrap's site and replace their values with yours. :)
remove <col-sm-2> from before the input tag. As good practice, always use <div class="row"> before using <col-sm-12> and don't use rows or columns inside <div class="form-group">
Please read about bootstrap scaffolding to understand how to write good markup.