Checkboxes selection behavior in the dialog | Community
Skip to main content
P
pixislinger
Level 3
May 24, 2024
Solved

Checkboxes selection behavior in the dialog

  • May 24, 2024
  • 3 replies
  • 2574 views

Checkboxes in the dialog are getting selected/unselected while we click beside the boxes in the dialog rather than just getting selected within the checkboxes. Is this the usual behavior, I tried this in a few dialogs and replicated the same behavior 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by HARSH_TIWARI

@pixislinger I just checked and found that it will only happen till the text part of the checkbox, means only clickable to the area of text which we are using to name the field in dialog box.

I think this behavior is expected.

Thanks! 

3 replies

HARSH_TIWARI
HARSH_TIWARIAccepted solution
Level 2
May 24, 2024

@pixislinger I just checked and found that it will only happen till the text part of the checkbox, means only clickable to the area of text which we are using to name the field in dialog box.

I think this behavior is expected.

Thanks! 

    Rohan_Garg
    Community Advisor
    Rohan_GargCommunity Advisor
    Community Advisor
    May 24, 2024

    Hi @pixislinger,

    Yes this is the expected behavior. If you see the screenshot below you will see the coral-checkbox element listener acts on both the coral checkbox label and the actual checkbox. 

    Hope this helps!

      HrishikeshKagne
      Community Advisor
      HrishikeshKagneCommunity Advisor
      Community Advisor
      May 25, 2024

      Hi @pixislinger ,

      The behavior you're describing, where checkboxes in a dialog are getting selected or unselected when clicking beside the boxes rather than just within the checkboxes, is not typical expected behavior in AEM dialogs. This issue might be caused by the way the HTML and CSS are structured for the dialog or by an event handler that is being triggered improperly.

      Here are a few steps to troubleshoot and resolve the issue:

      1. Check the HTML Structure

      Ensure that the HTML structure for the checkboxes is correct. The label elements should be correctly associated with the checkbox inputs.

      Example of proper HTML for checkboxes:

      <div class="coral-Form-fieldwrapper"> <label class="coral-Form-fieldlabel"> <input type="checkbox" name="myCheckbox" value="1" class="coral-Checkbox-input"> <span class="coral-Checkbox-checkmark"></span> Option 1 </label> </div>

      2. CSS Issues

      Make sure there are no CSS styles that might be causing the entire label or surrounding area to be clickable. Ensure that the clickable area is only the checkbox or the label associated with it.

      3. Event Handlers

      Check if there are any JavaScript event handlers that might be causing this behavior. Ensure that there are no unintended event listeners that trigger the checkbox selection when clicking beside it.

      4. AEM Dialog Configuration

      Review the dialog configuration in your AEM component to ensure it is set up correctly. Below is an example of how a checkbox should be configured in a Coral 3 dialog.

      Example of AEM dialog configuration:

      <content jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog"> <items jcr:primaryType="nt:unstructured"> <myCheckbox jcr:primaryType="nt:unstructured" fieldLabel="Option 1" name="./option1" sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"> <items jcr:primaryType="nt:unstructured"/> </myCheckbox> </items> </content>

      5. Check AEM Version and Compatibility

      Ensure that your AEM instance is up-to-date with the latest service packs and cumulative fix packs. Sometimes, issues like these might be fixed in newer versions or patches.

      6. Testing with Minimal Setup

      Create a minimal dialog setup with just a single checkbox to see if the issue persists. This can help isolate whether the problem is with your specific dialog configuration or a broader issue.

      Example minimal dialog setup:

      <jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" jcr:primaryType="nt:unstructured" jcr:title="My Component" sling:resourceType="cq/gui/components/authoring/dialog"> <content jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <column jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/container"> <items jcr:primaryType="nt:unstructured"> <myCheckbox jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/coral/foundation/form/checkbox" fieldLabel="Option 1" name="./option1"/> </items> </column> </items> </content> </jcr:root>

      7. Investigate Overlayed Components

      If your project overlays or extends the default AEM components, ensure that these customizations are not causing the issue. Test with the default checkbox component to see if the problem persists.

      Conclusion

      The issue you are experiencing with the checkboxes might be due to improper HTML/CSS structure, event handling, or dialog configuration. By carefully reviewing and testing each aspect mentioned above, you should be able to pinpoint and resolve the issue, ensuring that checkboxes are only selectable when clicking directly on them or their associated labels.

      Hrishikesh Kagane
        P
        pixislingerAuthor
        Level 3
        May 27, 2024

        thanks for the detailed explanation. Looks like there is a difference in my HTML structure compared to what you've posted. My input field is not inside the label. Any idea how to fix this?

         

         

          Terms & ConditionsAccessibility statement

          Loading footer...