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
