Please help me out, after adding the extra input-group-addon I am losing the markup of this form field. I would also like to have the chevron icon moved to the end of the form field instead of the input-group-addon. Even the label is now in the wrong position.
<?php
<div class="col-md-6">
<div class="input-group has-success has-feedback" id="add_km_tarief_div">
<label for="add_km_tarief_div">Tarief</label>
<span class="input-group-addon">€</span>
<input type="number" min="0" step="0.01" max="1" class="form-control" id="add_km_tarief" name="add_km_tarief" value="0.19" onkeyup="validate_add_table_1()">
<span class="input-group-addon">p/km</span>
<span class="glyphicon glyphicon-ok form-control-feedback" id="add_km_tarief_glyp"></span>
</div>
</div>
?>
Try With This
<div class="col-md-6">
<div class="input-group has-success has-feedback" id="add_km_tarief_div">
<label for="add_km_tarief_div" class="addyourclassname">Tarief</label>
<span class="input-group-addon">€</span>
<input type="number" min="0" step="0.01" max="1" class="form-control" id="add_km_tarief" name="add_km_tarief" value="0.19" onkeyup="validate_add_table_1()">
<span class="input-group-addon">p/km</span>
<span class="glyphicon glyphicon-ok form-control-feedback addyourownclass" id="add_km_tarief_glyp"></span>
</div>
</div>
Css:
.addyourclassname{float:left}
.addyourownclass{float: left;
position: relative;
top: 0;}
Related
I am trying to beautify a form in bootstrap. I don't understand why I can not add some margin to a hyperlink thats below an input? I tried to remove bootstrap and that didn't work, so I don't think it has something to do with bootstrap!
https://jsfiddle.net/k8ws75je/
<div class="col-md-8 col-md-offset-2">
<form class="form-horizontal" role="form" method="POST" action="{{ route('register') }}">
<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
<label for="name" class="col-md-4 control-label">Name</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control" name="name" value="" required autofocus>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
<div class="form-group">
<label for="email" class="col-md-4 control-label">E-Mail Address</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control" name="email" value="" required>
<span class="help-block">
<strong></strong>
</span>
</div>
</div>
<div>
<div class="col-md-6 col-md-offset-4">
<a id="linkpassword" href="#">Change Password</a>
<button type="submit" class="btn btn-success pull-right">
Update
</button>
</div>
</div>
</form>
#linkpassword{
margin-top: 400px;
}
That's because a elements are inline elements, which cannot have vertical margins. Change it to an inline-block to make it work
#linkpassword{
margin-top: 200px;
display: inline-block;
}
https://jsfiddle.net/knu1badd/1/
#linkpassword{
margin-top: 400px;
position:absolute;
}
Make it display: block. Thus it will be as you want.
warp a element in a div block and apply the position/margin on this block.
Because a is an inline element.
<div class="margin-top">
<a id="linkpassword" href="#">Change Password</a>
</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 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/
I have two inputs, one button and one drop down menu, how do i align it so that its next to each other. I have created div for each element but things dont look right. this is what i have done:
<div class="class1">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input1" >
<input type="text" value="" class="form-control" id="deatPicker1">
</div>
<div class="class1" >
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input1">
<input type="text" value="" class="form-control" id="deatPicker2">
</div>
<div class="button" style="display: inline-block;">
<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"> </i></button>
</div>
My Css: during this process i have noticed the above example works fine but only if i create another web-page if i use my current web page then things dont stay the way i want
.class1{
display: inline-block;
width: 15px;
}
.input1{
display: inline-block;
width: 200px;
padding-left: 20px;
}
It looks like you're using bootstrap.
So you can align it all using rows and cols.
like so :
<div class="row class1">
<div class="col-md-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
<input type="text" value="" class="form-control" id="deatPicker1">
</div>
<div class="col-md-4">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
<input type="text" value="" class="form-control" id="deatPicker2">
</div>
<div class="col-md-4">
<button type="submit" class="btn btn-default">
<i class="glyphicon glyphicon-search"></i>Search</button>
</div>
</div>
a row gives you a maximum of 12 cols.. so depending on how many aligned items you want, you can do :
<div class="col-md-3"></div> x 4 to get a 4 col layout
http://jsfiddle.net/mT6VV/7/
Try this Code :-
<div class="class1">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input1" >
<input type="text" value="" class="form-control" id="deatPicker1">
</div>
<div class="class1" >
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input1">
<input type="text" value="" class="form-control" id="deatPicker2">
</div>
use this Css :
.class1 {
display: inline-block;
}
.input1 {
display: inline-block;
width: 200px;
padding-left: 20px;
}
button {
width:90px;
height:20px;
}
you don't have need to put extradiv tag in your design source.
Demo For Alignment
it is working.