I have the following bootstrap code for showing a textfield with a button:
<div class="form-group">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<label>Second Column</label>
<input type="text" class="form-control" placeholder="Search for...">
</div>
<!-- /input-group -->
</div>
I should get something like this:
But what I get is this:
I guess its because of the <label> tag.
Any clue on how can I fix this?
I think you need to move the label to outside the .input-group
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" />
<div class="form-group">
<label for="field1">Second Column</label>
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input id="field1" type="text" class="form-control" placeholder="Search for...">
</div>
</div>
Related
i want to use bootstrap 4 custom control for checkbox, after reading the documentation i wrote this, but the checkbox is not shown, what am i doing wrong?
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body"><label>Add Productc Varian for </label>
<div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div>
<div class="form-group">
<div class="custom-control custom-checkbox"><label for="formGroupExampleInput2">Default</label><input type="checkbox" class="custom-control-input" id="customControlValidation1"></div>
</div>
<hr>
<div class="form-group">
<div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div>
</div>
</div>
Just add the missed class custom-control-label for label. You just want to follow custom forms Bootstrap-v4 form for reference.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-body">
<label>Add Productc Varian for </label>
<div class="form-group">
<label for="formGroupExampleInput">Code</label>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="formGroupExampleInput">Name</label>
<input type="text" class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Description</label>
<textarea class="form-control" placeholder="Description"></textarea>
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Default</label>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-12">
<button type="button" class="btn btn-default float-right">Add</button>
<button type="button" class="btn btn-danger float-right">Cancel</button>
</div>
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body"><label>Add Productc Varian for </label>
<div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="example1">
<label class="custom-control-label" for="customCheck">Check this custom checkbox</label>
</div>
</div>
<hr>
<div class="form-group">
<div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div>
</div>
</div>
This will fix the problem for you. Just following the correct syntax for custom checkboxes does the work.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-body"><label>Add Productc Varian for </label>
<div class="form-group"><label for="formGroupExampleInput">Code</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput">Name</label><input type="text" class="form-control" placeholder="Enter Name"></div>
<div class="form-group"><label for="formGroupExampleInput2">Description</label><textarea class="form-control" placeholder="Description"></textarea></div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customControlValidation1">
<label class="custom-control-label" for="customControlValidation1">Default</label>
</div>
<hr>
<div class="form-group">
<div class="col-12"><button type="button" class="btn btn-default float-right">Add</button><button type="button" class="btn btn-danger float-right">Cancel</button></div>
</div>
</div>
Source: JS Bin
I had the same problem, the problem was that my Bootstrap 4 files were not updated. Just download the latest version and it should be OK
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 problem when my view render, i am using a input group class to join a textbox and a input but the problem is that if you see they doesn't get together, i already find a solution that is to erase part of the 'site.css' mvc project make from default but that doesn't work for me.
here is my code.
#using (Html.BeginForm())
{
<div class="input-group">
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
Product name: #Html.TextBox("id", null, new {#class = "form-control"})
</div>
}
and its views like this
Try changing the width of the div.
UPDATE:
I am confused on why your TextBox and Label(Product Name) are below the span.
Here is a working example with add-ons on both sides:
<div class="form-group">
<label class="control-label">Input addons</label>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Button</button>
</span>
</div>
</div>
Your problem is that "Product name:" falls inside the input-group but isn't in a input group compatible tag. Here is a plunker with some options. enter link description here
<form action="/Products/Index" method="post">
<div class="input-group">
<span class="input-group-addon"> Product name:</span>
<input class="form-control" id="id" name="id" type="text" value="" />
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
</div>
</form>
<form action="/Products/Index" method="post">
<label>Product name:</label>
<div class="input-group">
<input class="form-control" id="id" name="id" type="text" value="" />
<span class="input-group-btn">
<input type="submit" value="Filter" class="btn btn-default" />
</span>
</div>
</form>
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
I'm attempting to have a glyphicon inside of the input field but for some reason it's outside of text box.
<!-- Panel -->
<div class="panel panel-default hidden-xs">
<div class="row">
<div class="col-sm-5 col-sm-offset-1">
<form>
<p><strong>Enter your number and we'll text you a link</strong></p>
<label class="sr-only">Phone Number</label>
<input class="form-control phone-txt" type="text" placeholder="Phone Number">
<button class="btn btn-submit" type="submit">
<span class="glyphicon glyphicon-arrow-right"></span>
</button>
</form>
</div>
<div class="col-sm-5">
<p><strong>Or visit an app store to download now!</strong></p>
<a class="btn btn-default btn-lg" href="#">iOS</a>
<a class="btn btn-default btn-lg" href="#">Android</a>
</div>
</div>
</div><!-- End panel -->
It looks like you have that glyphicon attached to the button. You might try something like this...
<input type="text" class="form-control phone-txt" placeholder="Phone Number" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-arrow-right"></span></span>