3

I am using bootstrap 3 and my layout is responsive(totally). There is an issue which is a bit annoying for me.

Scenario:

  • The Browser window is showing my page and it doesn't require a vertical scroll bar.
  • Now a user expands a collapsed div on my page.
  • The size of the page increases vertically and vertical scroll-bar is displayed.
  • When the vertical scroll bar is displayed, my page's look and feel also changes a bit, like its width decreases as it needs to give space to the vertical scroll bar.

My client does not want this scenario and wants me to stop this dancing of the screen while user expands / collapses the div.

Please help me how can I restrict my screen not to dance.

Ch Faizan Mustansar
  • 354
  • 3
  • 6
  • 18
  • 1
    You need to address the issue. This is a normal behavior of the browser there is nothing you can do. You are also gonna be downvoted as hell – Ahmad Alfy Jun 30 '14 at 07:17
  • I know this is a normal behaviour but in our web application development we do all those things which are required by the client.. Why would you down vote a person who is already in trouble. – Ch Faizan Mustansar Jun 30 '14 at 07:20
  • @DanglingPointer Your are right. This is a legitimate question. But I'm afraid it is an obvious duplicate of many other questions like [Always show browser scrollbar to prevent page jumping](http://stackoverflow.com/questions/12582555/always-show-browser-scrollbar-to-prevent-page-jumping). Please search before you ask. – Boaz Jun 30 '14 at 07:21
  • @Web-tiki & Nikhil: heheheh... For sure... – Ch Faizan Mustansar Jun 30 '14 at 07:22
  • @Boaz: yes, I always google the issue and then post it. The upper question doesn't answer my question. My question is related to the responsiveness of the page... its not a normal html page. I was thinking may be I can get a solution which is totally in twitter-bootstrap. I have found many solution in their library by altering the responsive css file of twitter-bootstrap. So this is the whole story :). – Ch Faizan Mustansar Jun 30 '14 at 07:38

1 Answers1

4

Some CSS reset stylesheets include this type of fix:

/* force a vertical scrollbar to prevent a jumpy page */
html {overflow-y: scroll;}

It forces a scrollbar so the width is always constant.

Jeroen
  • 60,696
  • 40
  • 206
  • 339
  • Yes, this is one of the solutions that I have tried.. but this is also not accepted by my client.. he wants a responsive design with overflow-y:auto ... Sad, illogical but this is how he thinks. – Ch Faizan Mustansar Jun 30 '14 at 07:23
  • Ah, weird, but fair enough. I'll leave my answer up here for others that *can* use this. Perhaps someone else or even I can help you with a different answer (perhaps something that uses Javascript to detect when scrolling would appear and react accordingly?). – Jeroen Jun 30 '14 at 07:25
  • @DanglingPointer Either the two versions will be the same or they won't. The client can ask for the impossible, but sometimes you have to tell the client that there are things beyond human abilities. – Boaz Jun 30 '14 at 07:26
  • @Boaz: Yes, you are right. But I thought may be there is something that can happen. Yes, everything can happen but there is no certain answer to this question. – Ch Faizan Mustansar Jun 30 '14 at 07:33