Why does 'Scrollable' UI container interactivity only work when components are "above or to the right" of the visible window?

The built-in functionality for UI containers 'Scrollable' interactivity (eg, uifigure) only works when components are "above or to the right of the container". This seems somewhat counterintuitive for building UIs for people who are used to reading from top to bottom. So, why is this a fixed behaviour?

A more intuitive approach would seem to be to enable scrolling when components are below or to the right of the container, or, better still, to enable scrolling whenever components fall outside the container in any direction, above/below, left/right.

It would also be helpful to have built-in optional behaviour for UI containers to revert back to the original view when scrolling is enabled, without the need to explicitly call scroll() (- to get this working inside AppDesigner currently requires the use of a pause hack).

Answer 1

[Dinesh]

Hi Michael,

You're correct. According to MATLAB documentation, scrollable containers allow scrolling when components are above or to the right of the container's bounds.

Link to documentation: https://www.mathworks.com/help/matlab/ref/matlab.ui.figureappd-properties.html

This behavior may seem unconventional as it differs from typical UI patterns where scrolling is enabled for content below or to the right. It's likely a specific design choice for which the reason is unknown to me.

I will update the answer if I can find anything.

Update:

For figure, tab, panel, and button group, the scrollable content area is restricted to the positive quadrant, above the horizontal axis and right of the vertical axis for a couple reasons.

First, it is a common pattern to create components off-screen then move them into view when needed. This pays the performance cost at start-up and makes some interactions faster. If the scrollable area included the full coordinate space there would be no place that was off-screen, making this pattern impossible to implement and hindering existing apps that wished to use scroll support.

Second, the scrollable content area makes it possible to create much larger graphics canvasses. While technically the possible area is still infinite, bounds on the left and bottom give us two reference edges against which we can bound the graphics canvas size to prevent excess graphics memory consumption or other possible issues.

The reason why "top-right" is followed is mainly for compatibility with MATLAB's coordinate system which places the origin at the bottom left corner, and for apps that were using the negative-y space for off-screen components.

Top down layout is possible though I understand the trickiness because you need to ensure that no component crosses the horizontal axis or it could be clipped. It is up to you to define what the "top" is in that case. It is tricky, which is why we have "uigridlayout" which is intended to provide an application-style, top-down layout with the ability to host other containers, components, or axes.

Link to "uigridlayout" documentation: https://www.mathworks.com/help/matlab/ref/uigridlayout.html

An example to demonstrate the top-down layout using "uigridlayout":

fig = uifigure('Position', [100, 100, 300, 300]);

% Create a scrollable grid layout inside the figure
gl = uigridlayout(fig, 'Scrollable', 'on');
gl.RowHeight = repmat({30}, 20, 1); % 20 rows and 1 column with fixed row height
gl.ColumnWidth = {'1x'};

% Add buttons to each cell of the grid layout (Adds in a top down fashion)
for i = 1:20
    uibutton(gl, 'Text', ['Button ' num2str(i)]);
end

If "uigridlayout" is not something that works for you, please let me know and I will look into this issue further.