ModalWindow Bootstrap scroll bar issue

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.