[
https://issues.apache.org/jira/browse/WICKET-5403?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
]
frefri updated WICKET-5403:
---------------------------
Description:
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.
was:
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.
> 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)
