locked
Modal Popup Vert Scrollbar not working in Firefox (OK in IE) RRS feed

  • Question

  • User-1938119389 posted

    I am having a problem with a modal popup that has a vertical scroll bar.  In IE the vertical scroll bar works as it should.  However in Firefox, if I try to click and drag the scroll box or "thumb" along the track the whole modal popup is draged accross the screen.  The scroll buttons will advance the scroll, I just can't grab the tumb without dragging the whole screen.

    Any suggestions on how to fix this?

    The popup text is in a div with the following properties:

    <div style="height: 465px; width: 742px; overflow-y: scroll; overflow-x: hidden;
    float: left;"
    >


    Sunday, October 24, 2010 2:50 PM

All replies

  • User-1938119389 posted

    Anybody?  This seems like it would be a problem that many would have. Is there some parameter or setting that would be Firefox friendly I have missed?

    Tuesday, October 26, 2010 2:45 PM
  • User-1102123764 posted

    Hi,

    <div style="height: 465px; width: 742px; overflow-y: scroll; overflow-x: hidden;
    float: left;"
    >

    Would you please post your full markups for the Popup panel and the ModalPopupExtender? 

    Tuesday, October 26, 2010 10:04 PM
  • User-802070697 posted

    I'm experiencing the exact same problem.  I have a simple popup that has text contained in a scrollable DIV - used for text based pages such as Ts and Cs, Privacy details etc.  The idea is that if there is too much text then it will scroll vertically. 

    This works fine in IE, but in Firefox when you go to move the scroll bar with your mouse, the whole modal window drags with it. 

    However, the DIV scroll bar will work if I use the mouse scroll wheel rather than dragging the scroll bar using mouse buttons.

    Thought it may be a focus issue, but setting focus to DIV didnt change anything.

    Any ideas or suggestions would be really appreciated.

    <

    div class="white px8" style="border:1px solid black;width:600px;height:300px;overflow:scroll;overflow-y:scroll;overflow-x:hidden;">

    Many thanks.

    Saturday, December 4, 2010 8:08 AM
  • User1808686021 posted

    I know this is old, but I was looking for a similar solution when I came across this unanswered question...  the easiest way to fix the modal so it doesn't scroll with the entire page is to set the body of the page to overflow:hidden and . This is most easily done by applying a class to the body when the modal is present and removing the class when the modal is cleared.

    body.modal
    {
       overflow:hidden;
       ;
    }

    Tuesday, June 10, 2014 12:37 PM