Welcome to my website


My name is Richard Watson and I'm a professional PHP developer
from Lurgan in Northern Ireland


Bootstrap modal issues

Posted by richard
Design | 29-04-2016


css custom design lightbox modal bootstrap

Bootstrap has some very handy built-in components, one of which is the ever-useful modal. Converting the modal to a lightbox-style gallery tool is quite straightforward, but not without issues.

As it turns out, there is one particular issue that often crops up - when using a modal as a lightbox, it was often displaying a white strip down the outside right of the .modal-dialog container with no apparent cause; Overflow fine, width on auto (presumably to adjust to contents) but no joy. Then I was lucky enough to figure out a fix - by simply adding display: table, it now works!

<div class="modal fade" id="id" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<img class="img-fluid" src="./upload/filename.ext">
</div>
</div>
</div>
</div>


/* Modal CSS */
.modal { overflow: auto; }
.modal-dialog { display: table; width: auto; max-width: 80%; height: auto; border: 5px solid white; border-radius: 0px; }
.modal-body { padding: 0px !important }
.modal-content { padding: 0px; border: 0px; border-radius: 0px; }


Will do the trick for using a modal popup as a basic lightbox - very simple and straight-forward. Note this tutorial was built on the Boostrap 4 Alpha.


You are not signed in


Register or sign-in to post comments
Twitter
Popular tags

src

active

hidden

preg_replace

GNU

business

arrays

missing

regex

custom

forms

sample