Display few lines of text next to check box icon in AEM dialog

[thirumurthy]

Hi

I am trying to create a check box with few lines of txt in aem 6.5 dialog , but at the moment if I add a text in check box , then it is coming in a single line with the scroll bar , but I dont want the scroll bar, just have to show the txt in one shot. anyone tried this before.

[HrishikeshKa]

Hi @thirumurthy ,

In AEM dialogs, you can achieve displaying multiple lines of text next to a checkbox by using a multiline text field (such as a TextArea) instead of directly adding text to the checkbox label. Here's how you can do it:

1. Open your dialog XML file (usually located in /apps/<your_project>/components/<your_component>/cq:dialog).

2. Replace the checkbox field with a TextArea field. For example:

<checkbox
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
    fieldLabel="Checkbox Label"
    name="./checkbox"
    value="true"/>

Replace with:

<textarea
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
    fieldLabel="Checkbox Label"
    name="./checkboxText"
    fieldDescription="Multiple lines of text to display next to the checkbox."
    rows="3"/>

1. In the HTML rendering script (usually a JSP or HTL file), adjust the markup to display the checkbox and the text next to it. For example, using HTL:

<div class="checkbox-with-text">
    <input type="checkbox" id="checkboxId" name="checkboxName" value="${properties.checkbox}" />
    <label for="checkboxId">${properties.checkboxText @ context='html'}</label>
</div>
​

1. Add CSS styles to ensure proper alignment and spacing between the checkbox and the text. For example:

.checkbox-with-text {
    display: flex;
    align-items: center;
}

.checkbox-with-text input[type="checkbox"] {
    margin-right: 10px; /* Adjust margin as needed */
}
​

With this setup, the TextArea field will allow you to input multiple lines of text, which will be displayed next to the checkbox without the need for a scrollbar. Adjust the number of rows in the TextArea (rows="3") according to your text length requirements.
Thanks!

[thirumurthy]

Hi @HrishikeshKa ,

Thanks For the quick replay, I will just reframe my question. 

I want to show multiple lines of text inside dialog only. So the requirement is in dialog , with a tab, inside that tab, need one check box with few lines of txt.

Apologies for the confusion

[HrishikeshKa]

Hi @thirumurthy ,

No problem, let's adjust the solution to fit your requirements of displaying multiple lines of text within an AEM dialog tab alongside a checkbox:

1. Open your dialog XML file (usually located in /apps/<your_project>/components/<your_component>/cq:dialog).

2. Inside the appropriate tab definition, add a field for the checkbox and a field for the multiline text. For example:

<tabs jcr:primaryType="nt:unstructured">
    <tab1
        jcr:primaryType="nt:unstructured"
        jcr:title="Tab Title"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        
        <items jcr:primaryType="nt:unstructured">
            <checkbox
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                fieldLabel="Checkbox Label"
                name="./checkbox"
                value="true"/>
            
            <checkboxText
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/form/textarea"
                fieldLabel="Checkbox Text"
                name="./checkboxText"
                fieldDescription="Multiple lines of text to display next to the checkbox."
                rows="3"/>
        </items>
    </tab1>
</tabs>

1. Save the XML file.

2. Adjust your dialog's client-side logic (usually written in JavaScript) to handle the input from both the checkbox and the textarea, if needed.

With this setup, within the specified tab of your AEM dialog, you'll have a checkbox field and a textarea field displaying multiple lines of text next to it. Adjust the properties and styling as necessary to fit your specific design requirements.

[thirumurthy]

Hi @HrishikeshKa ,

with above one I can achieve the check box with few lines of text in website pages. 

But I want achieve something like this below. I am not going to show any of this authored dialog content to front end. it just only to show in dialog. I just want to show one check box and next to that few lines, those lines are should not be authored.it should be as below 

The above image is dialog image.

In dialog, one check box, next to that need to display some hardcoded lines.it should not be authored.

[EstebanBustamante]

Hi, 

You just need to use the "text" property as part of the dialog.

This is how the dialog looks like:

Here is the code for reference:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:sling="http://sling.apache.org/jcr/sling/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Properties"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <text
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                        name="./text"
                        text="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>

And the result:

Hope this helps

[thirumurthy]

Hi @EstebanBustamante ,

Thanks for above answer, This is exactly what I did for the first time, but in my dialog instead of display all the line, it is just showing two line and adding scroll bar at the last, now looking for the ways to remove that and show all the text as shown in your image. And my text is just 4 lines.

[EstebanBustamante]

@thirumurthy, did you try the code I shared? Did you notice any differences with your code? Can you tell us which version of AEM you are using? As you can see, this works fine in a vanilla AEM 6.5.17 instance and also in AEMaaCS.

My advice is to validate whether you have any custom code (CSS) causing this issue. You can verify this by using the dialog you created in a fresh AEM instance (don't deploy your entire codebase, just your dialog). If this issue arises due to custom code, you can always create custom CSS to overwrite such behavior. You can learn more about how to do that here: https://stackoverflow.com/questions/59398248/how-to-css-styles-to-cqdialogue-in-aem 

Hope this helps.

[kautuk_sahni]

@thirumurthy Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.