www.webdeveloper.com
Results 1 to 9 of 9

Thread: IE 9 Horizontal Scroll Bar Issue

  1. #1
    Join Date
    Sep 2010
    Posts
    5

    Question IE 9 Horizontal Scroll Bar Issue

    The problem

    There is a bug that I'm working on which involves a page that contains a portlet with a fixed width and horizontal scroll bar - the scroll bar does not appear to work in IE 9, but all other browsers seem to be fine.

    For simplicity I reduced the page to the following HTML snippet containing the style and javascript.

    This HTML document displays a scrollable div with some text and a section that is right aligned which is updated via javascript so that it will continually displayed as right aligned.

    And yes, there are many other ways to accomplish this using pure CSS, but what I don't understand is this - why does updating the style.left of some child element stop the scroll from happening?

    It just doesn't make sense to me. Also... the reply "IE is just weird/buggy..." is not what I'm looking for

    The Code

    Available as a gist

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <style>
    #scroller{
      overflow: auto;
      width:500px;
    
      /*
        Remove height:100% and you get some weird behavior in IE9.
        The initial scroll stops, but second scrolling attempt works
        but the scroller div keeps growing vertically any time you
        scroll horizontally.
    
        Keep it, and the horizonal scroll is basically useless.
        Clicking the handle only scrolls one pixel, clicking the
        arrow buttons will only allow one scroll (continuous scroll
        is not working). Clicking the trough (or track) seems 
        unaffected
      */
      height:100%
    }
    #content{
      width:600px;
    }
    #buttonBar{
      position: relative;
    }
    #buttonArea{
      float: right;
    }
    </style>
    
    <script>
    function onScroll(scroller, event) {
      var buttonBar = document.getElementById('buttonBar');
      buttonBar.style.left = scroller.scrollLeft + 'px';
    }
    </script>
    </head>
    <body>
    
    <div id="scroller" onscroll="onScroll(this,event)">
    
      <div id="content">Scrolling Content</div>
      <div id="buttonBar">
        <div id="buttonArea">
          Right Aligned
        </div>
      </div>
    
    </div>
    
    </body>
    </html>

  2. #2
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    Ha! You should see what is does is IE7. While the scollbar is functional and the Right
    Aligned text is stationary, the whole thing is odd. (I am not willing to get IE9 yet)

    Guesses, wild and accusatory, aside from IE9 sucks?

    Is the event being stolen from IE by your function? That is, is the event being ignored by
    the browser since you've hijacked the event? Only a slight chance of this being the
    problem. A possible solution for this hypothetical problem is return false or return true
    from the onScroll function.

    Additionally, try changing the name of the function to something which does not
    resemble an event name.

    You've already got position:relative; so maybe you've tried absolute already.

    Is there any error console in IE9? If, for some reason you've caused an error, I wonder if
    IE9 will hang.

    Try <script type="text/javascript"> just to be pedantic and/or remove the strict
    specification of your DOCTYPE.

    Good luck.

  3. #3
    Join Date
    Sep 2010
    Posts
    5
    Thanks Draco for your feedback.

    Is the event being stolen from IE by your function? That is, is the event being ignored by the browser since you've hijacked the event?
    Can you elaborate more on the hijacking of the event? If by this you mean that I've included the event on the function call in the <div id="scroller" onscroll="onScroll(this,event)"> - because in this example I'm not using the event I removed this and it does not affect the behavior either. But still I'm interested in what you mean by hijacking the event. I didn't know it was bad form to do this.

    You've already got position:relative; so maybe you've tried absolute already.
    Yes i could easily put position:absolute;right:0px; on #buttonBar and then position:relative on #scroller (and account for the space on the bottom with some padding because position:absolute removes the button bar from the normal flow which means it will be on top of the scroll bar) - and then i don't even need the javascript...

    however - as i mentioned - that is a better way to solve the same problem, but what I'm interested in is ... what am I doing wrong here, and why is IE 9 not letting me scroll the box??

    As for your other guesses:

    Additionally, try changing the name of the function to something which does not resemble an event name.
    The name of the function is not contributing to the problem. I can change this and the behavior is the same.

    Is there any error console in IE9? If, for some reason you've caused an error, I wonder if IE9 will hang.
    Yes there is an error console using F12 developer tools (which comes automatically in IE9). That was the first thing I thought of - there are no JS errors. If you put a breakpoint, you can step through the code and on the surface nothing seems to be wrong - except that the horizontal scroll doesn't work.

    Try <script type="text/javascript"> just to be pedantic and/or remove the strict specification of your DOCTYPE.
    This also does not affect the behavior.

    Here is a modified version of the original with the following changes:
    • Changed doctype to transitional
    • Added type="text/javascript" to the script.
    • Changed the function name to not coincide with the event name.
    • Removed the comment in the CSS
    • Removed the event argument in the function call.


    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <style>
    #scroller{
      overflow: auto;
      width:500px;
      height:100%
    }
    #content{
      width:600px;
    }
    #buttonBar{
      position:relative
    }
    #buttonArea{
      float: right;
    }
    </style>
    
    <script type="text/javascript">
    function moveTextOver(scroller) {
      var buttonBar = document.getElementById('buttonBar');
      buttonBar.style.left = scroller.scrollLeft + 'px';
    }
    </script>
    </head>
    <body>
    
    <div id="scroller" onscroll="moveTextOver(this)">
    
      <div id="content">Scrolling Content</div>
      <div id="buttonBar">
        <div id="buttonArea">
          Right Aligned
        </div>
      </div>
    
    </div>
    
    </body>
    </html>
    Oh - and one more quote

    (I am not willing to get IE9 yet)
    Neither am I!! But I use a VM image that I got from a co-worker that lets me use it (I am not even willing to get Windows 7 on my work PC either). Unfortunately for me customers like IE even though I personally hate IE and wish it would just die.

  4. #4
    Join Date
    Sep 2010
    Posts
    5
    One thing i forgot - I updated the onscroll to have "return true" and the same problem happens.

    Note: if you comment the line
    // buttonBar.style.left = scroller.scrollLeft + 'px';

    The scroll works - but the text obviously will not stay right aligned.

  5. #5
    Join Date
    Apr 2006
    Location
    Perth
    Posts
    154
    I had a play with it and put borders around them all. Interesting that FF6 shows no
    height for buttonBar. I doubt this has any effect on the problem. Speaking of height,
    the scoller DIV has a height of 100&#37;. 100% of what? The parent has no specified
    height. Remember that many CSS attributes cannot be changed if they are not
    specified initially.

    I added a width to buttonBar of 100% and found that the width of content can be
    increased when the mouse drags the scrollbar way off to the right. Very odd. Setting
    the width to 99% seems to make it function correctly. I wonder if this has solved the
    IE9 problem?

    I may have to set myself up a spare computer and fill it full of every browser I can find.

    Code:
    <style>
    #scroller{
      overflow: auto;
      width:500px;
      height:100%
    }
    #content{
      width:600px;
    border:1px solid black;
    }
    #buttonBar{
      position:relative;
    border:1px solid red;
    width:99%;
    }
    #buttonArea{
      float: right;
    border:1px solid blue;
    }
    </style>

  6. #6
    Join Date
    Sep 2010
    Posts
    5
    I may have to set myself up a spare computer and fill it full of every browser I can find.
    If you haven't already done so, you should try out VMWare player and get a base install of Windows XP and another with Windows 7. That way you can make copies of the images so you can install every version you want of IE/FireFox/Chrome without any conflicts. The only thing you have to pay for, of course, is the Windows licenses (and of course the huge amount of hard drive space it will take).

    And about the height 100&#37; - I'm not entirely sure about why that was put there to begin with - but it does contribute to the problem. You can see my original comment

    Remove height:100% and you get some weird behavior in IE9.
    The initial scroll stops, but second scrolling attempt works
    but the scroller div keeps growing vertically any time you
    scroll horizontally.

    Keep it, and the horizonal scroll is basically useless.
    Clicking the handle only scrolls one pixel, clicking the
    arrow buttons will only allow one scroll (continuous scroll
    is not working). Clicking the trough (or track) seems
    unaffected
    This div height growing vertically as you do things causing the page to grow inexplicably is something I've ran into with IE 9 before. And I really can't figure out why it happens.
    Last edited by codefactor; 08-30-2011 at 01:20 PM.

  7. #7
    Join Date
    Dec 2011
    Posts
    1

    it's the overflow:auto

    i realize i'm months behind on this, but this stumped me yesterday and found this thread. hopefully my answer helps:

    it's the overflow: auto in #scroller that's messing things up. you'll have to change this to scroll, possibly:

    Code:
    #scroller {
        overflow-x: scroll;
    }
    if you don't want the vertical scrollbars.

    note that you'll have to code your js to determine if you need a scrollbar so you can set overflow-x to visible (the default) if there are no overflows and scroll if there are, simulating auto.

  8. #8
    Join Date
    Dec 2012
    Posts
    2
    Being an issue I have just come across and after searching around I found this page to be useful. However I came up with a solution that is in javascript (jQuery):

    Code:
    if (document.documentMode && document.documentMode == 9) {
        var contentHeight = $('#'someEle')[0].scrollHeight;
        var maxHeight = 500;  
        if (contentHeight > numericalMaxHeight) {
            $('#' + contents.tableName + '_wrapper').css('height', maxHeight + 'px');
        } else {
            $('#' + contents.tableName + '_wrapper').css('height', '100%');
        }
    }
    Hope this helps someone.

  9. #9
    Join Date
    Dec 2012
    Posts
    2
    Sorry I did not take out all my own specific code!

    Code:
    if (document.documentMode && document.documentMode == 9) {
    * * var contentHeight = $('#someEle')[0].scrollHeight;
    * * var maxHeight = 500; *
    * * if (contentHeight > numericalMaxHeight) {
    * * * * $('#someEle').css('height', maxHeight + 'px');
    * * } else {
    * * * * $('#someEle').css('height', '100%');
    * * }
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles