using bootstrap with play framework scala template

Question

i am using bootstrop with scala template and having trouble in some designing

left side text not displayed properly

my code

<fieldset>



<legend><h2>@user.firstName&nbsp;@user.lastName

    <a  class="btn pull-right" href="#">Delete</a>
    <a  class="btn pull-right" href="#">Edit</a>

</h2>

</legend>

      <div class="form">
      <form class="form-horizontal" role="form">
         <div style="float:left;position:auto;padding-left:20;">
          <div class="form-group">
              <label class="col-sm-2 control-label">First Name</label>
              <div class="col-sm-10">
                  <p class="form-control-static">@user.firstName</p>
              </div>
          </div>
          <div class="form-group">
              <label class="col-sm-2 control-label">Last Name</label>
              <div class="col-sm-10">
                  <p class="form-control-static">@user.lastName</p>
              </div>
          </div>
          <div class="form-group">
              <label class="col-sm-2 control-label">Email</label>
              <div class="col-sm-10">
                  <p class="form-control-static">@user.email</p>
              </div>
          </div>

          <div class="form-group">
              <label class="col-sm-2 control-label">Password</label>
              <div class="col-sm-10">
                  <p class="form-control-static">@user.password</p>
              </div>
          </div>
         </div>
          <div style="float:right;position:auto;padding-right:20;">
          <div class="form-group">
          <img src="@routes.Assets.at("images/person-icon.jpg")" height="200" width="150" alt="@user.firstName" class="img-thumbnail">
              </div>
          </div>
      </form>
      </div>


   </fieldset>

the text on the left not displayed properly,i have tryed adding the padding but it dint work.Can anybody help me .Thanks in advance

If u can create a fiddle...it will be nice to trace..!

Anup
– Anup

2014-04-19 09:41:33 +00:00
Commented Apr 19, 2014 at 9:41 — Anup
– Anup, Commented Apr 19, 2014 at 9:41
thanks for reply @Anup,the problem is solved now.

akku
– akku

2014-04-19 10:07:49 +00:00
Commented Apr 19, 2014 at 10:07 — akku
– akku, Commented Apr 19, 2014 at 10:07

4dgaurav · Accepted Answer · 2014-04-19 09:53:15Z

DEMO HERE

Use of .container and .row , as of now in your code every form-group has 12 grids but row is not specified thus the error.

<div class="container">
    <div class="row">

    <div class="col-sm-10 pull-left">

      <div class="form-group row">
          <label class="col-sm-2 control-label">First Name</label>
          <div class="col-sm-10">
              <p class="form-control-static">@user.firstName</p>
          </div>
      </div>

      <div class="form-group row">
          <label class="col-sm-2 control-label">Last Name</label>
          <div class="col-sm-10">
              <p class="form-control-static">@user.lastName</p>
          </div>
      </div>

      <div class="form-group row">
          <label class="col-sm-2 control-label">Email</label>
          <div class="col-sm-10">
              <p class="form-control-static">@user.email</p>
          </div>
      </div>

      <div class="form-group row">
          <label class="col-sm-2 control-label">Password</label>
          <div class="col-sm-10">
              <p class="form-control-static">@user.password</p>
          </div>
      </div>

    </div>

    <div class="col-sm-2 pull-right">

       <div class="form-group row">
          <img src="@routes.Assets.at('images/person-icon.jpg')" height="200" width="150" alt="@user.firstName" class="img-thumbnail">
       </div>
    </div>
        </div>     
  </div>

Collectives™ on Stack Overflow

using bootstrap with play framework scala template

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related