Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events

Page cut off at the bottom on browser resize with responsive design

Avatar

Level 2

I've implemented responsive design on my site by following the template laid out in Geometrixx media. I'm noticing that when I resize my browser and elements reflow, the bottom elements on the page are cut off and I can't scroll down to see them. The problem is fixed when I reload the page at that size, but then when I resize to full screen, I notice that there is extra white space on the bottom of the screen.

At first I thought this was an issue in the way I had implemented it, but looking closely at the original Geometrixx media page, I notice that it exhibits the same behavior. I've tried adjusting padding, margins, and position (absolute, relative, static) on every element I could find on the page, but nothing I do resolves the issue. This appears to be a bug in the way responsive design is implemented.

What do I do to fix this?

6 Replies

Avatar

Level 10

This does look like a bug. I recommend opening a ticket to see if you need a hotfix: 

Avatar

Employee

What AEM version is this? Any exception in logs or firebug or developer tools console?

Avatar

Level 2

It's AEM 6.1

These are the messages in the console. I don't believe they have much to do with the issue. Adobe's own example site isn't working properly. If it were something of this nature, they should have caught it.

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/granite.js:222:15


Deprecation warning: moment.lang is deprecated. Use moment.locale instead.moment.js:321:13


Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/granite.js:222:15


‘mozHidden’ and ‘mozVisibilityState’ are deprecated.  Please use the unprefixed ‘hidden’ and ‘visibilityState’ instead.

 

 

Does the geometrixx media site display this behavior in 6.2?

Avatar

Administrator

Seems like a bug. 

Please create a Support ticket.

~kautuk



Kautuk Sahni

Avatar

Level 1

I experience the same issue when creating a new adaptive form in 6.2 

http://localhost:4502/aem/createaf.html/content/dam/formsanddocuments/geometrixx-gov?sourcePath=/aem...

Has this issue been fixed ?

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

TabView does not define an insert method for content zone tabList, falling back to replace.

Avatar

Level 5

Not sure about 6.2 but we faced the same issue when we were working in one of the 6.1 project and this is the fix which worked for us, page.css under page component which is overlayed in our /apps, we added below css change for body class.

 

/page/clientlibs/css/page.css

body {

                height:auto;

}