Tapestry 5
  1. Tapestry 5
  2. TAP5-1928

zone with formsupport renders hidden input field after first child element and breaks css-styling

    Details

    • Type: Bug Bug
    • Status: Open
    • Priority: Trivial Trivial
    • Resolution: Unresolved
    • Affects Version/s: 5.3.3
    • Fix Version/s: None
    • Component/s: tapestry-core
    • Labels:

      Description

      when adding a zone (HiddenFieldLocationRules == RelativeElementPosition.INSIDE) around checkboxes in a form

      ...
      <t:zone t:id="zone">
         <div t:id="checkBox1"/><t:label for="checkBox1"/>
      </t:zone>
      ...
      

      the hidden-input tag will be rendered after the first child element

      <div id="zone" class="t-zone">
         <input type="checkbox" name="checkBox1_137352f1806" id="checkBox1_6" disabled="disabled"><label class="inline" for="noteWorkshop_6">Service:</label>
         <input type="hidden" name="t:formdata" value="...">
         <label>label</label>
      </div>
      

      which breaks the css selekor

      input[type="checkbox"][disabled] + label {
         ...
      }
      

        Activity

        Hide
        Benjamin Rosenberger added a comment -

        the css selektor parses through the dom, finds a disabled checkbox and afterwords the hidden input-field. so the label is for css not correlated to the checkbox anymore and does not apply the correct design. (for the +-selektor see http://www.w3.org/TR/CSS2/selector.html, point 5.1)

        the inclusion of an empty div-tag was also my solution

        Show
        Benjamin Rosenberger added a comment - the css selektor parses through the dom, finds a disabled checkbox and afterwords the hidden input-field. so the label is for css not correlated to the checkbox anymore and does not apply the correct design. (for the +-selektor see http://www.w3.org/TR/CSS2/selector.html , point 5.1) the inclusion of an empty div-tag was also my solution
        Hide
        Howard M. Lewis Ship added a comment -

        Could you expand on how the CSS selector is broken?

        A workaround for this is to provide a better spot for the hidden field, by including an empty <div> before the Checkbox component.

        Show
        Howard M. Lewis Ship added a comment - Could you expand on how the CSS selector is broken? A workaround for this is to provide a better spot for the hidden field, by including an empty <div> before the Checkbox component.

          People

          • Assignee:
            Unassigned
            Reporter:
            Benjamin Rosenberger
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:

              Development