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;
}
Related
I was wondering if it is possible to pass the control to bootstrap Modal Input so that i dont have to use mouse click to focus on that.Usually i have to click on the inputas soon as modal popsup. Here is a Simple code.
<div class="modal fade" id="myModal1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Password authentication</h4>
</div>
<?php $attributes = array('class' => 'check_user_password', 'id' => 'check_user_password'); ?>
<?php echo form_open('PswAuthentication', $attributes); ?>
<div class="modal-body">
<div class="form-group">
<label>Enter password:</label>
<input type="password" class="form-control" name="user_password" placeholder="Enter password">
</div>
<div class="col-xs-1" id="courseInfo" style="display:none;">
<input type="hidden" name="crs_id" id="courseId" value="<?php echo set_value('crs_id'); ?>">
<input type="hidden" name="crs_code" id="courseCode" value="<?php echo set_value('crs_code'); ?>">
</div>
<input type="hidden" name="event" id="crs_event" value="<?php echo set_value('event'); ?>">
<div class="form-group">
<button type="submit" class="btn btn-default btn-success check_user_password_btn">Submit</button>
</div>
</div>
<?php echo form_close(); ?>
</div>
</div>
</div>
And here is the UI
I got the Answer guys. Sorry for asking this simple Question. I just had to put Autofocus in input field.
<input type="password" class="form-control" name="user_password" placeholder="Enter password" autofocus>
Due to how HTML5 defines its semantics, the autofocus HTML attribute has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').focus()
})
Read more
example code here codepen
in my form tag i have two buttons named SIGNIN and SIGNUP and form should be submit if SIGNIN button press. and if SIGNUP button press it should redirect to url given in anchor tag below but it always submitting the form. please help me.
<form action="controllers/user/vauth.php" method="post" role="form" class="userLogin" style="padding:20px;">
<div class='alert alert-danger' id='errorLabel' style="display:none;"></div>
<?php
if(isset($_SESSION['error'])) {
echo "<div class='alert alert-danger' id='errorLabel'>";
foreach($_SESSION['error'] as $error) echo "<p><b>".$error."</b></p>";
echo "</div>";
unset($_SESSION['error']);
}
if(isset($_SESSION['message'])) {
echo "<div class='alert alert-success'>".$_SESSION['message']."</div>";
unset($_SESSION['message']);
}
?>
<div class="form-group">
<label for="email">Email</label>
<input type="text" name="vemail" id="vemail" class="form-control" placeholder="Enter Email" value="<?php if(isset($_SESSION['values'])) echo $_SESSION['values']['email']; ?>">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" name="vpassword" id="vpassword" class="form-control" placeholder="Enter Password">
</div>
<div class="form-group">
Forgot Password ?
</div>
<button type="submit" class="btn btn-default" name="vsubmit">LOG IN</button><button class="btn btn-success" name="signup" style="float:right;">SIGN UP</button>
</form>
Add type="button" to your signup button
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>
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.
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;
}
}