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

Avatar

Avatar

funtimesutah

Avatar

funtimesutah

funtimesutah

05-03-2021

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Shashi_Mulugu

MVP

Avatar

Shashi_Mulugu

MVP

Shashi_Mulugu
MVP

05-03-2021

@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.

 

Answers (1)

Answers (1)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

879

Avatar

Arun_Patidar

MVP

Total Posts

3.1K

Likes

1.2K

Correct Reply

879
Arun_Patidar
MVP

07-03-2021

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