James James - 2 months ago 11
HTML Question

Form Layout in a Panel using Bootstrap

I am trying to layout a form in a panel and have a lot of trouble with the formatting.

I dont seem to be able to put a line break between the Save button and the E-mail label. I have tried moving it down using tags. I have tried using form-inline and form-horizontal but only makes things worst.

Alternitively I would like to place the Save button directly next to the textbox but again cant seem to acheive this.

A jsfiddle for an example https://jsfiddle.net/omyuzuu3/.

<div class="col-sm-4" id="leftCol">
<div class="panel panel-default">
<div class="panel-body">
<strong>Account Details</strong><p>
<hr>
<form class="form" method="post" >
<div class="form-group">
<label for="exampleInputName2">Username</label><p>
<input name="txtUsername" type="text" class="form-control" placeholder="<?php echo $user->loadUser()->username; ?>">
</div>

<div class="form-group">
<button type="submit" name="btnSaveUsername" class="btn btn-primary btn-sm pull-right">Save</button>
<p>
</div>

<div class="form-group">
<p>
<label for="exampleInputName2">E-mail</label><p>
<input name="txtEmail" type="text" class="form-control" placeholder="<?php echo $user->loadUser()->email; ?>">

</div>

<div class="form-group">
<button type="submit" name="btnSaveEmail" class="btn btn-primary btn-sm pull-right">Save</button>
</div>

</form>
</div>
</div>
</div>

Answer

you use float:right on the save button.

Float element is out of the normal flow, so its container's height does not account for the floating element

screenshot: https://i.imgur.com/xdvP23p.png

Add the clearfix property to floating element's container would fix the issue

screenshot: https://i.imgur.com/HiNC61Q.png

Bootstrap already contains .clearfix class for adding clearfix css properties

What is clearfix ?