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

    Details

    • Difficulty:
      Unknown
    • Documentation:
      N/A
    • Documentation in Release Notes:
      N/A
    • Similar issues:

      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

          Issue Links

            Activity

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Date of First Response: