The glyphicons inside of the input-group-addon are not aligned vertically, they seems to be hanging lower by several px.
I looked at the posts on this page:
Bootstrap input-group-addon Not Vertically Aligned
but none of them soved my problem.
here's my code:
<div class="input-group">
<input type="text" style='font-size: 15px;' id="email_input" class="input form-control big"
value="" name="email_input" data-required_mark="required" data-field_type="email"
data-original_id="email" placeholder="Email address">
<span class="input-group-addon">
<i id="email_error_X" class="error_glyphicon glyphicon glyphicon-remove-sign"
style="display: inline-block;">
</i>
</span>
</div>
and here's some of my css:
.error_glyphicon {
display: none;
font-size: 30px;
color: red;
/* background-color: yellow; */
text-shadow: 2px 2px 4px #000000;
}
yes, the display: none and display: inline-block are contradictory, but the latter overrides the former, as I want it.
And of course I'm not getting any error messages or anything.
here's a snippet of the result:
enter image description here
as you can see the symbol is not aligned.
Related
Is there a way to make the vertical spacing between radio buttons even? If you look at the image, you can see that the vertical spacing is uneven, and it causes me great personal pain. I thought it was because of the superscripts, so I put each and every button structure in a div and used CSS to set the height of those divs to so something large. It didn't matter how tall I made the divs. They did spread out vertically, but they remained unevenly spaced (like the narrow space between Quadratic and Inverse was always narrower than everything else).
.mathClass {
font-family: serif;
font-weight: 500;
font-size: 110%;
margin: 0;
padding: none;
}
.radioClass {
display: block;
position: relative;
padding-left: 20px;
padding-top: 0;
padding-bottom: 0 margin: 0px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radioMark {
position: absolute;
bottom: 4px;
left: 0;
height: 12px;
width: 12px;
background-color: #D0D0D0;
border-radius: 50%;
border: 1px solid #4C6A94;
}
Models:
<form>
<label class="radioClass"> None
<input type="radio" onclick="computeAll()" name="usefit" id="fitNone" checked>
<span class="radioMark"></span>
</label>
<label class="radioClass"> Exactly Proportional :  <i class="mathClass">y = x</i>
<input type="radio" class="radioClass" onclick="computeAll()" name="usefit" id="yEqualsX">
<span class="radioMark"></span>
</label>
<label class="radioClass"> Proportional :  <i class="mathClass">y = Ax</i>
<input type="radio" class="radioClass" onclick="computeAll()" name="usefit" id="yEqualsAX">
<span class="radioMark"></span>
</label>
<label class="radioClass"> Linear : <i class="mathClass">y = Ax + B </i>
<input type="radio" onclick="computeAll()" name="usefit" id="fitLinear">
<span class="radioMark"></span>
</label>
<label class="radioClass"> Square Law : <i class="mathClass">y = Ax<sup>2</sup></i>
<input type="radio" onclick="computeAll()" name="usefit" id="fitSquare">
<span class="radioMark"></span>
</label>
<label class="radioClass"> Quadratic :  <i class="mathClass">y = Ax<sup>2</sup> + Bx + C</i>
<input type="radio" onclick="computeAll()" name="usefit" id="fitQuadratic">
<span class="radioMark"></span>
</label>
<label class="radioClass"> Inverse :  <i class="mathClass">y = A/x</i>
<input type="radio" onclick="computeAll()" name="usefit" id="fitInverse">
<span class="radioMark"></span>
</label>
<label class="radioClass"> Inverse Square :  <i class="mathClass">y = A/x<sup>2</sup></i>
<input type="radio" onclick="computeAll()" name="usefit" id="fitInverseSquare">
<span class="radioMark"></span>
</label>
I figured out how to make the lines evenly spaced. By examining the page carefully, I figured out that if label contains text with a superscript, then an extra 4 pixels of vertical padding are added to the label. Putting each label in a fixed height div doesn't help, because the padding still shifts the label within the div.
The (completely and totally inelegant) fix was to manually add 4 pixels of top padding to the labels that don't contain superscripts. I did this in the HTML with a style= because there are so many separate entries in the CSS associated with styling the radio buttons. Creating separate classes for radio buttons with and without superscript labels and duplicating all that CSS seemed silly.
I have a simple daterange input box on my webpage. I am trying to add a simple calender glyphicon to it (inside the box). No matter what i try it doesnt show up:
My code:
<div class="col-xs-6 date-range form-group has-feedback" id="date_range">
<input name="daterange" class="form-control pull-right" style="width: 40%">
<i class="fa fa-calender form-control-feedback"></i>
</div>
However It only shows up as :
Im am trying for something like this:
Maybe your problem is that you are saying you want a .glyphicon icon but in your code you have .fa. fa = font-awesome, not glyphicon.
Try this code:
<div class="form-group has-feedback">
<asp:TextBox ID="txtPassword" runat="server" CssClass="form-control" TextMode="Password" placeholder="Password"></asp:TextBox>
<span class="glyphicon glyphicon-asterisk form-control-feedback"></span>
</div>
First, you're probably using the incorrect class and HTML element. fa and fa-calendar are font-awesome classes to add those icons. You want to use glyphicon and glyphicon-calendar in your HTML <span> class as well.
Second, you could use a wrapper and some CSS to achieve this. See the snippet below:
.input-wrapper {
border: 1px solid #ccc;
position: relative;
padding-left: 20px;
}
.input-wrapper input { // Remove the borders
border: none;
outline: none;
border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
}
.input-wrapper span.glyphicon {
position: absolute;
top: 10px;
left: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-xs-6 date-range form-group has-feedback" id="date_range">
<div class="input-wrapper">
<span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
<input name="daterange" class="form-control">
</div>
</div>
The removal of the default borders from Bootstrap CSS can be found here: Override twitter bootstrap Textbox Glow and Shadows
I have a header-div on my Site. Inside the header I want to have a login-form in-line on the right side.
css:
#header {
position: absolute;
top: 0;
width: 100%;
height: 45px;
padding: 5;
background: #fff;
border-bottom: 1pt solid #ccc;
text-align: right;
font-weight: bold;
}
#header div {
/*display: inline-block;*/
cursor: pointer;
/*padding: 4px;*/
float: right;
text-decoration: none;
font-size: 15px;
margin-right: 5px;
}
#submitButton {
float:right;
}
html:
<div id="header">
<div id="login">
<form class="form-inline" role="form">
<div class="row">
<button type="submit" class="btn btn-default" id="submitButton">Login</button>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
<input type="email" class="form-control" placeholder="Enter email" />
</div>
</div>
<div class="form-group col-sm-3">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
<input type="password" class="form-control" placeholder="password" />
</div>
</div>
</div>
</form>
</div>
</div>
That's what I have so far:
http://jsfiddle.net/n5qmc/254/
But if I go in the password form and press TAB I don't get in the email input field. Because of the float:right thing. I need to do this somehow different.
What is the right way to do this? Thanks!
What you need is tabindex but as your html is not good and in bootstrap you have used your own style so tabindex got different behaviour.
I have updated your fiddle with changes in html and css. Please check and let me know if its ok for you..
I have removed float and also removed extra margin which were causing problem now if you will use tab then it will go one by one and also will work better in resizing. I have also changed html so email field will be first in both case.
I have a page at http://zackelx.com/50/SO_a9.html with a BUY button. When you go to the page with Chrome and click the button a checkout form comes up where the blue Pay button is located correctly under the last input field:
But if you go to the page with Safari you get:
I'm using Safari 5.1.7 on a Windows 7 machine.
The HTML for the checkout form around the Pay button is:
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="size, color, etc."/><br />
<div class="button">
<div class="inner">
<button type="submit">
<span class="pay_amount">123</span>
</button>
</div>
</div>
The browser should place div.button underneath the input#instructions element, and Chrome does that. But Safari places it a few pixels down from the top of the input element, as if div.button had a style something like position:relative; top:-20px. But there's nothing like that, and using the Safari inspector I don't see anything that would keep div.button from being placed completely under input#instructions.
Does anyone see what's going on here?
whole code for the pop up form:
<form action="" method="POST" id="checkout_form" autocomplete="off">
<label id="state">state</label>
<input type="text" size="20" id="checkout_form_state" class="state generic" placeholder="NY" autocomplete="" required=""><br>
<label id="cc">cc#</label>
<input type="text" size="20" id="checkout_form_cc_number" class="cc-number" x-autocompletetype="cc-number" required=""><br>
<label id="exp">exp</label>
<input type="text" id="checkout_form_cc_exp" class="cc-exp" x-autocompletetype="cc-exp" placeholder="MM/YY" required="" maxlength="9">
<label id="CVC">cvc</label>
<input type="text" class="cc-cvc" x-autocompletetype="cc-csc" placeholder="CVC" required="" maxlength="4" autocomplete=""><br>
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="black"><br>
<div class="button">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
<img id="padlock" src="https://zackel.com/images/padlock_30.jpg" alt="padlock">
<img id="creditcards" src="https://zackel.com/images/creditcards.jpg" alt="creditcards">
<div id="validation"></div>
</form>
css:
#checkout_form {
position: relative;
top: 24px;
left: 43px;
width: 224px;
display: inline;
}
You are seeing Safari-specific rendering issues related to the positioning used.
Solution:
You don't need to change any of the HTML, just overwrite the CSS by placing the following CSS at the end of your stylesheet:
I tested it in Safari (Windows) v5.1.7, and it seems to work fine.
For the #checkout_form element, top: auto/left: auto are used to reset the positioning that was previously being used. I gave the element a width of 100%, and used padding to position the elements. box-sizing: border-box is used to include the padding in the element's width calculations. The vendor prefixes are used to support older browsers (-webkit- in Safari's case).
For the parent button wrapper element and the credit card image, margin: 10px 0 0 50px was essentially used to displace the element and centered it below the field elements. It's worth pointing out that text-align: center on the parent #checkout_form element was being used to center the elements.
I presume that you wanted the #padlock element hidden, thus display: none.
#checkout_form {
top: auto;
left: auto;
width: 100%;
display: block;
padding: 25px 38px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
text-align: center;
}
#checkout_form .button,
img#creditcards {
margin: 10px 0 0 50px;
}
#checkout_form .button button {
position: static;
}
#checkout_form img#padlock {
display: none;
}
You have style for the form element
#checkout_form {
position: relative;
top: 24px;
left: 43px;
width: 224px;
display: inline;
}
display:inline; is what is causing the problem, and makes the button look like its floating. and not correctly rendered in safari. I dont know the cause of the issue in safari, but I have a workaround which works(I tried on on your website and it perfectly works on chrome and safari).
Change your markup a little, add a div tag inside the form to contain only the labels and the inputs but not the button you want to render on the next line.
<form action="" method="POST" id="checkout_form" autocomplete="off">
<div style="display: inline;">
<label id="email">email</label>
<input type="email" size="20" id="checkout_form_email" class="email generic" placeholder="john#comcast.net" required="" autocomplete=""><br>
<label id="phone">phone</label>
<input type="text" size="20" id="checkout_form_phone" class="phone generic" placeholder="(209) 322-6046" autocomple="" required=""><br>
<label id="name">name</label>
<input type="text" size="20" id="checkout_form_name" class="name generic" placeholder="John Doe" autocomplete="" required=""><br>
<label id="street">street</label>
<input type="text" size="20" id="checkout_form_street" class="street generic" placeholder="123 Maple St." autocomplete="" required=""><br>
<label id="city">city</label>
<input type="text" size="20" id="checkout_form_city" class="city generic" placeholder="San Jose" autocomplete="" required=""><br>
<label id="state">state</label>
<input type="text" size="20" id="checkout_form_state" class="state generic" placeholder="NY" autocomplete="" required=""><br>
<label id="cc">cc#</label>
<input type="text" size="20" id="checkout_form_cc_number" class="cc-number" x-autocompletetype="cc-number" required=""><br>
<label id="exp">exp</label>
<input type="text" id="checkout_form_cc_exp" class="cc-exp" x-autocompletetype="cc-exp" placeholder="MM/YY" required="" maxlength="9">
<label id="CVC">cvc</label>
<input type="text" class="cc-cvc" x-autocompletetype="cc-csc" placeholder="CVC" required="" maxlength="4" autocomplete=""><br>
<label id="instr">instr</label>
<input type="text" id="instructions" placeholder="black"><br>
</div>
<div class="button" style="display: inline-block;">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
<img id="padlock" src="https://zackel.com/images/padlock_30.jpg" alt="padlock">
<img id="creditcards" src="https://zackel.com/images/creditcards.jpg" alt="creditcards">
<div id="validation"></div>
</form>
I have wrapped your form with a div with style display-inline,
and add a style display:inline-block to the div in which you have wrapped your button.
<div class="button" style="display: inline-block;">
<div class="inner">
<button type="submit">
<span class="pay_amount">Pay $12.00</span>
</button>
</div>
</div>
remove the position relative css properties and add margin in your css.
**Previous code:**
#checkout_form button {
/* position:relative; */
/* top:9px; */
/* left:71px; */
height:34px;
width:180px;
/* background-image:linear-gradient(#47baf5,#2378b3); */
border:none;
border-radius: 6px;
/* blue gradient */
background: #17b4e8;
background: -moz-linear-gradient(#47baf5,#2378b3);
background: -webkit-linear-gradient(#47baf5,#2378b3);
background: -o-linear-gradient(#47baf5,#2378b3);
background: -ms-linear-gradient(#47baf5,#2378b3);/*For IE10*/
background: linear-gradient(#47baf5,#2378b3);
}
**New css:**
#checkout_form button {
height:34px;
width:180px;
/* background-image:linear-gradient(#47baf5,#2378b3); */
border:none;
border-radius: 6px;
/* blue gradient */
background: #17b4e8;
background: -moz-linear-gradient(#47baf5,#2378b3);
background: -webkit-linear-gradient(#47baf5,#2378b3);
background: -o-linear-gradient(#47baf5,#2378b3);
background: -ms-linear-gradient(#47baf5,#2378b3);/*For IE10*/
background: linear-gradient(#47baf5,#2378b3);
margin: 9px 0 0 71px;
}
I am using bootstrap by default textbox taking full width of column and I want to put search icon at the end to textbox.
My code is like this:
<div class="container">
<div class="row">
<div class="form-group col-lg-4">
<label class="control-label">Name</label>
<input id="txtName" class="form-control input-sm" />
<span class="glyphicon glyphicon-search"></span>
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
</div>
I don't want to use input group.
Please suggest an alternate way or alternate html with css.
Here are three different ways to do it:
Here's a working Demo in Fiddle Of All Three
Validation:
You can use native bootstrap validation states (No Custom CSS!):
<div class="form-group has-feedback">
<label class="control-label" for="inputSuccess2">Name</label>
<input type="text" class="form-control" id="inputSuccess2"/>
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
For a full discussion, see my answer to Add a Bootstrap Glyphicon to Input Box
Input Group:
You can use the .input-group class like this:
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
For a full discussion, see my answer to adding Twitter Bootstrap icon to Input box
Unstyled Input Group:
You can still use .input-group for positioning but just override the default styling to make the two elements appear separate.
Use a normal input group but add the class input-group-unstyled:
<div class="input-group input-group-unstyled">
<input type="text" class="form-control" />
<span class="input-group-addon">
<i class="fa fa-search"></i>
</span>
</div>
Then change the styling with the following css:
.input-group.input-group-unstyled input.form-control {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.input-group-unstyled .input-group-addon {
border-radius: 4px;
border: 0px;
background-color: transparent;
}
Also, these solutions work for any input size
Adding a class with a width of 90% to your input element and adding the following input-icon class to your span would achieve what you want I think.
.input { width: 90%; }
.input-icon {
display: inline-block;
height: 22px;
width: 22px;
line-height: 22px;
text-align: center;
color: #000;
font-size: 12px;
font-weight: bold;
margin-left: 4px;
}
EDIT
Per dan's suggestion, it would not be wise to use .input as the class name, some more specific would be advised. I was simply using .input as a generic placeholder for your css
<input type="text" name="whatever" id="funkystyling" />
Here's the CSS for the image on the left:
#funkystyling {
background: white url(/path/to/icon.png) left no-repeat;
padding-left: 17px;
}
And here's the CSS for the image on the right:
#funkystyling {
background: white url(/path/to/icon.png) right no-repeat;
padding-right: 17px;
}
I liked #KyleMit's answer on how to make an unstyled input group, but in my case, I only wanted the right side unstyled - I still wanted to use an input-group-addon on the left side and have it look like normal bootstrap. So, I did this:
css
.input-group.input-group-unstyled-right input.form-control {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.input-group-unstyled-right .input-group-addon.input-group-addon-unstyled {
border-radius: 4px;
border: 0px;
background-color: transparent;
}
html
<div class="input-group input-group-unstyled-right">
<span class="input-group-addon">
<i class="fa fa-envelope-o"></i>
</span>
<input type="text" class="form-control">
<span class="input-group-addon input-group-addon-unstyled">
<i class="fa fa-check"></i>
</span>
</div>
You can do it in pure CSS using the :after pseudo-element and getting creative with the margins.
Here's an example, using Font Awesome for the search icon:
.search-box-container input {
padding: 5px 20px 5px 5px;
}
.search-box-container:after {
content: "\f002";
font-family: FontAwesome;
margin-left: -25px;
margin-right: 25px;
}
<!-- font awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="search-box-container">
<input type="text" placeholder="Search..." />
</div>