1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    2
    Vote Rating
    0
    ch-world is on a distinguished road

      0  

    Default Element.scrollIntoView

    Element.scrollIntoView


    public function scrollIntoView([String/HTMLElement/Element container])

    * container : String/HTMLElement/Element
    (optional) The container element to scroll (defaults to document.body)

    but doesn't. Btw. second argument is missing in doumentation

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Bulgaria
    Posts
    23
    Vote Rating
    0
    Peter.Ivanov is on a distinguished road

      0  

    Default


    this doest work for me too

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    It works.

    The way round you must use it is

    Code:
    Ext.get("id-of-element-to-be visible").scrollIntoView("id-of-container-element");

  4. #4
    Ext JS Premium Member rex.staples's Avatar
    Join Date
    Jul 2007
    Location
    Austin, TX
    Posts
    35
    Vote Rating
    1
    rex.staples is on a distinguished road

      0  

    Default


    This work-around is very implementation specific. The id-of-container-element must be configured to scroll. In my example below, without adding the height and overflow attributes the scroll into view did not work:

    PHP Code:
    <div id="id-of-container-element" style="width:600px; height:400px; overflow:auto;">
      ... 
    lots of content here that is pushing my element out of view ...
      <
    div id="id-of-element-to-be-visible"> ... </div>
    </
    div
    How do I use Element.scrollIntoView() to scroll the document body so that the element is in view?

    I should note that I am using ext2.0.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    62
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Code:
    Ext.get("id-of-element-to-be visible").scrollIntoView(document.body);
    Obviously only works if the body is the element that must be scrolled to get the element into view.

    If you are using a Layout, then it's the Element of the Layout's containing the element you want in view that must be scrolled.

  6. #6
    Ext JS Premium Member rex.staples's Avatar
    Join Date
    Jul 2007
    Location
    Austin, TX
    Posts
    35
    Vote Rating
    1
    rex.staples is on a distinguished road

      0  

    Default


    I wish it were always as simple as document.body. Setting the document.body.scrollTop has no effect unless operating in quirks mode.

    http://www.quirksmode.org/js/doctypes.html

    My testbed used an HTML 4.01 transitional doctype and I was only ever able to scrollIntoView a scrollable div, but never the body; however using document.documentElement works (tested in FF, IE6, IE7).

    Specifically, I am now able to do this (when not in quirks mode):

    PHP Code:
    Ext.get("id-of-element-to-be-visible").scrollIntoView(document.documentElement); 
    I was completely wrong when I said I was implementing this with ext2.0; I was actually doing all these tests against ext1.1. Unfortunately the discovery above does not work with ext2.0. It seems ext2.0 is only able to scrollIntoView a scrollable div (even in quirks mode).

    Whereas ext1.1::Element.scrollIntoView() could be patched with a ternary Ext.isStrict test, ext2.0::Element.scrollIntoView() needs some additional love.

  7. #7
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    Thanks for digging into this Rex. I will do some testing in Strict mode.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  8. #8
    Ext JS Premium Member
    Join Date
    Aug 2008
    Posts
    40
    Vote Rating
    0
    jnadler is on a distinguished road

      0  

    Default


    Did anyone ever come up with a fix/workaround for this? I'm in strict mode and scrollIntoView() isn't working. No error, but no scroll either in FF3.