html - bootstrap form too large -
i trying design form within area of width col-sm-8. there 3 columns in form: label, text input , username check. width of label col-sm-2, width of username check col-sm-1 , rest should text input. calculation text input should have width of 5 result ugly. tried manually set width col-sm-7 still not long enough. if set width of text input col-sm-8 saw scroll bars on bottom of web-page. goal 1. set width of label col-sm-2 left; 2. set width of username check col-sm-1 right; 3. text input takes whole width in middle. how achieve please? old code below:
<div class="col-sm-8" id="content" style="border-left: #dbe0e3 1px solid;"> <form name="form_register" id="form_register" method="post" class="form-horizontal"> <fieldset> <legend class="text-center">enter details below.</legend> <div class="form-group"> <label for="username" class="col-sm-2 control-label">username *</label> <div class="col-sm-7"> <input type="text" name="username" id="username" class="form-control" maxlength="40" required /> </div> <div class="col-sm-1"><span id="usernamecheck"></span></div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label">password *</label> <div class="col-sm-7"> <input type="password" name="password" id="password" class="form-control" maxlength="20" /> </div> </div> the result of new code better wonder if there more elegant way: change div of username from
<div class="col-sm-7"> to
<div class="col-sm-7" style="width:75%">
this code you
<html> <head> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> </head> <body> <div class="col-sm-8" id="content" style="border-left: #dbe0e3 1px solid;"> <form name="form_register" id="form_register" method="post" class="form-horizontal"> <fieldset> <legend class="text-center">enter details below.</legend> <div class="form-group"> <label for="username" class="col-sm-2 control-label">username *</label> <div class="col-sm-7"> <input type="text" name="username" id="username" class="form-control" maxlength="40" required /> </div> <div class="col-sm-1"><span id="usernamecheck">user error check</span></div> </div> <div class="form-group"> <label for="password" class="col-sm-2 control-label">password *</label> <div class="col-sm-7"> <input type="password" name="password" id="password" class="form-control" maxlength="20" /> </div> </div> </body> </html>
Comments
Post a Comment