Twitter Bootstrap modal spans, side-by-side divs and "control-group"?
- by Federico Stango
I'm trying my best to have a good looking modal login form but for some reasons it seems that no matter how I nest divs, I cannot obtain the proper shape.
What I need is a big "lock" image side-by-side with a username/password form. The best I could do adds a horizontal scroller by the modal bottom and shows the input gadgets fairly distant from the image partly hidden on the right side of the modal canvas.
Inspecting with FireBug it seems that the spans in row-fluid are ok but the "control-label" and "controls" class adds way too much space on the left by width (for the labels) and margin-left (for the controls).
How would you solve it? Am I doing something wrong with divs and classes nesting?
This is the current modal without the main wrapper as it gets added by some js code that loads modal contents through ajax:
<form class="form-horizontal" id="login" name="login" method="post" action="<?php echo site_url('user/login'); ?>">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Login</h3>
</div>
<div class="modal-body">
<?php if ( isset($error) ) { ?>
<div class="row">
<div class="alert alert-error">
<strong>Warning!</strong> <?php echo $error; ?>
</div>
</div>
<?php } ?>
<div class="row-fluid">
<div class="span4">
<img src="skins/frontend/base/images/lock.png" width="96px" height="96px" />
</div>
<div class="span8">
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls"><input type="text" placeholder="Type your email" id="email" name="email" /></div>
<?php echo form_error('email', '<div id="error_email" class="alert alert-error">* ', '</div>'); ?>
</div>
<div class="control-group">
<label class="control-label" for="password">Password</label>
<div class="controls"><input type="password" placeholder="Password" id="password" name="password" /></div>
<?php echo form_error('password', '<div id="error_password" class="alert alert-error">* ', '</div>'); ?>
</div>
<div class="control-group">
<div class="controls"><label class="checkbox inline"><input type="checkbox" id="remember" name="remember" checked="checked" /> Remember Me</label></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Login</button>
</div>
</form>
Just don't take into account the php code you see... :)
Thanks in advance for all the support you can give!
Federico
