ICEfaces
  1. ICEfaces
  2. ICE-1569

Expanded tree nodes overflow the scrollable div in IE

    Details

    • Type: Bug Bug
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 1.5.3
    • Fix Version/s: 1.6.1
    • Component/s: ICE-Components
    • Labels:
      None
    • Environment:
      Internet Explorer
    • Affects:
      Documentation (User Guide, Ref. Guide, etc.)

      Description

      When you have a tree component inside of a scrollable div, if you expand the tree, it will overflow the actual div. Only happens in Internet Explorer. Attached is a screenshot of the issue as well as an example.
      1. ICE-1569.rar
        9 kB
        tjohnson
      1. draganddropwithIE.JPG
        13 kB
      2. ff-overflow-auto.JPG
        27 kB
      3. ie-overflow-auto.JPG
        39 kB
      4. screenshot_ICE-1569.JPG
        67 kB

        Activity

        Hide
        Adnan Durrani added a comment -

        It came across that the problem exists in the drag and drop .js. So I reported a bug to the scriptaculous bug reporting system. Please see the link below.
        http://dev.rubyonrails.org/ticket/8749

        Show
        Adnan Durrani added a comment - It came across that the problem exists in the drag and drop .js. So I reported a bug to the scriptaculous bug reporting system. Please see the link below. http://dev.rubyonrails.org/ticket/8749
        Hide
        Adnan Durrani added a comment -

        This snapshot is taken with the stock scriptaculous. Which demonstrates the same issue.

        Show
        Adnan Durrani added a comment - This snapshot is taken with the stock scriptaculous. Which demonstrates the same issue.
        Hide
        Ken Fyten added a comment -

        Waiting for fix from Scriptaculous

        Show
        Ken Fyten added a comment - Waiting for fix from Scriptaculous
        Hide
        Adnan Durrani added a comment -

        Many developers want to have large trees with draggable nodes. To accomplish this the draggable pabelGroups can be used as nodes of the tree and to avoid the page scrolling, the tree component can be put inside the scrollable div by setting its width, height and overflow to auto but after all these efforts it does not work properly.

        It came across that, when Scriptaculous creates a Draggable component, it makes a call of Element.makePositioned(element) function which changes the default position "static" to "relative". Which seems to work fine in all cases except when the parent component's overflow is being set to the "auto".

        So if the position of the drag element is set to "relative" and the overflow property of its parent element is set to auto, the Drag and Drop component manifests different issues with different browsers. Please see the attached images for detail.

        To fix this problem, ICEfaces made some changes so the developers can use draggable components inside the scrollable div. please see the following revision# 14708 for the changes.

        So In order to use draggable nodes inside a scrollable div, developer must need to set "dragOptions" to "dragGhost". (e.g.)

        <ice:panelGroup draggable="true" dragOptions="dragGhost" ..../>

        Show
        Adnan Durrani added a comment - Many developers want to have large trees with draggable nodes. To accomplish this the draggable pabelGroups can be used as nodes of the tree and to avoid the page scrolling, the tree component can be put inside the scrollable div by setting its width, height and overflow to auto but after all these efforts it does not work properly. It came across that, when Scriptaculous creates a Draggable component, it makes a call of Element.makePositioned(element) function which changes the default position "static" to "relative". Which seems to work fine in all cases except when the parent component's overflow is being set to the "auto". So if the position of the drag element is set to "relative" and the overflow property of its parent element is set to auto, the Drag and Drop component manifests different issues with different browsers. Please see the attached images for detail. To fix this problem, ICEfaces made some changes so the developers can use draggable components inside the scrollable div. please see the following revision# 14708 for the changes. So In order to use draggable nodes inside a scrollable div, developer must need to set "dragOptions" to "dragGhost". (e.g.) <ice:panelGroup draggable="true" dragOptions="dragGhost" ..../>
        Hide
        pablos Santivanez added a comment -

        hi,
        icefaces 1.7.0 and 1.8.0 fixes this problem..... in IE7?

        This error will continuosly be read...

        Show
        pablos Santivanez added a comment - hi, icefaces 1.7.0 and 1.8.0 fixes this problem..... in IE7? This error will continuosly be read...

          People

          • Assignee:
            Unassigned
            Reporter:
            Tyler Johnson
          • Votes:
            2 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: