The issue:
I had an APEX application in which I included Twitter Bootstrap during development. This application was developed prior to the grid layouts and Twitter Bootstrap being shipped with APEX 4.2. The below fix works successfully for firefox only.
This is what happened on my page in both IE and Firefox. There is extra white space to the right of my page:
After spending some time looking into this, I realised the issue was related to the checkbox items on this page and the same happened on other pages.
When I looked at the html for the checkbox in firebug, I found the following:
<fieldset class="checkbox_group" id="P11_CK1" tabindex="-1"> <legend class="hideMeButHearMe">test</legend> <input type="checkbox" checked="checked" value="Y" name="p_v11" id="P11_CK1_0"><label for="P11_CK1_0">Show Planned Spend</label> </fieldset>
If I then removed the “legend class” from the html, the white space disappeared and my page reverted to the correct size.
As Bootstrap is now shipped with APEX 4.2, my next step was to check the css contained within the original Bootstrap css file I included for the “legend class”. It contained the following:
legend { display: block; width: 100%; padding: 0; margin-bottom: 27px; font-size: 19.5px; line-height: 36px; color: #333333; border: 0; border-bottom: 1px solid #eee; }
After this I checked the css shipped with APEX 4.2 and realised there was a conflict so I commented out the “legend class” directly in the originally included Bootstrap css file:
This is line 889 – 901 in the version of the “bootstrap.css” I’m using.
/* legend { display: block; width: 100%; padding: 0; margin-bottom: 27px; font-size: 19.5px; line-height: 36px; color: #333333; border: 0; border-bottom: 1px solid #eee; } */
The css shipped with APEX 4.2 is then used and the problem resolved.