The issue:

This is especially annoying on the page properties:

Do you see how I have to scroll to see the rest of the dropdown items? Although it is not a big deal, you can easily fix it with some CSS.
The CSS Fix
Create a clientlib with categories="[cq.authoring.dialog]"
Add the following CSS:
/* fix for page properties */
.cq-siteadmin-admin-properties , .cq-siteadmin-admin-properties .cq-dialog-content-page {
height: 100%;
}
/* fix for full screen component dialogs */
.coral3-Dialog--fullscreen .cq-dialog {
height: 100vh;
overflow-y: scroll;
}
.coral3-Dialog--fullscreen .cq-dialog .coral3-Dialog-content,
.coral3-Dialog--fullscreen .cq-dialog .cq-dialog-content {
height:100%;
}
and here is the result:

and in page properties:

That is it for this one. I hope you’ve enjoyed the complimentary GIFs!

This is especially annoying on the page properties:

Do you see how I have to scroll to see the rest of the dropdown items? Although it is not a big deal, you can easily fix it with some CSS.
The CSS Fix
Create a clientlib with categories="[cq.authoring.dialog]"
Add the following CSS:
/* fix for page properties */
.cq-siteadmin-admin-properties , .cq-siteadmin-admin-properties .cq-dialog-content-page {
height: 100%;
}
/* fix for full screen component dialogs */
.coral3-Dialog--fullscreen .cq-dialog {
height: 100vh;
overflow-y: scroll;
}
.coral3-Dialog--fullscreen .cq-dialog .coral3-Dialog-content,
.coral3-Dialog--fullscreen .cq-dialog .cq-dialog-content {
height:100%;
}
and here is the result:

and in page properties:

That is it for this one. I hope you’ve enjoyed the complimentary GIFs!
No comments:
Post a Comment
If you have any doubts or questions, please let us know.