Expand my Community achievements bar.

Fields in the dialog have border missing

Avatar

Level 3

I have 3 fields in my dialog. When i open the dialog, it displays those 3 fields but the right side border is missing on all 3. May be the width is too big to display within the dialog. Please see below snapshot.

fieldBorderMissing.png

When i maximize the dialog, they appear fine.

Just wanted to check if we need to make any changes to width of fields appearing in dialog. Or this is an existing bug?

Please advise.

6 Replies

Avatar

Community Advisor

Hi,

It depends how you've created dialog.

If you'll directly render items inside container it would be look like this.

Better to use fixed column layout for rendering content.

Examples of test-comp without and with layout:

Screen Shot 2018-08-01 at 11.30.05 AM.png

Without Layout

Screen Shot 2018-08-01 at 11.29.52 AM.png

With Layout

Screen Shot 2018-08-01 at 11.29.30 AM.png

e.g. Adobe Experience Manager Help | Creating your first Adobe Experience Manager Touch UI component

Thanks

Arun



Arun Patidar

Avatar

Level 3

Thanks Arun.

I'm already using 'granite/ui/components/coral/foundation/fixedcolumns' as sling:resourceType for all the 3 tabs in my dialogs. As you can see in the screenshot, left side it is coming correctly, but right side its cut.

Any other settings/properties we need to change?

Avatar

Community Advisor

I don't thinks so, You just need to follow proper layout.

Example List - HTL components

Screen Shot 2018-08-01 at 12.22.10 PM.png



Arun Patidar

Avatar

Level 3

Followed this exact structure but still its not working. See below -

layoutStructure.png

Avatar

Community Advisor

Hi,

Could you please check if you are facing same issue with OOTB components? for example List component.

If not, you can take reference from List component?

or could you please post your dialog xml here?

Thanks

Arun



Arun Patidar

Avatar

Level 10

This should not happen - you should see this:

ADialog33.png

To see this - install the package from this article.

Building Experience Manager Components using Granite/Coral Resource Types

Install section corresponding to the Use WCMUSEPOJO with the component section.

As Arun suggests - its the way you created your dialog.

This is the dialog from that package - as you can see - the borders are fine: