Custom input style with a icon inside and button in the right - html

I am trying to get a custom input style have a glyph icon inside and have a button on the right that says go.
Here is my js fiddle with it. jsfiddle
<div class="form-group">
<div class="icon-addon addon-sm">
<input type="text" placeholder="Search All Orders" class="form-control" id="Order Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
</div>
</div>
The problem i am having is when i try to add the button on the right it makes the icon disappear when the input is clicked.

Using your fiddle I simply added an absolutely positioned button into your search box. Perhaps this is what you were looking for?
Added button in HTML:
<input type="text" placeholder="Search All Orders" class="form-control" id="Order Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
<button class="button-go">go</button>
Button's CSS:
.button-go {
position: absolute;
right: 0;
top: 0;
height: 30px;
}
https://jsfiddle.net/t6295xrd/

Here is a Demo for what i understood from you i just add the button to your fiddle and add this css to position it on right.
#Order_Search {
padding-right:20px;
}
.go-btn {
position: absolute;
right: 3px;
margin-left: -2.5px;
top: 2px
}
and this is the html
<div class="form-group">
<div class="icon-addon addon-sm">
<input type="text" placeholder="Search All Orders" class="form-control" id="Order_Search">
<label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
<button class="go-btn"> Go </button>
</div>

Related

Everything inside form input is either overlapping or not showing

I was making a login form with animations. If there is only one input field, it works perfect but when I add other input fields, they overlap with each other and the animations don't work properly. The submit button and checkbox gets hidden.
<div class="form">
<div class="inputs">
<input type="text" autocomplete="off" name="name" placeholder=" " required>
<label for="name" class="label-name">
<span class="content-name">username</span>
</label>
<input type="password" name="name" placeholder=" " required>
<label for="name" class="label-name">
<span class="content-name">password</span>
</label>
<div class="hide">
<input type="checkbox" onclick="myFunction()">Show Password
</div>
<button>Login</button>
</div>
</div>
Here is the jsfiddle: https://jsfiddle.net/j2dteaz0/1/
Any help is appreciated. Thanks
Absolute positioning require to use a relative positioning on a parent element.
.inputs > div {
position: relative;
}
.inputs input[type="text"], .inputs input[type="password"]{
...
Edited Fiddle
edit 1 CSS rules for specified input type only
Change the following CSS property as this;
.form{
position: relative;
height: 50%;
width: 50%;
}

Inline form input with label over input centered

I have a form with long labels over each input and I want the input centered underneath each label but I also need the inputs to stay inline. It should look like this below but the inputs should be centered under each long label.
Here is what I have but I am having trouble making the inputs center under the labels.
.question-container {
width: 1000px;
margin: 0 auto;
}
#questions {
margin: 5px 30px;
display: inline-block
}
<div class="form-inline">
<span id="questions">
<label>How much will your house cost?</label>
<input class="form-control" type="text" placeholder="input">
</span>
<span id="questions">
<label>What is the most you can pay monthly?</label>
<input class="form-control" type="text" placeholder="input">
</span>
<span id="questions">
<label>What is your Current Monthly Rent?</label>
<input class="form-control" type="text" placeholder="input">
</span>
</div>
<div id='centered'>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
Any help would be greatly appreciated!
Got it!
Simply had to add text-align:center; to the span
#questions {
margin:5px 30px;
display:inline-block;
text-align:center;
}

Making a bootstrap search bar with 2 inputs and one button, on a single line

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>

Left div with fixed width and right div with fluid width

