Results 1 to 6 of 6

Thread: Inner panel not showing scrollbar as intended

  1. #1
    Sencha User
    Join Date
    Sep 2016
    Posts
    12

    Default Inner panel not showing scrollbar as intended

    Hello,

    In the below fiddle, I have a parent panel in vbox layout with two children panels. The parent and child panel B (the bottom-most panel in the parent) have a fixed height, and child panel A (the top-most panel in the parent) has a collapsible panel nested within it. Upon expansion of the collapsible panel, child panel A expands, pushing child panel B down. When this occurs, the bottom of child panel B is cut off by the parent panel.

    When this happens, I need to make child panel B scrollable. How would I go about doing so?

    https://fiddle.sencha.com/#view/editor&fiddle/255c

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    In your code, panel B (panel2) is already scrollable, but it has no content forcing scrollbars to appear. It still has a height (200) which when added to the height of panel A (220) exceeds the parent height, forcing panel B to be cut off. I think you'd have to decrease the height of panel B when the panel A subpanel is expanded.

  3. #3
    Sencha User
    Join Date
    Sep 2016
    Posts
    12

    Default

    Alrighty. Is there any sort of function that can be used to determine if panel B is being cut off by a parent container? I bet I could compare the bottom values of each container, but I was just wondering if there is a preexisting function for such a thing.

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,250
    Answers
    758

    Default

    From your fiddle, I'm not really sure what you want to happen. Making 'panel2' scrollable means the content of 'panel2' will scroll. It seems like, with the way things are configured, you would want scrollable: true on the outer-most panel "myTest".
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  5. #5
    Sencha User
    Join Date
    Sep 2016
    Posts
    12

    Default

    I modified the fiddle so that there is now content in panel2. If panel2 gets cut off by the parent container, I guess I need panel2 to take up the height between the bottom of panel1 and the bottom of the parent container (myTest). Then, I need panel2 to have a scrollbar.

    My initial thought is to find the height of what panel2 should be changed to by doing something like parentContainer.el.getBottom() - panel1.el.getBottom(). Then, I can set the height of panel2 to the value of the difference. Since scrollable is true on panel2, it should make the scrollbar visible. However, I am just curious if there is some method available that checks to see if a child container is cut off by a parent so that I can skip the subtraction problem.

  6. #6
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,250
    Answers
    758

    Default

    Use flex: 1 on panel2.
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Similar Threads

  1. [INFOREQ] IE is showing always a scrollbar on tab panel
    By fbo in forum Ext 5: Bugs
    Replies: 4
    Last Post: 17 Mar 2015, 12:17 AM
  2. Scrollbar showing when not needed
    By Rob16299 in forum Sencha Touch 2.x: Discussion
    Replies: 1
    Last Post: 13 Jan 2014, 3:07 PM
  3. scrollbar in tabpanel ie7 not showing
    By jackson1957 in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 3 Apr 2009, 1:28 PM

Tags for this Thread

Posting Permissions

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