When using the Bootstrap has-feedback icon combined with an label the icon is displayed in there same horizontal line as the label instead of in the form field.
When I remove <label for="bedr_naam">Bedrijfsnaam</label> it is set correctly.
Any suggestions?
<div class="container">
<div class="col-md-5">
<div class="form-group has-warning" id="div_bedrijfsnaam">
<label for="bedr_naam">Bedrijfsnaam</label>
<input type="text" class="form-control" id="bedrijfsnaam" name="bedrijfsnaam" value="'.$row['bedrijfsnaam'].'" onkeyup="validate()" onclick="validate()"><span class="glyphicon glyphicon-warning-sign form-control-feedback" id="bedrijfsnaam_status">
</div>
</div>
This is example from documentation:
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
Look carefully, your div#div_bedrijfsnaam does not have has-feedback class and label without control-label class
Related
As you can see in the picture the height gets all crazy when I add a label element to the form-group I'm using Bootstrap 3.7
here is my HTML
<div class="form-group date input-group {{ $errors->has('medical_date_test') ? 'has-error' : ''}}">
<label>Medical date test <span class="required">*</span></label>
<input type="text" class="form-control" name="medical_date_test" value="{{ old('medical_date_test') }}">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
here is a JSFiddle
https://jsfiddle.net/0d2a0kzr/
you just need to put a label outside the div class "form-group https://jsfiddle.net/j1aw98jm/2/
<label>Medical date test <span class="required">*</span></label>
<div class="form-group date input-group">
<input type="text" class="form-control" name="medical_date_test">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i> </span>
</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>
I'm trying to align and style a form. My first attempt was
<form action="myUrl" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Set ID</label>
<div class="col-sm-4">
<input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Customer ID</label>
<div class="col-sm-4 input-group">
<input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
<span class="input-group-btn">
<button class="btn btn-default lookup-button" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="form-group">
<input class="btn btn-default" type="submit" id="submit" value="Search">
</div>
</form>
However, my two text boxes have their left edges aligned differently as seen here
I tried adding input-group to the div that encloses the first text box and that solved the alignment issue, but it causes the corners of the text box to become hard corners rather than being rounded as seen here
<form action="myUrl" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Set ID</label>
<div class="col-sm-4 input-group">
<input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Customer ID</label>
<div class="col-sm-4 input-group">
<input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
<span class="input-group-btn">
<button class="btn btn-default lookup-button" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
<div class="form-group">
<input class="btn btn-default" type="submit" id="submit" value="Search">
</div>
</form>
I also tried adding an empty <span> into my first text box, along with the input-group class. That causes the left corners to become rounded, but the right corners stay square. The right edge also becomes slightly misaligned with the right edge of the text box below it as shown here
Is there a way that I can cause my text boxes to align evenly on their left edges, while having the first text box maintain its rounded corners (without adding a superfluous icon into the first text box)?
You should use the class input-group in another div and this will solve the problem of the input behavor
see code snippet:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form action="myUrl" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Set ID</label>
<div class="col-sm-4">
<input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Customer ID</label>
<div class="col-sm-4">
<div class="input-group">
<input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
<span class="input-group-btn">
<button class="btn btn-default lookup-button" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2"></label>
<div class="col-sm-4">
<input class="btn btn-default" type="submit" id="submit" value="Search"> </div>
</div>
</form>
Try this
CSS
.lookup-button span.glyphicon{
border-left:1px solid #e1e1e1;
padding:8px;
}
HTML
<form action="myUrl" class="form-horizontal" method="post">
<div class="form-group">
<label class="control-label col-sm-2">Set ID</label>
<div class="col-sm-5">
<input class="form-control" id="setId" name="setId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Customer ID</label>
<div class="col-sm-5">
<input class="form-control" id="customerId" name="customerId" placeholder="Enter value" type="text" value="">
</div>
</div>
<div class="form-group">
<button class="btn btn-default lookup-button" type="submit">
submit
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</form>
i have modified some of your html. Here you need not use the input type[submit], simply replace it with . It functions the same way.
i have styled the submit button and organised some code
Link for Reference
Hope this helps
I have a text input and a checkbox in the same row and col. If I add pull-right class to the checkbox, how can I fill remaing space on the left with the text input? I'm using Bootstrap 3.
<div class="checkbox i-checks pull-right">
<label> <input type="checkbox" >
<i></i> Fixed width label
</label>
</div>
<input class="form-control">
http://jsfiddle.net/snlacks/togpvwwk/
This is built into Bootstrap CSS. http://getbootstrap.com/components/#input-groups-checkboxes-radios
Use an input-group, and use an input-group-addon. Put it before or after the input, inside the input-groupd.
<div class="container">
<div class="row">
<div class="col-lg-12">
<label for="input_name">My field</label>
<div class="input-group">
<input type="text" name="input_name" class="form-control" aria-label="..." placeholder="Text on left, check over there ==>">
<span class="input-group-addon">
<label>
<input type="checkbox" aria-label="Over here on the right">
Title Label
</label>
</span>
</div>
<!-- /input-group -->
</div>
<!-- /.col-lg-6 -->
</div>
<!-- /.row -->
</div>
I am trying to get this label to line up horizontally with the text input and button, but am not succeeding. The label is instead being stacked on top of the text input. Here is the Bootply.
HTML
<div class="row">
<div class="col-lg-12">
<div class="input-group input-group-lg">
<label for="id-message">ResidentBiscuit</label>
<input type="text" class="form-control input-lg" id="chat-message" placeholder="Enter your message...">
<span class="input-group-btn">
<button class="btn btn-default btn-lg" type="submit">Send</button>
</span>
</div>
</div>
</div>
Can you use a form with form-inline class?
<form class="form-inline">
<div class="form-group">
<label for="chat-message">ResidentBiscuit</label>
<input type="text" class="form-control input-lg" id="chat-message" placeholder="Enter your message...">
</div>
<button type="submit" class="btn btn-default btn-lg">Send</button>
</form>
http://www.bootply.com/MEub8RYgwj