I have a situation where I cannot change the HTML and everything has to be done with CSS.**** In the image below you can see there are text on either side of the input box. I need to have all text to be on left side. The span containing the text has a fixed width of 30 pixels. And I need the input box to have a fluid width so that it will fill the rest of the container. I just added a background color to the first container for illustration purposes.
<div class="input-group input-prepend">
<input name="monthlyBudget" class="form-control" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget" type="text">
<span class="input-group-addon add-on">$</span>
</div>
Entire HTML for the form:
<form class="calculators-form-inputs no-submit" id="form-calculator-affordability" name="calculator-affordability" data-parsley-validate="">
<div class="calculators-info-text">
<h2>How Much Car Can I Afford?</h2>
<p>Great question. Fill in the boxes below to help with the answer and determine what price you can afford to pay for a car.</p>
</div>
<div class="calculators-form-field credit-amount">
<div class="calculators-labels">
<label>Your monthly budget <i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i>
<a class="calculators-helper-link" href="#" data-toggle="modal" data-target="#budgetCalModal">(Help me)</a>
</label>
</div>
<div class="calculators-sliders">
<input type="range" value="0" min="50" max="5000" step="50" tabindex="-1" data-bind="value: monthlyBudget">
</div>
<div class="calculators-inputs">
<div class="input-group input-prepend">
<span class="input-group-addon add-on">$</span>
<input name="monthlyBudget" class="form-control" type="text" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget">
</div>
</div>
<div class="calculators-inputs-error" id="affordabilityCalErrorBudget"></div>
</div>
<div class="calculators-form-field credit-term">
<div class="calculators-labels">
<label>Loan term<i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i>
</label>
</div>
<div class="calculators-sliders">
<input type="range" value="0" min="12" max="84" step="12" tabindex="-1" data-bind="value: loanTerm">
</div>
<div class="calculators-inputs">
<div class="input-group input-append">
<input name="loanTerm" class="form-control" type="text" placeholder="0" required="" data-bind="number, live: loanTerm" data-parsley-min="12" data-parsley-max="84" data-parsley-type="digits" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-pattern="^(12|24|36|48|60|72|84)$" data-parsley-errors-container="#affordabilityCalErrorTerm">
<span class="input-group-addon add-on">mo</span>
</div>
</div>
<div class="calculators-inputs-error" id="affordabilityCalErrorTerm"></div>
</div>
<div class="calculators-form-field credit-apr">
<div class="calculators-labels">
<label>APR*<i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i>
</label>
</div>
<div class="calculators-sliders">
<input type="range" value="0" min="0" max="30" step="0.1" tabindex="-1" data-bind="value: interestRate">
</div>
<div class="calculators-inputs">
<div class="input-group input-append">
<input name="interestRate" class="form-control" type="text" placeholder="0" required="" data-bind="number, live: interestRate" data-parsley-min="0" data-parsley-max="30" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-pattern="^[0-9]\d*(\.\d+)?$" data-parsley-maxlength="5" data-parsley-errors-container="#affordabilityCalErrorApr">
<span class="input-group-addon add-on">%</span>
</div>
</div>
<div class="calculators-inputs-error" id="affordabilityCalErrorApr"></div>
</div>
<div class="calculators-form-field credit-reduction">
<div class="calculators-labels">
<label>Down payment<i class="label-tooltip icon-info-sign glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip"></i>
</label>
</div>
<div class="calculators-sliders">
<input type="range" value="0" min="0" max="20000" step="100" tabindex="-1" data-bind="value: dPayment">
</div>
<div class="calculators-inputs">
<div class="input-group input-prepend">
<span class="input-group-addon add-on">$</span>
<input name="downPayment" class="form-control" type="text" placeholder="0" data-bind="number, live: dPayment" data-parsley-min="0" data-parsley-max="20000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorDown">
</div>
</div>
<div class="calculators-inputs-error" id="affordabilityCalErrorDown"></div>
</div>
<div class="calculators-actions">
<div class="calculators-buttons">
<input type="submit" value="Calculate">
</div>
</div>
</form>
What I have now:
This is what I need:
The original table and table-cell solution - http://jsfiddle.net/0jvnryhx/1/
New solution due to the updates from #ChaniLastnamé http://jsfiddle.net/8pq6thr7/
.input-group {
margin-bottom: 20px;
position: relative;
overflow: hidden;
clear: both;
}
.add-on {
width: 30px;
position: absolute;
left: 0;
top: 0;
}
.form-control {
margin-left: 30px;
}
Then you can manually adjust the width of the input the boxes to make them fit the container (visually full width), everything needs to be fixed width though.
Should be simple enough to do with just a calc().
.form-control{
width: calc(100% - 30px);
}
Here is a CodePen
Can you support flexbox? If so this is your solution:
.input-group {
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
/* make it pretty */
background: lightgrey;
/* whatever width you want */
width: 300px;
}
.input-prepend span {
/* that width you said needed to be there */
width: 30px;
/* align the $ against the input */
text-align: end;
}
.input-prepend input {
/* use all the space */
width: 100%;
/* make the input after the $ in layout */
-webkit-order: 2;
order: 2;
}
<div class="input-group input-prepend">
<input name="monthlyBudget" class="form-control" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget" type="text">
<span class="input-group-addon add-on">$</span>
</div>
If the browsers you need do not support flexbox. There are a few options. First I really really hope you’re able to render the span before the input instead of after the way it is in the code you posted. You also need to ensure there are no spaces in your HTML as that will cause this issue. If this HTML comes from a pre-rendered output you probably won’t have that issue.
If you can make those tweaks to the HTML this is your solution:
.input-group {
/* make it pretty */
background: lightgrey;
/* whatever width you want */
width: 300px;
}
.input-prepend span {
/* can’t set width properly while inline */
display: inline-block;
/* that width you said needed to be there */
width: 30px;
/* align the $ against the input */
text-align: end;
}
.input-prepend input {
/* use all the space minus the 30px from above */
width: calc(100% - 30px);
/* change the way width is calculated */
box-sizing: border-box;
}
<div class="input-group input-prepend"><span class="input-group-addon add-on">$</span><input name="monthlyBudget" class="form-control" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget" type="text"></div>
Finally if you really seriously can’t touch your markup AND you can’t support flexbox. You can do this which is a bit hacky but in the scheme of things not horrible:
.input-group {
/* make it pretty */
background: lightgrey;
/* whatever width you want */
width: 300px;
position: relative;
}
.input-group span {
/* can’t set width properly while inline */
display: inline-block;
/* that width you said needed to be there */
width: 30px;
/* align the $ against the input */
text-align: end;
/* pull this out of flow */
position: absolute;
/* vertically align with input */
top: 2px;
}
.input-group input {
/* use all the space */
width: 100%;
/* allow space for $ */
margin-left: 34px;
}
<div class="input-group input-prepend">
<input name="monthlyBudget" class="form-control" placeholder="0" required="" data-bind="number, live: monthlyBudget" data-parsley-min="50" data-parsley-max="5000" data-parsley-validation-threshold="1" data-parsley-trigger="keyup" data-parsley-errors-container="#affordabilityCalErrorBudget" type="text">
<span class="input-group-addon add-on">$</span>
</div>
Hope that helps!

