[jira] [Resolved] (WICKET-5403) ModalWindow Bootstrap scroll bar issue

["Martin Grigorov (JIRA)" <ji...@apache.org>]

     [ 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)