[
https://issues.apache.org/jira/browse/WICKET-5403?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
Martin Grigorov resolved WICKET-5403.
-------------------------------------
Resolution: Not A Problem
> ModalWindow Bootstrap scroll bar issue
> --------------------------------------
>
> Key: WICKET-5403
> URL: https://issues.apache.org/jira/browse/WICKET-5403
> Project: Wicket
> Issue Type: Bug
> Affects Versions: 6.10.0
> Environment: Ubuntu, Java 7 64 bit
> Reporter: frefri
> Labels: bootstrap, modalwindow
>
> PLEASE CLOSE THIS TICKET. This issue isnt wicket or wiquery related but due
> to Bootstrap. For informational purposes Ill provide an explanation.
> When using ModalWindow to show content that contains bootstrap classes for
> rows and columns, a scroll bar is added that seems impossible to get rid of.
> Why? And how can it be removed?
> Also some problems with Wiquerys Dialog and Bootstrap which has been filed
> separately with them here
> https://code.google.com/p/wiquery/issues/detail?id=273
> NOTE I cant find anywhere in this JIRA tracker to append my quickstart, but
> its the same one as the one I uploaded to the Wiquery ticket above. Please
> refer to that for the quickstart.
> EXPLANATION
> The root of the problem is the negative margins in the Bootstrap row class.
> .row {
> margin-right: -15px;
> margin-left: -15px;
> }
> Displaying content like this in a modalwindow results in a horizontal scroll
> bar which doesnt go away no matter how large the modalwindow.
> <div class="row">
> <div class="col-xs-12">bla bla bla</div>
> </div>
> <div class="row">
> <div class="col-xs-4">bla</div>
> <div class="col-xs-4">bla</div>
> <div class="col-xs-4">bla</div>
> </div>
> The problem can be mitigated using the Bootstrap container class
> <div class="container">
> <div class="row">
> <div class="col-xs-12">bla bla bla</div>
> </div>
> <div class="row">
> <div class="col-xs-4">bla</div>
> <div class="col-xs-4">bla</div>
> <div class="col-xs-4">bla</div>
> </div>
> </div>
> This removes the permanent scroll bar, but the container class itself is hard
> coded to a certain size in pixels which means the scroll bar will reappear if
> the size of the modalwindow is smaller than that.
> Some solutions
> * Dont use Bootstrap container or row classes at all, stick only to column
> classes.
> * Create your own row class with no negative margins, e.g. (for obvious
> reasons this is not a good solution though)
> .row-no-margins {
> margin-right: 0;
> margin-left: 0;
> }
> * Somehow override the .row class to have no margins *when displayed in a
> modalwindow*. This would be the optimal solution.
--
This message was sent by Atlassian JIRA
(v6.1#6144)
