Is there any bootstrap3 way to put all these fileds into one row? If it's possible I want to keep the input-group solution too.
<div class="input-group">
<input type="text" name="name" placeholder="Name" class="form-control" required>
<input type="text" name="tel" placeholder="Phone" class="form-control">
<input type="text" name="email" placeholder="E-mail" class="form-control">
<button type="submit" class="btn btn-primary">
<i class="fa fa-btn fa-plus"></i>
</button>
</div>
Is this possible without CSS style hacking?
You can do it in this way
<div class="form-inline">
<input type="text" name="name" placeholder="Name" class="form-control" required>
<input type="text" name="tel" placeholder="Phone" class="form-control">
<input type="text" name="email" placeholder="E-mail" class="form-control">
<button type="submit" class="btn btn-primary">
<i class="fa fa-btn fa-plus"></i>
</button>
</div>
Related
I found the code I need to embed into Google Sites to a add google search box, but I don't know how to make it larger. Can someone help me scale this up?
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
You could only add the font-size property in CSS
.form-control.search {
font-size: 40px;
}
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
or you can set a width and height
.form-control.search {
width: 80vw;
height: 50px;
}
<form action="https://www.google.com/search" class="searchform" method="get" name="searchform" target="_blank">
<input name="sitesearch" type="hidden" value="example.com">
<input autocomplete="on" class="form-control search" name="q" placeholder="Search in example.com" required="required" type="text">
<button class="button" type="submit">Search</button>
</form>
Obviously you can have a combination of both depending on what/how you want to make it larger.
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 am trying to add this simple search form while applying form inline class so that controls appear next to each other, but I get the controls displayed above each other and the search bottom in white and looking strange, so can someone please tell me what I am missing here?
<div class="container">
<div class="row">
<div class="col-md-8">
<form class="form-inline" action="#" method="post">
Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
<select id="searchon" name="searchon">
<option value="0">First Name</option>
<option value="1">Last Name</option>
</select>
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
</div>
From Bootstrap reference, for inline forms :
This only applies to forms within viewports that are at least 768px
wide.
and as far as your layout is concerned,
<div class="container">
<div class="row">
<div class="col-md-8">
<form class="form-inline" action="#" method="post">
Search<input type="text" id="search" name="search" class="input-small" placeholder="Search...">
<select id="searchon" name="searchon">
<option value="0">First Name</option>
<option value="1">Last Name</option>
</select>
<button type="submit" class="btn">Search</button>
</form>
</div>
</div>
</div>
its perfectly fine..inline :
working demo
I had similar issue with form-inline. For me input-group within form-inline worked to keep following input and button in a row next to each other instead of one on top of the other.
<form class="form-inline">
<div class="input-group">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</div>
</form>
I had a similar issue with a code snippet from bootstrap. I found that the 2 classes 'control-group' and 'controls' broke the inline. removing the 2 classes fixed it for me.
<div class="control-group">
<label class="control-label" for="Name">Name</label>
<div class="controls">
<input type="text" id="Name" placeholder="Name">
</div>
</div>
to:
<label class="control-label" for="Name">Name</label>
<input type="text" id="Name" placeholder="Name">
Yes! removing the second class from the div worked for me.
<form class="form-inline name=" search">
<fieldset>
<div class="form-group">
<input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO">
<input class="btn btn-lg btn-primary" type="submit" value=" Programe Tag " />
</div>
</fieldset>
to
<form class="form-inline name=" search">
<fieldset>
<input name="rego" id="search_box" style="text-transform:uppercase" maxlength="6" type="text" class="form-control input-md" placeholder="PLATE NO">
<input class="btn btn-lg btn-primary" type="submit" value=" Programe Tag " />
</fieldset>