Ok I've got headache at this point and this thing irritates me. (Hours wasted for this)
For some reason, font awesome icon has bottom margin while bootstrap's glyph seems fine.
Please check http://jsfiddle.net/damjd2sj/
<body>
<div class="container">
<form>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="fa fa-camera-retro form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<!-- /container -->
Set line-height for the form input
.form-control-feedback.fa {
color: #3c763d;
line-height: 34px;
}
JSFiddle
The problem was that the .fa line-height: 1 was overriding default .form-control-feedback line-height: 34px
Related
I have a form that I want to center on the page. The labels are centered but for some reason, I can't center the input with the form-control class.
It is rendering like this right now...
[EDIT: the display: block; inside form-control is causing the issue. Not sure why, how can I disable it]
#centered {
text-align: center;
}
<div id='centered'>
<span class="form-group">
<h5 class="label">Email</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Name</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Create A Password</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Confirm Password</h5>
<input class="form-control" id="ex2" type="text">
</span>
<input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
</div>
You can try to change the display property of all form-control inside that div:
#centered .form-control {
display: inline;
}
Use the class mx-auto
/* CSS used here will be applied after bootstrap.css */
#centered {
text-align: center;
width:100px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id='centered' class="mx-auto">
<span class="form-group">
<h5 class="label">Email</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Name</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Create A Password</h5>
<input class="form-control" id="ex2" type="text">
</span>
<span class="form-group">
<h5 class="label">Confirm Password</h5>
<input class="form-control" id="ex2" type="text">
</span>
<input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
</div>
I am having trouble making the radio button area (input-group-addon) the same size in col-sm-4 and col-sm-6 columns. I looked at some other answers where people used min-width and this solution did not work for me. I would like a uniform width for my radio button controls. Here is a visual example. My first radiobutton (input-group-addon) is wider than the second input-groups imgur link
.form-control {
width: 150px;
}
.radio-width {
width: 30px;
}
<div class="container">
<div class="form-group">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon radio-width">
<span class="control-label">
<input type="radio" name="anyDate" value="anyDate">
</span>
</span>
<div class="input-group-addon">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon radio-width">
<span class="control-label">
<input type="radio" name="dateRange" value="dateRange">
</span>
</span>
<div class="input-group-addon">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-2">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</div>
</div>
here is the fiddle https://jsfiddle.net/DTcHh/20504/
I think you are making a bit of confusion with input-group-addon element.
An input-group-addon should be coded as follows:
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
Therefore your code should be like:
<div class="input-group">
<span class="input-group-addon"> <!-- don't need radio-width -->
<input type="radio" name="anyDate" value="anyDate">
</span>
<input type="text" class="form-control input-full">
</div>
Fiddle here.
I'm very sorry if this is just a simple question but I'm really bad when it comes to alignment/positioning of elements and stuff like that so here it goes.
My problem is shown here:
http://imgur.com/a/xscLJ
I just want the glyphicon to appear beside the textfield not above it. Just that. I tried putting it inside the form tag but the result is the same. Here is my code.
<div id="form" class="collapse in">
<div id="loginwrong" style="display: inline-block; vertical-align: top;">
<div id="loginwrong2" style="display: none;">
<span class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em;"></span>
</div>
</div>
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
I also have a script that will show the glyphicon if the password is wrong. (it's basically a password-accepting textfield)
<?php
echo "<script type='text/javascript'>
$('#loginwrong2').show();
</script>";
?>
From http://getbootstrap.com/css/#forms-control-validation
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">#</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>
Example fiddle: https://jsfiddle.net/s8p0xyyc/
if you are using bootstrap, you should use bootstrap to design the form
<?php
echo "<script type='text/javascript'>$('#loginwrong2').show();</script>";
?>
<div class="container">
<div class="row">
<div class="col-md-1">
<span id="loginwrong2" class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em; display:none;"></span>
</div>
<div class="col-md-11">
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
</div>
</div>
PD: this is not a php question
Just add the right classes and move back the span with the incon inside the form
<div id="form" class="collapse in form-group ">
<form method="POST" class="form-inline has-feedback" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
<span id="loginwrong2" class="glyphicon glyphicon-remove-circle form-control-feedback" aria-hidden="true" style="color: red; font-size: 2em;"></span>
</form>
</div>
Thanks for everyone who answered! I got what I want by making a div for the glyphicon and a div for the form. Both divs has the display: inline-block in their styles.
<div id="form" class="collapse in">
<div id="loginwrong" style="display: inline-block; vertical-align: top;">
<div id="loginwrong2" style="display: none;">
<span class='glyphicon glyphicon-remove-circle' style="color: red; font-size: 2em;"> </span>
</div>
</div>
<div style="display: inline-block;">
<form method="POST" class="form-inline" role="form">
<input type="password" name="pw" placeholder="Enter Password" class="form-control">
<input type="submit" class="btn btn-primary" name="submit" value="Submit">
</form>
</div>
</div>
Change your css make <span id="loginwrong2"> {position:absolute;left:12%;top:10%}
See this
http://www.bootply.com/BLgAr0zrLA
Created a form for user input by making use of Bootstrap classes. I have included the simple form inclusion for your perusal.
Issue:
1.) I am trying to place the glyphicon within the input box of the form, however the icon is placed outside. I have called the glyphicon glyohicon-date within the input tag class but the icon is placed outside of the input box. How is it possible for me to input it inside the input box?
Thanks.
<div class="row row-content">
<div class="col-xs-12 col-lg-3">
<p style="padding:20px;"></p>
<h3 align=center>Reserve A Table</h3>
</div>
<div class="col-xs-12 col-sm-9">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Number of Guests</label>
<div class="input-group col-sm-4">
<input type="radio">
<span> 1 </span>
<input type="radio">
<span> 2 </span>
<input type="radio">
<span> 3 </span>
<input type="radio">
<span> 4 </span>
<input type="radio">
<span> 5 </span>
<input type="radio">
<span> 6 </span>
</div>
</div>
<div class="form-group">
<label for="firstname" class="col-sm-2 control-label">Date & Time</label>
<div class="col-sm-4">
<input type="text" class="form-control glyphicon glyphicon-calendar" aria-hidden="true" id="Date" name="Date" placeholder="Date"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
</div>
<div class="col-sm-4">
<input type="text" class="form-control glyphicon glyphicon-time" id="Time" name="Time" placeholder="Time">
</div>
</div>
<button type="submit" class="btn btn-default">Reserve</button>
</form>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<strong>Warning!</strong> Please <strong>call</strong> us to reserve for more than six guests.
</div>
</div>
</div>
Have managed to solve it from the given link: With optional icons
<div class="form-group has-feedback">
<label for="firstname" class="col-sm-2 control-label">Date & Time</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="Date" name="Date" placeholder="Date">
<span class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></span>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="Time" name="Time" placeholder="Time">
<span class="glyphicon glyphicon-time form-control-feedback" aria-hidden="true"></span>
</div>
</div>
<div class="form-group form-inline">
<label for="datetime" class="col-sm-2 control-label">Date and Time</label>
<div class="col-sm-5">
<div class="form-group has-feedback">
<input type="text" class="form-control" id="datetime" name="datetime" placeholder="Date">
<i class="glyphicon glyphicon-calendar form-control-feedback"></i>
</div>
</div>
<div class="col-sm-5">
<div class="form-group has-feedback">
<input type="text" class="form-control" id="datetime" name="datetime" placeholder="Time">
<i class="glyphicon glyphicon-time form-control-feedback"></i>
</div>
</div>
</div>
This is a coursera assignment of Bootstrap
using the "With optional icons" method in Bootstrap you can achieve this:
for example, my answer to this question:
<div class="form-group has-feedback">
<label class="col-sm-2 control-label" for="date-choose">Date and Time</label>
<div class="col-sm-5">
<input type="date" class="form-control" id="date-choose" placeholder="Date">
<i class="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true"></i>
</div>
</div>
you can refer to the link below to find what you want:
http://getbootstrap.com/css/#forms-control-validation
The one more thing you have to know is that this only adds the icon to the input box but not changes the default action of the JavaScript behind it, so the icon you are adding has no response unless you change the default event of this input box.
how can i fixed top my cross button ?
help me please !
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid user-information" id="registerid">
<button class="btn btn-lg btn-blue-cross fixed " type="submit" style="float:right">X</button>
<div class="row">
<div class="col-md-4"></div>
<div class="animatable bounceIn">
<div class="col-md-4">
<form class="form-horizontal error" novalidate="">
<div class="control-group error">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Name" required="" minlength="3">
</div>
<p class="help-block"></p>
</div>
<div class="control-group error">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span>
<input id="email" type="email" required="" name="email" aria-invalid="true" class="form-control" placeholder="...#gmail.com">
</div>
<p class="help-block"></p>
</div>
<div class="control-group error">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required="" minlength="8">
</div>
<p class="help-block"></p>
</div>
<div class=" control-group error">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span></span>
<input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password" data-validation-matches-message="Must match confirm password entered above" data-validation-matches-match="password" required="">
</div>
<p class="help-block"></p>
</div>
<div class="control-group">
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span></span>
<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required="" minlength="11">
</div>
<p class="help-block"></p>
</div>
<div class="control-group">
<button class="btn btn-success btn-block" type="submit" style="float:right">Submit</button>
<div class="input-group">
<input id="terms-and-conditions" type="checkbox" data-validation-required-message="You must agree to the terms and conditions" required="" name="terms-and-conditions" aria-invalid="true"> I agree to the terms and conditions
<p class="help-block" style="display:none;"></p>
</div>
</div>
</form>
</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
see , my cross button is not fix . how can i fix my cross button .
i know only navbar can be fixed .
.btn-blue-cross{
position:fixed;
}
it will working but when i am doing my screen small like as mobile version , then button will hide .
how can i solve this problem ?
Try:
.btn-blue-cross{
position:fixed;
top: 0;
z-index: 10;
}
Add this following code in css button which you want to be fixed on top on scroll.
.btn-blue-cross{
position: fixed;
top: 10px;
right: 10px;
}
Let me know if it works and if thats what you wanted
css will be:
.btn-blue-cross{
position:fixed;
top: 0;
z-index: 10;
}
If you just want your button to remain visible change your HTML structure to account for it by placing it in a column and then using an offset for the form. Change the btn from fixed to absolute in your css if you dont want it to scroll with the page.
See working Snippet.
.btn-blue-cross {
position: absolute;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid user-information" id="registerid">
<div class="row">
<div class="col-xs-2 col-md-1">
<button class="btn btn-lg btn-blue-cross fixed " type="submit" style="float:right">X</button>
</div>
<div class="animatable bounceIn">
<div class="col-xs-10 col-md-4 col-md-offset-3">
<form class="form-horizontal error" novalidate="">
<div class="control-group error">
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-user" aria-hidden="true"></span></span>
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="Name" required="" minlength="3">
</div>
<p class="help-block"></p>
</div>
<div class="control-group error">
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span></span>
<input id="email" type="email" required="" name="email" aria-invalid="true" class="form-control" placeholder="...#gmail.com">
</div>
<p class="help-block"></p>
</div>
<div class="control-group error">
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-lock" aria-hidden="true"></span></span>
<input type="password" class="form-control" id="password" name="password" placeholder="Password" required="" minlength="8">
</div>
<p class="help-block"></p>
</div>
<div class=" control-group error">
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-link" aria-hidden="true"></span></span>
<input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm Password" data-validation-matches-message="Must match confirm password entered above" data-validation-matches-match="password" required="">
</div>
<p class="help-block"></p>
</div>
<div class="control-group">
<div class="input-group input-group-lg"> <span class="input-group-addon" id="sizing-addon1"> <span class="glyphicon glyphicon-phone" aria-hidden="true"></span></span>
<input type="text" class="form-control" id="mobile" name="mobile" placeholder="Mobile Number" required="" minlength="11">
</div>
<p class="help-block"></p>
</div>
<div class="control-group">
<button class="btn btn-success btn-block" type="submit" style="float:right">Submit</button>
<div class="input-group">
<input id="terms-and-conditions" type="checkbox" data-validation-required-message="You must agree to the terms and conditions" required="" name="terms-and-conditions" aria-invalid="true">I agree to the terms and conditions
<p class="help-block" style="display:none;"></p>
</div>
</div>
</form>
</div>
</div>
</div>
</div>