Ive got my login form too wide, it takes 80% of the pages width as you could see the picture below.
I'm using default bootstrap.min.css
Heres the html code i use
<div class="modal-body">
<h3>Login with your CZCNR account!</h3>
<form name="regitration" method="POST" action="check.php" class="af-form " id="af-form-rf">
<div class="af-outer af-required">
<div class="form-group af-inner">
<input type="text" name="username" id="name-rf" size="30" value="" placeholder="Nickname" class="form-control placeholder pull-right" />
<label class="error" for="name-rf" id="name_error_rf">Nickname is required.</label>
</div>
</div>
<div class="af-outer af-required">
<div class="form-group af-inner">
<input type="password" name="password" id="phone-rf" size="30" value="" placeholder="Password" class="form-control placeholder" />
<label class="error" for="phone-rf" id="phone_error_rf">Password is required.</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-theme-sm btn-theme" data-dismiss="modal">Close</button>
<button class="btn btn-theme-sm btn-theme btn-theme-primary">Login</button>
</div>
</form>
</div>
Any help would be appreciated
Thanks in advance.
Try this
HTML
<div class="row">
<div class="col-md-6 col-md-offset-2">
<div class="modal-body ">
<h3>Login with your CZCNR account!</h3>
<form name="regitration" method="POST" action="check.php" class="af-form " id="af-form-rf">
<div class="af-outer af-required">
<div class="form-group af-inner">
<input type="text" name="username" id="name-rf" size="30" value="" placeholder="Nickname" class="form-control placeholder pull-right" />
<label class="error" for="name-rf" id="name_error_rf">Nickname is required.</label>
</div>
</div>
<div class="af-outer af-required">
<div class="form-group af-inner">
<input type="password" name="password" id="phone-rf" size="30" value="" placeholder="Password" class="form-control placeholder" />
<label class="error" for="phone-rf" id="phone_error_rf">Password is required.</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-theme-sm btn-theme" data-dismiss="modal">Close</button>
<button class="btn btn-theme-sm btn-theme btn-theme-primary">Login</button>
</div>
</form>
</div> </div> </div>
Demo Here
You can add a width style attribute in your very first div tag.
<div class="modal-body" style="width:400px;">
<h3>Login with your CZCNR account!</h3>
<form name="regitration" method="POST" action="check.php" class="af-form " id="af-form-rf">
<div class="af-outer af-required">
<div class="form-group af-inner">
<input type="text" name="username" id="name-rf" size="30" value="" placeholder="Nickname" class="form-control placeholder pull-right" />
<label class="error" for="name-rf" id="name_error_rf">Nickname is required.</label>
</div>
</div>
<div class="af-outer af-required">
<div class="form-group af-inner">
<input type="password" name="password" id="phone-rf" size="30" value="" placeholder="Password" class="form-control placeholder" />
<label class="error" for="phone-rf" id="phone_error_rf">Password is required.</label>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-theme-sm btn-theme" data-dismiss="modal">Close</button>
<button class="btn btn-theme-sm btn-theme btn-theme-primary">Login</button>
</div>
</form>
</div>
Related
I am creating a inline form using the bootstrap template of MVC, but when i create an inline form with this code:
<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>
this is the result:
how can achieve a inline form?
Add your button in form group
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
<form class="form-inline">
<div class="col-lg-4" id="userFormColumn1">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
</div>
<div class="col-lg-4" id="userFormColumn1">
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
</div>
<div class="col-lg-4" id="userFormColumn1">
<div class="form-group">
<button type="submit" class="btn btn-default">Send invitation</button>
</div>
</div>
</form>
Try this.
I want to create an inline form using bootstrap with labels above input text fields but the result looks so messed up.
This is what i tried:
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkin">check in</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="input-group date col-md-2" id="datepicker">
<label for="checkout">check out</label>
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
this is what i got:
result
how do i get the submit button to right position and the glyphicons heights the same as the input fields what am i doing wrong?
I made some edits to your html : https://jsfiddle.net/05t4s041/
<form id="form" method="post" class="form-inline" >
<div class="row">
<div class="col-md-2">
<label for="from">from:</label>
<input type="text" class="form-control form-text" />
</div>
<div class="col-md-2">
<label for="to">to:</label>
<input type="text" class="form-control form-text"/>
</div>
<div class="col-md-2">
<label for="checkin">check in</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<label for="checkout">check out</label>
<div class="input-group date" id="datepicker">
<input type="text" class="form-control datepicker" name="processdate" />
<span class="input-group-addon btn"><i class="glyphicon glyphicon-calendar"></i> </span>
</div>
</div>
<div class="col-md-2">
<input type="submit" class="btn btn-default" value="submit"/>
</div>
</div>
</form>
you could put divs with bootstrap classes around your label and control like:
<div class="col-md-2">
<div class="row">
<div class="col-md-6">
<label for="from">from:</label>
</div>
<div class ="col-md-6">
<input type="text" class="form-control form-text" />
</div>
</div>
</div>
The row div may be sufficient: it put's elements in a row put I like to put extra bootstrap classes around my controls so I can modify them. For example that the label has a smaller width than the control itself.
UPDATE based on #HebleV:
I'm having a little issue with formating and trying to show html block in one row
Here is my html code
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div ng-show="selected == 'Employer Search'">
<div class="input-group">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</form>
screenshot:
since you're using bootstrap,change your code to this..
<form action="" class="form-inline">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
<div class="form-group" ng-show="selected == 'Employer Search'">
<div class="input-group">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</form>
this is my sample output
http://goo.gl/PYklyR
Add display:inline-block to your divs.
Maybe try placing them into "row" and "col"s? (I haven't checked that code, but you get the idea ;))
<div class="row">
<form class="navbar-form" role="search">
<div class="col-*-3"><div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/></div>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div></div>
<div class="col-*-3">
<div ng-show="selected == 'Employer Search'">
<div class="input-group">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</div>
</form></div>
By "*" I mean md, lg etc. (you know, screen size thingies)
Since you are using bootstrap you can do the following:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<input type="text" />
<input type="text" />
<input type="text" />
</div>
</div>
</div>
JS Fiddle
https://jsfiddle.net/lightcast/6nwvnspd/
Remove input group for other 2 fields and include all 3 fields in one single- div class="input-group" check this http://codepen.io/anon/pen/YwRNPM
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="empsrch" id="empsrch"/>
<div class="input-group-btn">
<button class="btn btn-default" type="submit" ng-click="open"><i class="glyphicon glyphicon-search"></i></button>
</div>
<div ng-show="selected == 'Employer Search'">
<input type="text" class="form-control" placeholder="State" name="state" id="state" />
<input type="text" class="form-control" placeholder="City" name="city" id="city" />
</div>
</div>
</form>
I have an interesting problem here.
I have two forms on the same page, the exact same code copy and pasted. Each form has a hidden input to identify the form on the backend, and each form has an <input type="submit"> for submission.
The only difference between the two is that the first form has one less <input type="text">.
The problem is that the form with 3 <input type="text"> fields is centered while the form with 2 <input type="text"> is not. When I add a third <input type="text"> the form is centered.
It seems as if the form has has to have a certain amount of inputs for it to center.
Here is a JSFiddle
Make sure to stretch your browser so you can see the whitespace on the right side of the top form.
And my HTML...
<div class="content-area">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Email</div>
<form id="changeEmailForm" method="post" action="/resources/submit.php">
<div class="input-group text-center">
<input type="hidden" name="changeEmail"> <!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">
<input class="form-control input-lg" id="confirmEmail" name="confirmEmail" minlength="2" type="text" required placeholder="Confirm Email">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Password</div>
<form id="changePasswordForm" method="post" action="/resources/submit.php">
<div class="input-group text-center">
<input type="hidden" name="changePassword"> <!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="currentPassword" name="currentPassword" minlength="2" type="text" required placeholder="Current Password">
<input class="form-control input-lg" id="newPassword" name="newPassword" minlength="2" type="text" required placeholder="New Password">
<input class="form-control input-lg" id="confirmPassword" name="confirmPassword" minlength="2" type="text" required placeholder="Confirm Password">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is an updated Fiddle
Changing your text-center to center-block will center the element. I added it to the second because it wasn't a true center either.
<div class="content-area">
<div class="row">
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Email</div>
<form id="changeEmailForm" method="post" action="/resources/submit.php">
<div class="input-group center-block">
<input type="hidden" name="changeEmail">
<!-- Hidden input to identify the form -->
<!--<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">-->
<input class="form-control input-lg" id="newEmail" name="newEmail" minlength="2" type="text" required placeholder="New Email">
<input class="form-control input-lg" id="confirmEmail" name="confirmEmail" minlength="2" type="text" required placeholder="Confirm Email">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<div class="row">
<div class="col-xs-12 text-center">
<div class="huge">Change Password</div>
<form id="changePasswordForm" method="post" action="/resources/submit.php">
<div class="input-group center-block">
<input type="hidden" name="changePassword">
<!-- Hidden input to identify the form -->
<input class="form-control input-lg" id="currentPassword" name="currentPassword" minlength="2" type="text" required placeholder="Current Password">
<input class="form-control input-lg" id="newPassword" name="newPassword" minlength="2" type="text" required placeholder="New Password">
<input class="form-control input-lg" id="confirmPassword" name="confirmPassword" minlength="2" type="text" required placeholder="Confirm Password">
<input class="btn btn-large btn-success" type="submit">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm attempting to produce this form with Bootstrap 3:
I'm having trouble making First Name and Last Name inline AND making them together take up the same width as the other fields. Currently I have the following
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-md-6">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
which outputs a simple form with no inlining. Any ideas how to adjust this to look like in the picture? Here is a jsfiddle: http://jsfiddle.net/gJdyb/1/
Here's a jsFiddle. Use class row on the form-group you'd like to inline:
Administrator
<div class="form-group">
<div class="col-md-12">
<div class="form-group row">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
Try this one
<form role="form" class="form-horizontal">
<h4>Administrator</h4>
<div class="form-group row">
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="First Name" />
</div>
<div class="col-xs-6 col-md-6">
<input type="text" class="form-control" placeholder="Last Name" />
</div>
</div>
<div class="Form-group">
<input type="text" class="form-control"placeholder="Email Address" />
</div>
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</form>
http://jsfiddle.net/gJdyb/4/
it use the col-xs-6.. it is us
read this for documentation of grid system of bootstrap
http://getbootstrap.com/css/#grid