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
BedrockMission!

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?

funtimesutah
Level 1
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
Shashi_Mulugu
Correct answer by
Community Advisor
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
Shashi_Mulugu
Correct answer by
Community Advisor
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

Arun_Patidar
Community Advisor
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