I am using external CSS for some style ,
my link tag is as follow ,
<link href="<%=request.getContextPath()%>/css2/form.css" rel="stylsheet" TYPE="text/css">
the CSS file has following content
#CHARSET "ISO-8859-1";
legend {
padding: 0;
margin-top:-20px;
margin-left: -20px;
margin-right:-40px;
margin-bottom: -9px;
border: 0;
color: #999999;
background-color: #918D8D;
}
.input-group{
margin-left:15px;
}
and I used these classes in jsp as follow,
<div class="form-group">
<label for="dob" class="control-label col-xs-4">Date Of
Birth(DOB) :</label>
<div class="col-xs-8">
<div class="col-lg-8 input-group date form_date1" data-date-format="dd MM yyyy" data-link-format="yyyy-mm-dd">
<input type="text" class="form-control " size="10" name="dob" id="date" ">
<span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
why it is not working , here i am trying to add margine to text box.
Not sure which css you want to apply to your textbox. But if you want to apply input-group to your textbox then update your input tag as mentioned below :
<input type="text" class="form-control input-group" size="10" name="dob" id="date" ">
and apply !important to the margin of css input-group as mentioned below :
.input-group{
margin-left:15px !important;
}
Related
I'm new to HTML and I have some questions regarding input tags.
Here I have two inputs seperated by a span tag(-). What I want to do is to wrap two inputs like a single input like the image below.
Do I need to add styles using css or change the whole structure of the code?
<div class="form-group">
<label for="form-realname" class="col">test*</label>
<div class="input-group col">
<input type="text" class="form-control" placeholder="" />
<span class="input-group-text" >-</span>
<input type="text" class="form-control" placeholder="" />
</div>
ideal structure
Here is easy solution:
Set border for inputs to 0 to make them invisible.
Add border 1px with color you need to parent div.
Don't forget to make this parent div display: inline-block;
* {
margin: 0;
padding: 0;
}
input.form-control {
border: 0;
padding: 2px;
}
.input-group {
border: 1px solid gray;
display: inline-block;
}
<div class="form-group">
<label for="form-realname" class="col">test*</label>
<div class="input-group col">
<input type="text" class="form-control" placeholder="" />
<span class="input-group-text" >-</span>
<input type="text" class="form-control" placeholder="" />
</div>
</div>
I want to use the legend html tag to visually wrap a set of similar inputs in a form. It should look similar to how it does when one uses the legend attribute without bootstrap, like is shown here.
I made a bootply example which is here. As one can see: I am trying to create a legend which wraps the First Name and Last name input fields. The styling is not right.
I did already look at this question, but it is different than mine because I am attempting to use a legend within a grid.
Here's a way using custom CSS. Just add this CSS, and add .customLegend to the fieldset that will have a legend you want to display this way. Adjust the positioning, padding, etc as needed.
.customLegend {
border: 1px solid #e5e5e5;
padding: 2em 0 1em;
margin-top: 2em;
position: relative;
}
.customLegend legend {
border: 0;
background: #fff;
width: auto;
transform: translateY(-50%);
position: absolute;
top: 0; left: 1em;
padding: 0 .5em;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<form>
<fieldset class="customLegend row">
<legend>Enter Your Name</legend>
<div class="form-group col-sm-6">
<label for="first_name">First Name:</label>
<input type="text" class="form-control" id="email">
</div>
<div class="form-group col-sm-6">
<label for="last_name">Last Name:</label>
<input type="text" class="form-control" id="pwd">
</div>
</fieldset>
<div class="form-group">
<label for="email">Email address:</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
I am trying to make a search bar using html/bootstrap/Jquery which looks similar to the search bar found here:
https://us.letgo.com/en
So far I have that design but with only one text box:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-offset-3 col-md-6">
<form class="" action="next_page.php" method="GET">
<div class="form-group" id="search_wrapper">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
css
#search_field {
background-transparent;
height:40px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
border-color: #CCCCCC;
outline: none;
}
#search_button {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
position:absolute;
top:0;
right:0;
font-size: 17px;
width:120px;
height:40px;
}
#search_wrapper{
height:40px;
position:relative;
}
When I add another input between the button and input between the input and button, the input just displays below both the button and the text box.
<input type="text" id="search_field" class="form-control" name="search_place" placeholder="Search By Place">
EDIT 1
I made a jsfiddle
https://jsfiddle.net/7v6hc9sz/1/
If that doesnt just link you to it, please let me know in a comment that it doesn't work. I have never used jsfiddle before.
I would recommend leveraging the Bootstrap native styles to the maximum extent possible, as they give you a robust set of tools to build your site.
For this particular issue, you're looking for Bootstrap's Inline Form styles.
Here's an example from their docs:
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form>
You also are looking for Bootstrap Input Groups which will allow you to "pair" the button to the right of the last input.
Note the following things about that code:
1. The form has a class of form-inline. This is important, as it tells Bootstrap to line things up inline.
2. Each pair of label / inputs gets wrapped in a div with the class form-group. This tells Bootstrap to display this "group" (label and input) inline.
3. Each input gets a class of form-control. This tells bootstrap to style it up as an input.
Now, applying those classes to your markup, to achieve what you want, would look something like this:
<!-- Add the class "form-inline" -->
<h3>
Important:<br>form-inline does not appear correctly unless you make the preview pane wide!
</h3>
<form class="form-inline" action="next_page.php" method="GET">
<div class="form-group">
<input type="text" id="search_field" class="form-control" name="search_title" placeholder="Search By Name">
<!-- close the "form-group" div and start a new div -->
</div>
<!-- here we use "input-group" to get the submit tight "against" the input -->
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button type="submit" id="search_button" class="btn btn-default">Search</button>
</span>
</div>
</form>
Here's a Working Fiddle
You just need to make an inline form - the bootstrap website has examples.
It looks like this:
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="inputOne">Input One</label>
<input type="text" class="form-control" id="inputOne" placeholder="Input Two">
</div>
<div class="form-group">
<label class="sr-only" for="inputTwo">Input Two</label>
<input type="text" class="form-control" id="inputTwo" placeholder="Input Two">
</div>
<button type="submit" class="btn btn-default">Search</button>
</form>
Working bootply
Here's a bootply with connected fields by Rachel S
I had to create a custom CSS class to override the default margins for this form:
margin-right: -10px;
As well as remove the rounded corners of the following input element:
border-top-left-radius: 0;
border-bottom-left-radius: 0
See working demo below (need to see in in full-page).
You'd need to add this to your nav bar, of course.
.my-search {
padding: 1px;
margin-right: -10px;
display: inline-block;
}
.my-search2 input#search2 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>my attempt</h2>
<hr/>
<form class="form-inline">
<div class="form-group">
<div class="input-group my-search">
<input type="text" class="form-control" id="search1" placeholder="s1">
</div>
<div class="input-group my-search2">
<input type="text" class="form-control" id="search2" placeholder="s2">
<div class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</div>
</div>
</div>
</form>
I want to add "month" after the input in bootstrap, in the side of it.
I've tried span, pull-left nothing worked. Months is always below
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Months</label>
<input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
</div>
</form>
JSFIDDLE
Just add form-inline to your form..
<form role="form" class="form-inline">
<div class="form-group">
<label for="exampleInputEmail1">Months</label>
<input type="email" class="form-control" style="width: 50%" id="exampleInputEmail1" placeholder="Months"> months
</div>
</form>
Demo: http://www.bootply.com/119625
Try wrapping the elements and specifying the column widths:
HTML
<form role="form">
<div class="form-group">
<div class="pull-left col-xs-9">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<span class="col-xs-3">months<span>
</div>
</form>
CSS
span{
margin-top: 25px;
}
JS Fiddle: http://jsfiddle.net/7rYp7/2/
putting style="display:inline" into the actual input element in question has worked for me.
Listen, I know we are supposed to avoid using style and only use classes defined in CSS but I tried all the example above and this is the only thing that worked.
You can set the following in your CSS (overwriting the bootstrap.css)
.form-group input {
display:inline;
width: 50%;
margin: 5px;
}
You can also use a different selector to be more specific (instead of overwriting it for all inputs) UPDATED:
#exampleInputEmail1{
display:inline;
width: 50%;
margin: 5px;
}
.form-group label {
display: block;
}
Is there anyway bootstrap way/style to add non-editable prefix into the inputbox? such as the dollar sign. the prefix has to be included inside the input box.
currently I'm doing something like this, but the sign is out of the inputbox.
<div class="input-group input-medium ">
<input type="text" class="form-control input-lg" readonly="">
<span class="input-group-btn">
$
</span>
</div>
Twitter Bootstrap Version 3 has a class named input-group-addon for this feature.
You probably want this
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" placeholder="price">
</div>
Js Fiddle Demo - Basic
Update: To remove the background from the $ sign- You just need to overwrite the input-group-addon class
.input-group-addon
{
background-color:#FFF;
}
Js Fiddle Demo - Without Background
If you want to remove the border from right side of $ sign, You can add this css as well
.input-group .input-group-addon + .form-control
{
border-left:none;
}
Js Fiddle Demo - Without Border
HTML:
<div class="col-xs-6" >
<div class="left-inner-addon">
<span>$</span>
<input type="text" class="form-control" placeholder="Amount" />
</div>
</div>
<div class="col-xs-6" >
<div class="right-inner-addon">
<span>$</span>
<input type="search" class="form-control" placeholder="Amount" />
</div>
</div>
CSS:
.left-inner-addon {
position: relative;
}
.left-inner-addon input {
padding-left: 22px;
}
.left-inner-addon span {
position: absolute;
padding: 7px 12px;
pointer-events: none;
}
.right-inner-addon {
position: relative;
}
.right-inner-addon input {
padding-right: 30px;
}
.right-inner-addon span {
position: absolute;
right: 0px;
padding: 7px 12px;
pointer-events: none;
}
jsFiddle
Bootstrap Versions 4 and 5
This functionality changed significantly between versions 3 and 4. The class input-group-addon has been removed in favor of using input-group-text inside of either input-group-prepend or input-group-append.
To prepend text
<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control" placeholder="0.00" />
</div>
To append text
<!-- importing Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="input-group">
<input type="text" class="form-control" placeholder="email" />
<div class="input-group-append">
<span class="input-group-text">#gmail.com</span>
</div>
</div>
To change the background color of the added text
.input-group-text
{
background-color:#FFF;
}
You can to this by setting the input-group a position:relative and absolute positioning the input and the span with higher(than input's z-index) z-index number for span. Also you need to add to the input a padding-left value equal to span's width