javascript - I am trying to implement a form within a bootstrap popover but the alignment gets off? Help needed -
i trying implement form within bootstrap popover; cannot seem able align them both. form elements move out side popover ; solution should make popover adjust according size of form elements. please help.
html:
<br> <br> <br> <div class="popover-markup"><a href="#" class="trigger">popover link</a> <div class="head hide"> events </div> <div class="content hide"> <form class="form-horizontal"> <div class="control-group"> <label class="control-label" for="inputemail">email</label> <div class="controls"> <input type="text" id="inputemail" placeholder="email"> </div> </div> <div class="control-group"> <label class="control-label" for="inputpassword">password</label> <div class="controls"> <input type="password" id="inputpassword" placeholder="password"> </div> </div> <div class="control-group"> <div class="controls"> <label class="checkbox"> <input type="checkbox"> remember me </label> <button type="submit" class="btn pull-left">sign in</button> </div> </div> </form> </div>
javascript:
$('.popover-markup>.trigger').popover({ html : true, title: function() { return $(this).parent().find('.head').html(); }, content: function() { return $(this).parent().find('.content').html(); }
});
here's fiddle.
okay found solution wasn't using form tags in body before form horizontal div. if that; fields aren't inline fields. can suggest solution that?
Comments
Post a Comment