search

TalksLab / metro-bootstrap

Twitter Bootstrap with Metro style
http://talkslab.github.io/metro-bootstrap
Apache License 2.0
1.04k stars 362 forks source link

Dialog now always full-sized #46

Closed robertmuehsig closed 10 years ago

robertmuehsig commented 10 years ago

With the latest changes regarding modal dialogs (Issue: https://github.com/TalksLab/metro-bootstrap/issues/44 + PR: https://github.com/TalksLab/metro-bootstrap/commit/87a6d3560839ee715aed458de136d513e54cf9e9) there is a new small issue: The dialog is now always full width. The media query css from the original bootstrap doesn´t seem to kick in: @media screen and (min-width: 768px) .modal-dialog { width: 600px; margin: 30px auto; }

Without this css the modal-dialog is on width: auto.

Spinarooni commented 10 years ago

My original pull request made the change in the bootstrap modal.less file. When it was moved to it's own less file it broke the CSS precedence order. The bootstrap file has:

.modal-dialog { position: relative; margin-left: auto; margin-right: auto; width: auto; margin: 10px; z-index: (@zindex-modal-background + 10); }

To fix the issue we needed to reset those left and right margins. The modal.less file that was added has:

.modal-dialog { position: relative; width: auto; margin: 30px auto; z-index: (@zindex-modal-background + 10); }

width: auto is breaking the width because it's being set later in the CSS precedence order due to where it's being loaded.

I think all we need in modal.less is:

.modal-dialog { margin-left: auto; margin-right: auto; }