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

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

Avatar

Avatar
Boost 1
Level 2
jamesnb1982
Level 2

Like

1 like

Total Posts

7 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 2
jamesnb1982
Level 2

Like

1 like

Total Posts

7 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile
jamesnb1982
Level 2

29-09-2016

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?

Replies

Avatar

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile

Avatar
Validate 25
Level 10
smacdonald2008
Level 10

Likes

1,406 likes

Total Posts

12,671 posts

Correct Reply

2,278 solutions
Top badges earned
Validate 25
Validate 10
Validate 1
Give back 900
Give back 600
View profile
smacdonald2008
Level 10

29-09-2016

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

Avatar

Avatar
Boost 5
Employee
vmehrotr
Employee

Likes

19 likes

Total Posts

43 posts

Correct Reply

5 solutions
Top badges earned
Boost 5
Boost 3
Boost 10
Boost 1
Applaud 5
View profile

Avatar
Boost 5
Employee
vmehrotr
Employee

Likes

19 likes

Total Posts

43 posts

Correct Reply

5 solutions
Top badges earned
Boost 5
Boost 3
Boost 10
Boost 1
Applaud 5
View profile
vmehrotr
Employee

29-09-2016

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

Avatar

Avatar
Boost 1
Level 2
jamesnb1982
Level 2

Like

1 like

Total Posts

7 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile

Avatar
Boost 1
Level 2
jamesnb1982
Level 2

Like

1 like

Total Posts

7 posts

Correct Reply

0 solutions
Top badges earned
Boost 1
View profile
jamesnb1982
Level 2

29-09-2016

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

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,127 likes

Total Posts

6,121 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile

Avatar
Establish
Community Manager
kautuk_sahni
Community Manager

Likes

1,127 likes

Total Posts

6,121 posts

Correct Reply

1,144 solutions
Top badges earned
Establish
Coach
Originator
Contributor 2
Contributor
View profile
kautuk_sahni
Community Manager

30-09-2016

Seems like a bug. 

Please create a Support ticket.

~kautuk

Avatar

Avatar
Level 1
sara-cq-forum
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile

Avatar
Level 1
sara-cq-forum
Level 1

Likes

0 likes

Total Posts

1 post

Correct Reply

0 solutions
View profile
sara-cq-forum
Level 1

16-02-2017

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

Avatar
Validate 10
Level 4
sandeepm744005
Level 4

Likes

19 likes

Total Posts

127 posts

Correct Reply

13 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile

Avatar
Validate 10
Level 4
sandeepm744005
Level 4

Likes

19 likes

Total Posts

127 posts

Correct Reply

13 solutions
Top badges earned
Validate 10
Validate 1
Ignite 5
Ignite 3
Ignite 1
View profile
sandeepm744005
Level 4

17-02-2017

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;

}