Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Why no ability to hide a component only on desktop devices, still visible for others?

Avatar

Level 1

This would seem like a pretty basic responsive design requirement, the ability to hide an element for one breakpoint and have it still visible for another. Why in AEM if I hide an element for Desktop, is it automatically hidden for all other breakpoints? AEM seems to really be behind the curve with this one when compared to other CMS systems.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@funtimesutah

AEM in general implementations, uses dispatcher to cache html which will be served to all requests be it a mobile or desktop.  So no Dynamic html delivery is OOTB

 An ability to show hide an html element based on device can be achieved in two ways:

 

1. With proper responsive html design wherein the html elements for all breakpoints will be present and using responsive css will show hide needed html elements.

 

2. Use Dynamic components using Sling Dynamic Include and load Dynamic components and implement logic at component level to detect device and execute html rendering.

 

My choice is option 1.

 

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

@funtimesutah

AEM in general implementations, uses dispatcher to cache html which will be served to all requests be it a mobile or desktop.  So no Dynamic html delivery is OOTB

 An ability to show hide an html element based on device can be achieved in two ways:

 

1. With proper responsive html design wherein the html elements for all breakpoints will be present and using responsive css will show hide needed html elements.

 

2. Use Dynamic components using Sling Dynamic Include and load Dynamic components and implement logic at component level to detect device and execute html rendering.

 

My choice is option 1.

 

Avatar

Community Advisor

Hi,

AEM does provide a feature to hide and show components based on viewport width. Just select a view port and apply show/hide.

If you want hide something in desktop view then hide on desktop and you need to apply show in mobile if you want to show that in mobile view, otherwise component will be hidden for that view as well.

Screenshot 2021-03-07 at 21.18.03.png