Bootstrap modal not showing on xs devices -
i have few modals on page. work fine except 1 of them, displays on sm, md , lg devices, not on xs. when shrink screen, see darkened screen, no modal. if click on button trigger it, while i'm on xs screen, same darkened screen. be?
<a href="mailto:?subject={$title}&body={$item_url}" class="btn btn-social-icon btn-reddit btn-xs" data-toggle="modal" data-target="#shareemail"><i class="fa fa-envelope-o"></i></a>
and modal itself:
<div id="shareemail" class="modal fade" role="dialog"> <div class="modal-dialog"> <!-- modal content--> <div class="modal-content"><form class="form-horizontal"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <div class="h-3 modal-title">email friend watch</div> <p class="move-down">share watch friend via email. please fill out information below , email sent.</p> </div> <div class="modal-body"> <div class="form-group"> <label for="yourname" class="col-sm-3 control-label">your name</label> <div class="col-sm-4"> <input type="text" class="form-control" id="yourname" placeholder="your name"> </div> </div> <div class="form-group"> <label for="youremail" class="col-sm-3 control-label">your email</label> <div class="col-sm-4"> <input type="email" class="form-control" id="youremail" placeholder="your email"> </div> </div> <div class="form-group"> <label for="friendsname" class="col-sm-3 control-label">friend's name</label> <div class="col-sm-4"> <input type="text" class="form-control" id="friendsname" placeholder="friend's name"> </div> </div> <div class="form-group"> <label for="freindsemail" class="col-sm-3 control-label">friend's email</label> <div class="col-sm-4"> <input type="email" class="form-control" id="friendsemail" placeholder="friend's email"> </div> </div> <div class="form-group"> <label for="subject" class="col-sm-3 control-label">subject</label> <div class="col-sm-8"> <input type="text" class="form-control" id="subject" value="a watch shared you..."> </div> </div> <div class="form-group"> <label for="message" class="col-sm-3 control-label">message</label> <div class="col-sm-8"> <textarea class="form-control" rows="3" placeholder="type message here"></textarea> </div> </div> <div class="row"> <div class="col-xs-3 vcenter"> <img src="img/watch1.jpg" alt="" class="img-responsive cart-thumbnail"/></div><div class="col-xs-8 vcenter"><strong>glashutte original</strong> pavonina quartz ladies' watch<br> <span class="hidden-xs">model number:</span> 1-03-01-15-02-04 </div> </div> <div class="form-group"> <div class="col-sm-offset-3 col-sm-8"> <div class="checkbox"> <img src="http://placehold.it/300x57"> </div> </div> </div> </div> <div class="modal-footer"> <div class="checkbox-inline"> <label> <input type="checkbox"> send me copy </label></div> <button type="button" class="btn btn-custom">send email</button> </div></form> </div> </div> </div>
not 100% if reason, noticed columns inside of modal content are:
col-sm-#
instead of col-xs-#
maybe content large modal , doesn't allow render properly?
Comments
Post a Comment