Problem with overflow in TWebScrollBox

[Shelton_Gary1 (Shelton Gary)]

Hello all,
I am having a problem with sizing. I have main body of my form inside a scrollbox, this part works fine. Inside the box I have 3 panels, each alTop aligned. The bottom 2 panels will be sized dynamically as items are added.

The problem is with the top panel (Work Orders), it has a label alTop aligned, a panel alBottom aligned with an image alClient aligned with an up or down indicator to resize the Work Orders panel, and finally a TWebScrollbox alClient aligned inside.

I will add Work Order items from a database, right now there is a button to add them. They are added inside a Panel alTop aligned with 1 - 3 images alRight depending on criteria and a label alClient aligned. The panel will hold 2 Work Orders before scrolling is required, and the used can expand the Work Order panel to see more than 2 at a time while still scrolling if necessary.

Problem 1) Once 3 or more Work Orders are added and then the Work Order panel is expanded then collapsed the Work Order Item overflows the Scroll box. I reload the Items on collapsing to prevent this, but obviously that is undesirable.

Problem 2) The biggest, and most frustrating is here. When running in Chrome Dev Tools on compile all works fine (With Item reload), however if a mobile device is selected and you refresh the browser you get completely different results! The Scroll Box overflows when adding the first Work order Item.

I have found web positioning very challenging. Any help would be appreciated.
Gary

TestTMSUI.zip (68.5 KB)

[Shelton_Gary1 (Shelton Gary)]

Forgot to mention, when loaded from a web server the app performs as in the dev tools, so not what is desired

[brunofierens]

Do you use the latest version of TMS WEB Core?
I retested this here but as you see, there are many items in the first scrollbox and it starts scrolling.
I see the code to reload the items is commented, but when I expand and collaps, this behavior looks normal to me?

So, I'm not sure how to reproduce what you see?
If a problem persists with the latest version, do you have more precise instructions to reproduce this?

[Shelton_Gary1 (Shelton Gary)]

Bruno,
Thank you for always being so quick to respond.
Previous versions:
TMS Webcore 2.8.1.0
FNC Core 4.1.1.3
FNC UI Pack 6.5.1.1
I updated Webcore to 2.8.2.0 and the behaviour in the Work Orders Panel is now working, however anytime the device causes the whole screen to be scrolled I get a right margin.

Gary

(My personal phone I test on)

[Shelton_Gary1 (Shelton Gary)]

Bruno,

Try adding just 2 items so the main scrollbar is not triggered then expand pnlWorkOrders then collapse and the Scrollbox will not resize on it's own.

If you uncomment ReloadItems you get a better experience, and I can probably solve the margine problem by dynamically changing the right margine when the scrollbard are added or removed. Roes the TWEBScrollbox have an event to add or remove the scrollbars that I can respond to? what is the width of the Scrollbars?.

Even so the reload should not be neccessary, the scrollbox should resixe on it's own.

Gary

[Shelton_Gary1 (Shelton Gary)]

Bruno,
Please be patient.
Displaying on an any of the included emulated devices except the iPhone SE works fine because the sbxDashboard (Base container) never displays its scrollbar. Even in your example image once the scrollbars are required a 16px right margin is added. This is not the desired look. The scrollbar is only a 3px semi-transparent disappearing effect and is not implemented consistent.

Here are more examples:

The desired appearance on iPhone SE or my phone (360 X 640).

Device (iPhone SE) Width = 375
sbxDashboard Width = 375
pnlWorkOrders Width 369 ( -6px margin 3px X 2)
sbxWorkOrders Width 365 ( - 4px pnlWorkorders Border 2px X 2)
pnlWorkOrderItem Width 359 ( -6px margin 3px X 2)

The WorkOrderItem has a nice bottom border with a 3px margin, the Icons are set to a height of 38px with a bottom border of 2px to keep them slightly above the border, and a top margin of 5px gives a nice spacing.

Having scrollbars show/hide or the WorkOrder panel should not affect these dimensions.

When adding the third Item and activating the sbxWorkorders scrollbar 16px are added to the right. The scrollbar is visible, but as you can see the 16px margin is unnecessary.

Now expanding the WorkOrders panel activates the sbxDashboard so the panels can be scrolled, however no margin is added, this looks as intended, and scrolls nicely.

Now collapse the WorkOrders panel, and even without the sbxDashboard needing space for scrollbars a 16px margin is added to the right.

Hopefully you get the same results. Uncommenting out the ReloadWorkOrderItems procedure solves the sbxDashboard margin problem, but the sbxWorkOrders 16px margin remains. I was off by 1 in the reload procedure, here is an update:

procedure TfrmDashboard.ReloadWorkorderItems;
var
lCount: Integer;
i: Integer;
begin
lCount := FCount;
if lCount = 0 then
Exit;
ClearWorkorders;
for i := 0 to lCount - 1 do
AddWorkorder;
end;

Thank you again for your patience.

[Shelton_Gary1 (Shelton Gary)]

Bruno,

I solved the issue with css.

I added or created a new class with 'max-width: 100%;', this had to be added to each component inside the pnlWorkOrders.

While this works isn't this the point of Align = alClient?

Gary

[brunofierens]

We have seen an issue with incorrect TWebScrollBox scrollbar size calculation on mobile devices. We applied a fix for this that will be included in the next release.