On screens >=768px, everything works great. When a user inputs an incorrect username or password, the form fields glow red/yellow/green and get a little glyphicon toward the right side. If you resize smaller than 768px, it switches to the mobile view including a collapsible navbar (where my login form is). On the collapsed navbar, the feedback glyphicons are below the form fields rather than inside of them.
The PHP controls what state to make the fields after doing the login check against mysql. Lines like this <?php echo $form_error['user']; ?> simply place the text 'has-success', 'has-warning', or 'has-error' in the class assignment. Similarly, the <?php echo $form_error['user_glyph']; ?> lines will replace with <span> tags for the glyphicon itself. (See the rendered source at the bottom if this is hard to follow)
Here is the source code I have for the nav:
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BrandLogo</a>
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right" action="login.php" method="post">
<div class="form-group has-feedback <?php echo $form_error['user']; ?>">
<label class="sr-only" for="ip-username">Username</label>
<input type="text" placeholder="Username" class="form-control" name="username" id="ip-username" value="<?php echo $submitted_username; ?>" required/>
<?php echo $form_error['user_glyph']; ?>
</div>
<div class="form-group has-feedback <?php echo $form_error['password']; ?>">
<label class="sr-only" for="ip-password">Password</label>
<input type="password" placeholder="Password" class="form-control glyphicon-ok" name="password" id="ip-password" required/>
<?php echo $form_error['password_glyph']; ?>
</div>
<button type="submit" value="Login" class="btn btn-success">Log in</button>
</form>
</div><!--/.navbar-collapse -->
</div>
</div>
And just to clarify any confusion, here is a rendered source after submitting an invalid password (showing only the <form> block since nothing else is dynamic):
<form class="navbar-form navbar-right" action="login.php" method="post">
<div class="form-group has-feedback has-success">
<label class="sr-only" for="ip-username">Username</label>
<input type="text" placeholder="Username" class="form-control" name="username" id="ip-username" value="some-username" required/>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-feedback has-error">
<label class="sr-only" for="ip-password">Password</label>
<input type="password" placeholder="Password" class="form-control glyphicon-ok" name="password" id="ip-password" required/>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<button type="submit" value="Login" class="btn btn-success">Log in</button>
</form>
The CSS is unaltered bootstrap 3.1.1.
How can I get the small view to work correctly like the other views?
Thanks in advance!
Don't know why it is doing it but if you add:
.navbar-form .has-feedback .form-control-feedback {
top:0;
}
to your css it should fix it.
Also see: Bootstrap 3 has-feedback icon alignment with field sizing doesn't seem to work
I think it is probably a bug in Bootstrap.
I found that the solution was to style the <span> tags inline using style='top:0px;'
I still don't follow exactly why I needed to do this though. It seems on the collapsed view that the navbar class no longer applies (which gives the 0px top value instead of 25px from .has-feedback .form-control-feedback)
This is the css block that does it:
#media (min-width: 768px)
.navbar-form .has-feedback .form-control-feedback
The #media line appears to stop it from effecting the small view. I will use the inline css to work around this since I have no idea what other aspects the reactive code affects.
This CSS should fix it for most cases.
.has-feedback label.sr-only ~ .form-control-feedback {
top: 0;
}
Added bonus, it allows you to use both sr-only labels and non-sr-only labels in your forms on the same site.
Related
I created a Fiddle of my Problem (however in Fiddle it is displayed correctly).
https://jsfiddle.net/rjf8tsbk/1/
As you can see, i have a form with 4 inputs. Whenever i execute this on Webstorm, the website is displayed in chrome but ALL inputs have NO margin (no space). I copied my code to jsfiddle and its looks correct. I wonder if i have an error in webstorm or could this be an error within bootstrap?
This is a picture how it looks like normal :
EDIT (HTML CODE)
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" class="navbar-toggle collapsed">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
LearnYou
</div>
<div class="navbar-collapse collapse">
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Sign in" class="btn btn-success ">
</div>
<div class="form-group">
<input type="button" value="Sign up" class="btn btn-success ">
</div>
</form>
</div>
</div>
</nav>
</body>
EDIT 2:
Looks like the problem comes from "Jade", whenever i execute simple html5 it is rendered correctly but when i use Jade it is displayed wrong.Any Ideas?This my Jade Code:
nav(class="navbar navbar-inverse")
div(class="container")
div(class="navbar-header")
button(type="button" ,class="navbar-toggle collapsed" ,data-toggle="collapse", data-target="#navbar", aria-expanded="false" ,aria-controls="navbar")
span(class="sr-only") Toggle
span(class="icon-bar")
span(class="icon-bar")
span(class="icon-bar")
a(class="navbar-brand" ,href="#") LearnYou
div(id="navbar",class="navbar-collapse collapse")
form(class="navbar-form navbar-right", role="form")
div(class="form-group")
input(type="text", placeholder="Email", class="form-control")
div(class="form-group")
input(type="password", placeholder="Password", class="form-control")
input(type="submit", class="btn btn-success" ,value="Sign in")
input(type="button", class="btn btn-success", value="Sign up")
.form-group {
margin-left:10px;
}
To apply margin you can use mx class
<div class="form-group mx-2">
<input type="text" placeholder="Email" class="form-control">
</div>
for margin right and left in the same time or you can use mr-2 (margin right) and ml-2 (margin left)
Bootstrap v5 dropped form-specific layout classes in favour of existing grid and utility classes. Using legacy classes with v5 will no longer produce the expected styling from previous versions — such as the form-group margins. See the form section in the Migration To v5 guide for more info.
The v5 form examples now use margin utility classes, which should produce the desired result. These classes should provide an easy solution without the need for custom styling rules.
Example:
<form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
</div>
...
</form>
I am using Bootstrap in a website that I am creating.
The form is displayed and looks ok as I am using an example but if the user is logged in and the 'You are logged in as ...' is shown the spacing seems weird.
How can I make it so that it is inline with the buttons on the other side of the navigation bar?
<?php if (!logged_in()) { ?>
<form class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" id="user">
</div>
<div class="form-group">
<input type="password" placeholder="Password" class="form-control" id="pass">
</div>
<button type="button" class="btn btn-success" id="login">Sign in</button>
<button type="button" class="btn btn-primary" id="register">Register</button>
</form>
<?php } else { ?>
<div class="navbar-right">
You are logged in as <strong> <?php echo $_SESSION['user']; ?> </strong>
</div>
<?php } ?>
I've tried adding style="line-height:42px;" to the element but it doesn't help.
Add line-height property to .navbar-right class
.navbar-right {
line-height:42px;
}
In this example the search input is very long until the end of page. I copied the html code but mine is short for some reason and couldnt really figure out the part that makes it long ? What's the trick ?
Code for my navbar:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("KTEMB Veritabanı", "Index", "Members", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Üyeler", "Index", "Members")</li>
<li>#Html.ActionLink("Kayıtlı Personel", "Index", "Employees")</li>
</ul>
#*#Html.Partial("_LoginPartial")*#
<form class="navbar-form">
<div class="form-group" style="display:inline;">
<div class="input-group">
<input type="text" class="form-control" placeholder="What are searching for?">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
</div>
</div>
</form>
</div>
</div>
</div>
The example you cited uses Bootstrap 3.1, using 3.3.x would explain why it doesn't work for you. Some of the other examples you'll come across use older versions of Bootstrap too - so they won't work with newer versions of BS.
This works a little better. Leaving the .form-group class at 100% width (which is default) is one of the things that causes a problem, so changing it to 95% or less works. Also, it appears to fail when using a float class, like .navbar-right, (which is why it was converted to inline) so watch out for those...
<div class="collapse navbar-collapse">
<form class="navbar-form" role="search">
<div class="form-group" style="display:inline; float:right; width:95%;">
<div class="input-group" style="width:100%">
<input type="text" class="form-control" placeholder="Search">
<span class="input-group-addon" style="width:1%"><span class="glyphicon glyphicon-search"></span></span>
</div>
</div>
</form>
</div>
You need to use .form-group and .input-group, like:
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="What are searching for?">
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span> </span>
</div>
</div>
I am using btn-btn-primary class of bootstrap for button styling but i have issue when form is invalid button is disabled with light blue color and grayish background that is not making enough difference with when it is enabled. How can i change background color and font in both cases ?
main.html
<form name="createProcessFormName" id="createProcessForm" role="form" class="form-horizontal">
<div class="panel-body formHeight">
<!--<p class="text-danger" ng-show="createProcessFormName.$dirty && createProcessFormName.$invalid">{{validationMessage}}</p>-->
<div class="row">
<div class="form-group col-md-6 fieldHeight">
<label for="name" class="col-md-5 required">Business
Name:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="name"
ng-model="DTO.LongName" ng-model-options="{updateOn: 'blur'}"
placeholder="Name" maxlength="1024" name="Name"
required>
<p class="text-danger" ng-show="createProcessFormName.processName.$touched && createProcessFormName.processName.$error.required">Business Process Name is required</p>
</div>
</div>
</div>
</form>
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>
I suggest use ng-class https://docs.angularjs.org/api/ng/directive/ngClass
which will add css class based on condtion.
When createFormName.$invalid is true, it will apply invalidCssClassName
from your css.
When createFormName.$invalid is false, it will remove invalidCssClassName
from your css.
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-class="{invalidCssClassName:createFormName.$invalid}" ng-click="submit()">Save</button>
Your best alternative would be to use the :invalid pseudo-class.
Once the form has all the required fields filled out, the form will no longer be invalid and therefore the button should go back to its normal state.
form + button.btn.btn-primary {
background: blue;
}
form:invalid + button.btn.btn-primary {
background: red;
}
<form>
<input type="text" required />
</form>
<button ng-hide="edit" ng-disabled="createFormName.$invalid" class="btn btn-primary pull-right" type="button" ng-click="submit()">Save</button>
I'm working in Bootstrap 3.0 trying to make a Google-style search box that has a "Search Help" link after the Submit button.
My problem: when I go responsive I lose my offset margins and the button wraps to the next line.
<div class="row search">
<div class="col-md-8 col-md-offset-2">
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="">Enter search terms</label>
<input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
<input id="cn" name="cn" type="hidden" value="false" />
</div>
<button type="submit" id="s" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
Search Help
</form>
</div>
</div>
C.f.: http://jsfiddle.net/redo1134/su3eq/2/
Everything's fine at >991px. But at 991 and below I lose the offset.
This is certainly related to the #media (min-width: 992px) media query in bootstrap.css, but I don't know how to keep the offset.
And to make matters worse: when the viewport is <768px the button and the link wrap to the next line.
Again, I'm drawn to bootstrap.css and the min-width: 768px media query, but I don't know how to keep the input, button, and text all together.
Thanks!
<div class="row search">
<div class="col-sm-8 col-sm-offset-2">
<form role="form">
<div class="input-group">
<input type="text" class="form-control input-sm">
<span class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
Search Help
</div>
</form>
</div>
</div>
So, using Bootstrap will automatically make the spans break to show full widths at a certain breakpoint... it does that for responsiveness! I usually have to create my own styles when i would like something to act as I want it. Which is totally ok!
So, using inline styles just for a quick example, (you can turn them into proper styles for your stylesheet) you can do something like this with your search area... also updated the jsfiddle here
<!-- Global Search -->
<div class="row search">
<div class="col-md-8 col-md-offset-2">
<form class="form-inline" role="form">
<div class="form-group">
<div style="width:75%; float: left;">
<label class="sr-only" for="">Enter search terms</label>
<input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
<input id="cn" name="cn" type="hidden" value="false" />
</div>
<div style="width: 25%; float: left; padding-left: 10px; box-sizing: border-box;">
<button type="submit" id="s" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
Search Help
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
DEMO:http://jsbin.com/IKaKosoX/1/
EDIT: http://jsbin.com/IKaKosoX/1/edit?html,css,output
Remove the row col wrapping the form-inline and replace with this html:
<!-- Global Search -->
<form class="form-inline global-search" role="form">
<div class="form-group">
<label class="sr-only" for="">Enter search terms</label>
<input type="search" class="form-control" id="k" name="k" placeholder="Enter search terms">
<input id="cn" name="cn" type="hidden" value="false" />
</div>
<button type="submit" id="s" class="btn btn-default"><span class="glyphicon glyphicon-search"></span>
</button> Search Help
</form>
Remove previous custom css regarding the form and replace with:
/* center search */
.global-search {
text-align:center;
padding:10px;
}
.global-search * {
display:inline-block;
margin-bottom:0;
}
.global-search .form-control {
width:120px;
}
.global-search a {
display:block;
padding-top:10px;
}
#media (min-width:400px){
.global-search {
padding: 20px 0;
text-align:center;
}
.global-search .form-control {
width:300px;
}
}