Input box and checkbox’s heights are different

I made a login box using Bootstrap 3.0.3. On the second line, the password input box’s and check box”s (labelled Auth) heights are different. On mobile, the difference is even more noticeable.
How can I make their heights match?
Bootply
<form name="fhead" method="post" onsubmit="return fhead_submit(this);" autocomplete="off" role="form" class="form-inline">
<div id="outlogin_box" name="outlogin_box">
<input type="hidden" name="url" value="<?=$outlogin_url?>">
<input type="text" class="form-control input-sm" name="mb_id" maxlength="20" itemname="id" placeholder="login id">
<div class="input-group"><!-- needs height alignment -->
<input type="password" class="form-control input-sm" name="mb_password" id="outlogin_mb_password" maxlength="20" itemname="password" placeholder="password">
<span class="input-group-addon">
<div class="checkbox">
<label>
<input type="checkbox" name="auto_login" title="Remember me" value="1" onclick="if (this.checked) { if (confirm('자동로그인을 사용하시면 다음부터 회원아이디와 패스워드를 입력하실 필요가 없습니다.\n\n\공공장소에서는 개인정보가 유출될 수 있으니 사용을 자제하여 주십시오.\n\n자동로그인을 사용하시겠습니까?')) { this.checked = true; } else { this.checked = false; } }">
Auto
</label>
</div>
</span>
</div>
<div class="input-group">
<button type="submit" class="btn btn-success btn-sm btn-group-justified" >Login</button>
</div>
<div class="input-group">
<div class="btn-group btn-group-justified">
<a class="btn btn-default btn-sm" title="Register" href="<?=$g4[bbs_path]?>/register.php">Register</a>
<a class="btn btn-default btn-sm" title="회원 id, password 찾기" href="javascript:win_password_lost();">아이디찾기</a>
</div>
</div>
</div>
</form>
Change
<input class="form-control input-sm" name="mb_password" ...
to
<input class="form-control" name="mb_password" ...
http://www.bootply.com/98872
You have modified the height of the input by adding a class "input-sm".
Try this very simple:
input[type=checkbox], input[type=radio] {
vertical-align: middle;
position: relative;
bottom: 1px;
}
input[type=radio] {
bottom: 2px;
}
You can set fixed width and height values for HTML textboxes/checkboxes in CSS by doing the following...
input[type="text"] {
width: 10%;
height:3%;
}
input[type="password"] {
width: 10%;
height:3%;
}
input[type="checkbox"] {
height:2%;
}
You can also set them using px instead of percentages.
Hopefully setting a fixed height and width should resolve your conflicting size problems.
Try overriding bootstrap CSS with this:
.input-group-addon .checkbox {
margin: 8px 5px 0 !important;
}
.input-group-addon {
padding:0 !important;
}
change your css of checkbox class display which is display : inline-block to display: inline and the try it
.form-inline .radio,.form-inline .checkbox{display:inline-block;padding-left:0;margin-top:0;margin-bottom:0}
to
.form-inline .radio,.form-inline .checkbox{display:inline;padding-left:0;margin-top:0;margin-bottom:0}
in bootstrap.min.css