Bootstrap Dialog problems

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Add Wiquery and Bootstrap to a quickstart
2. Open a dialog

What is the expected output? What do you see instead?
The dialog should look normal and function normally. Instead, the close button 
doesnt contain an X and looks messed up. I havent been able to reproduce it in 
the quickstart, but we sometimes also get odd behaviour with a scroll bar in 
the dialog.

What version of the product are you using? On what operating system?
Wicket 6.10.0 Wiquery 6.9.2 Bootstrap 3.0.1

Original issue reported on code.google.com by fre.and....@gmail.com on 31 Oct 2013 at 4:09

Attachments:

• myproject.tar.gz

[GoogleCodeExporter]

ModalWindow bug filed separately with Wicket here 
https://issues.apache.org/jira/browse/WICKET-5403

Original comment by fre.and....@gmail.com on 31 Oct 2013 at 4:28

[GoogleCodeExporter]

PLEASE CLOSE THIS TICKET. This issue isnt wicket or wiquery related but due to 
Bootstrap. For informational purposes Ill provide an 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.

Original comment by fre.and....@gmail.com on 4 Nov 2013 at 4:52