Uploaded image for project: 'XWiki Platform'
  1. XWiki Platform
  2. XWIKI-11287

Radio button with Bootstrap classes don't display well when inside xform class

    XMLWordPrintable

Details

    • Unknown
    • N/A
    • N/A

    Description

      I'm using the example at the section "Checkboxes and radios" from http://getbootstrap.com/css/#forms-controls. There is no problem if used inside a simple html macro

      {{html}}
<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
{{/html}}

      but if the whole block is inside a HTML element with xForm class, display becomes wrong (see the photo attached).

      {{html}}
<div class="xform">
  <div class="checkbox">
    <label>
      <input type="checkbox" value="">
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
      Option one is this and that&mdash;be sure to include why it's great
    </label>
  </div>
</div>
{{/html}}

      The problem comes from the CSS rule added in the commit https://github.com/xwiki/xwiki-platform/commit/cd4a7c642286ed107fd943745a9424856e4934da which modify margins that Boostrap wants to handle differently.

      Attachments

        1. after.png
          304 kB
          Ecaterina Moraru (Valica)
        2. before.png
          300 kB
          Ecaterina Moraru (Valica)
        3. bootstrap-checkboxradio-display.png
          8 kB
          Jean SIMARD
        4. Main.CheckBoxSuite.xar
          1 kB
          Ecaterina Moraru (Valica)

        Issue Links

          relates to

          Bug - A problem which impairs or prevents the functions of the product. XWIKI-11124 Flamingo badly extending .checkbox class for input[type='checkbox'] elements

          • Major - Major loss of function.
          • Closed

          Activity

            People

              evalica Ecaterina Moraru (Valica)
              jsimard Jean SIMARD
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: