html - Label of the control is jumping to the right side when resized -


the generated html have this:

i put in bootply can see , play easier, notice has small css section too:

http://www.bootply.com/nrxidfzjdc

problem is not "bootstrappy" enough! if start making window smaller labels jump right side of control. have done has caused issue?

enter image description here

you have couple of major problems here.

right alignment:

you have set adding .text-right on labels. meant desktop view only. take off of labels , use min-width media query set alignment or override alignment max-width @ small resolutions

overflowing text boxes:

you didn't use row. should use row because corrects padding wit negative left , right margins. tried fix instead adding class removes padding on .col-sm-4. padding there reason , should not removed. adding in row , removing .multi-row doesn't correct issue, however. when run text inputs being wide. because added 100% width inputs. not bad thing per se, causes problems because have used spans inner columns. spans naturally collapsed in width. don't fill parents' container divs do. swap them divs.

weird "ext" label:

this because added margin-left: 85% label simulate right alignment others have. remove margin , add text-right label have on other similar labels.

no padding:

after that, you'll have no padding on smaller resolutions. add .container around form.

in end, should have this: http://www.bootply.com/uippbytre3

demo:

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);    .form-input{    width :100%;  }    @media(max-width: 768px) {    .form-group .text-right {      text-align: left;    }  }
<div class="container">    <form class="form-horizontal" role="form">      <br>        <div class="row form-group">        <div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="name">name</label></div>        <div class="col-sm-4"><select class="form-control" id="nameadmin" name="nameadmin"><option>77881</option>          <option>77882</option>          <option>77883</option>          <option>77884</option>          <option>77885</option>          </select></div>        <div class="col-sm-4 col-sm-offset-1">          <div>            <input class="checkbox-inline" id="showemailinfooter" name="showemailinfooter" type="checkbox" value="true"><input name="showemailinfooter" type="hidden" value="false">            <label class="control-label" for="show_email_in_footer">show email in footer</label>          </div>        </div>      </div>      <div class="row form-group">        <div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="email">email</label></div>        <div class="col-sm-4">          <input id="adminemail" name="adminemail" style="width:100%;padding-right:30px;" type="text" value="">          <span class="glyphicon glyphicon-envelope  form-control-feedback" style="right: 10px; line-height: 27px; color: lightblue"></span>        </div>        <div class="col-sm-4 col-sm-offset-1">          <div>            <input class="checkbox-inline" id="showadminphone" name="showadminphone" type="checkbox" value="true"><input name="showadminphone" type="hidden" value="false">            <label class="control-label" for="show_admin_phone">show admin phone</label>          </div>        </div>      </div>      <div class="row form-group">        <div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="phone">phone</label></div>        <div class="col-sm-4">          <div class="row">            <div class="col-sm-5"><input class="form-input" id="adminphone" name="adminphone" type="text" value=""></div>            <div class="col-sm-2 text-right"><label class="control-label" for="ext">ext</label></div>            <div class="col-sm-5"><input class="form-input" id="adminext" name="adminext" type="text" value=""></div>          </div>        </div>      </div>    </form>    </div>


Comments

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

asp.net mvc - breakpoint on javascript in CSHTML? -