B4J Question [SOLVED] Resizing ScrollPane doesn't adjust anchored contents

[walt61]

I must be missing something fundamental here. When resizing the form's width, the contents (which are all anchored in the Designer) don't appear to resize with the ScrollPane and its InnerNode. Any insights would be greatly appreciated!

Code (which is the attached test project):

Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI

    Private itemHeight As Double = 40dip
    Private verticalScrollbarWidth As Double = 25dip ' Just setting/using this so that the background colours are all visible
    Private ScrollPane1 As ScrollPane ' Designer background colour: RED
    Private PaneContent As B4XView ' Designer background colour: GREEN
    Private PaneItem As B4XView ' Designer background colour: BLUE
    Private LabelItem As B4XView ' Designer background colour: WHITE
End Sub

Public Sub Initialize
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)

    Root = Root1
    Root.LoadLayout("MainPage")

    ScrollPane1.LoadLayout("scrollpanecontent", 0, 0)
    PaneContent.Width = Root.Width - verticalScrollbarWidth
    PaneContent.Height = Root.Height
    ScrollPane1.InnerNode.SetSize(Root.Width - verticalScrollbarWidth, Root.Height)

    For i = 0 To 99
        Dim p As B4XView = xui.CreatePanel("")
        p.SetLayoutAnimated(0, 0, 0, PaneContent.Width, itemHeight)
        p.LoadLayout("item")
        LabelItem.Text = "Item " & i
        PaneContent.AddView(p, 0, i * itemHeight, PaneContent.Width, itemHeight)
    Next

    ' Resize the ScrollPane height
    PaneContent.Height = 100 * PaneItem.Height
    ScrollPane1.InnerNode.SetSize(Root.Width, PaneContent.Height)

End Sub

Private Sub B4XPage_Resize (Width As Int, Height As Int)

    PaneContent.Width = Width
    ' Innernode (PaneContent - GREEN) now resizes but its contents (BLUE) don't, and they're all anchored

End Sub

Before resizing:

After resizing:

 

[stevel05]

When you add the panes to panecontent they are not anchored. You need to resize them in the B4xPage_Resize sub:

Private Sub B4XPage_Resize (Width As Int, Height As Int)

    PaneContent.Width = Width
    
    For i = 0 To PaneContent.NumberOfViews - 1
        Dim P As B4XView = PaneContent.GetView(i)
        P.Width = Width - verticalScrollbarWidth
    Next
    ' Innernode (PaneContent - GREEN) now resizes but its contents (BLUE) don't, and they're all anchored

End Sub

 

[walt61]

Awesome, works like a charm (of course). Thanks a lot Steve!

 

[Mahares]

Awesome, works like a charm (of course).

@walt61 : Whay didn't you take the xCustomlistview approach instead of the ScrollPane. It would be a lot simpler. Of course unless you have a reason that I am not aware of. In that case, it makes sense. With xCustomlistview, this will be your full code and will accomplish the same thing you are doing:

Sub Class_Globals
    Private Root As B4XView
    Private xui As XUI
    Private itemHeight As Double = 40dip
    Private verticalScrollbarWidth As Double = 25dip ' Just setting/using this so that the background colours are all visible
    Private PaneItem As B4XView ' Designer background colour: BLUE
    Private LabelItem As B4XView ' Designer background colour: WHITE
    Private CustomListView1 As CustomListView
End Sub

Public Sub Initialize
End Sub

Private Sub B4XPage_Created (Root1 As B4XView)
    Root = Root1
    Root.LoadLayout("MainPageclv")   'has CustomListView1
    For i = 0 To 99
        Dim p As B4XView = xui.CreatePanel("")
        p.SetLayoutAnimated(0, 0, 0, CustomListView1.AsView.Width, itemHeight)
        p.LoadLayout("item")  'has PanelItem and inside it LabelItem
        LabelItem.Text = "Item " & i
        CustomListView1.Add(p, "Item " & i)
    Next
End Sub

Private Sub B4XPage_Resize (Width As Int, Height As Int)
    PaneItem.Width = Width
    For i = 0 To PaneItem.NumberOfViews - 1
        Dim P As B4XView = PaneItem.GetView(i)
        P.Width = Width - verticalScrollbarWidth
    Next
End Sub

Private Sub CustomListView1_ItemClick (Index As Int, Value As Object)
    Log(Value)    
End Sub

 

[walt61]

Thanks @Mahares , but indeed, I needed the ScrollPane this time (the code I provided was just to demonstrate my issue).

 

[johnmie]

Funny, I have the same problem, i.e. I don't know where to set the pane width in BBListItem.
My app contains an illustrated Help page using an expandable Customlistview with 12 panes in BBcode.
All except the first one display correctly, but the first one just shows only a very long but narrorw list (each word on a separate line).
HOWEVER. when I turn the tablet to change scree orientation back and forth and restart the page again, even the top pane appears correctly and full width.

I wonder why, particularly since the same app works without a problem in B4J.

Best,
john m.

 

[walt61]

Just a thought, but did you add e.g. Sleep(0) after creating a CLV item? That way it could give the UI time to update, could be worth a shot!

 

[johnmie]

Just a thought, but did you add e.g. Sleep(0) after creating a CLV item? That way it could give the UI time to update, could be worth a shot!

That was the first thing I tried, but did not help.
But I found the solution in the meantime and it was in a totally different area.
Thanks anyhow

 

[walt61]

? If it wasn't just a coding error, would you mind posting the solution for future generations?

 

[johnmie]

Coding error: the pane with was only set in panes. Very stupid of me, a no-brainer in hindsight.

 

[walt61]

Those can be the worst ones to tackle