Tuesday 11 December 2012

Twitter Bootstrap Checkboxes and APEX 4.2

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.

1 comment:

  1. I really appreciate the information shared above. It’s of great help. If someone wants to learn Online (Virtual) instructor lead live training in Oracle APEX TECHNOLOGY, kindly contact us http://www.maxmunus.com/contact
    MaxMunus Offer World Class Virtual Instructor-led training on TECHNOLOGY. We have industry expert trainer. We provide Training Material and Software Support. MaxMunus has successfully conducted 100000+ pieces of training in India, USA, UK, Australia, Switzerland, Qatar, Saudi Arabia, Bangladesh, Bahrain and UAE etc.
    For Demo Contact us.
    Pratik Shekhar
    MaxMunus
    E-mail: pratik@maxmunus.com
    Ph:(0) +91 9066268701
    http://www.maxmunus.com/

    ReplyDelete