App Designer GUI cutting off at top

Hi

When I design an app I find any elements at the top of the canvas are cropped (see image attached). This is not a problem for apps I design myself as I can just move the elements down a little, but when my colleagues send me apps, I am unable to access the top portion even when resizing the window.

Is there a way to fix this behaviour?

Many thanks!

[Sourabh]

Could you share which Release of MATLAB are you using?

[Gareth]

I'm using 2024b (I was on 2024a and just updated - still have the same problem).

[Abhiram]

Can you see if changing the Text Size to 100% resolves the issue?

Go to Windows Start menu > Settings > Accessibility > Text size and set the Text Size to 100%

[Gareth]

Thanks. I've tried that but it's no different (it was on the recommended 125%). But I do feel it must be something with my Windows display settings. I'll try playing with them and see what happens.

Answer 1

[Kevin Holly]

I'm going to make the assumption that your colleague has a different screen resolution. I would suggest using the UI Component uigridlayout which can be found in the Component Library within App Designer. I would drag this component onto the app after all other UI Components have been placed. With the grid layout, columns and rows can be have a property of fit, fixed, or weighted. This can dictate how the UI Components scale when the UIFigure window size is changed. You could also change the WindowState property of the UI Figure to be normal, maximized, minimized, or fullscreen. Alternatively, you can create a startup function and position the app. For instance:

function startupFcn(app)
    app.UIFigure.Units = "normalized";
    app.UIFigure.Position = [0.1 0.1 0.8 0.8];
    app.UIFigure.Units = "pixels";
end

Please let me know if this does/doesn't resolve the issue.

[Gareth]

Hi

Thanks.

The problem is, when I am sent mlappinstall binaries I can't make changes to the code. If I have the code, I can fudge it by dragging the components a bit further down on the canvas or use the uigridlayout as you suggest. But for binaries, there is nothing I can do except ask the person that sent it to me to modify it or send me the code so I can modify it myself.

This seems to be a problem with my setup as I shouldn't have to fudge things in the first place! I have tried a range of screen resolutions and text scaling, and have installed R2024b from scratch but it still behaves strangely.

N.B. The gridlayout helped but it still cuts off on the right-hand side:

[Kevin Holly]

If it cuts off on the right side after using gridlayout, this could mean that the columns that are set to "fixed" add up to too many pixels to fit in the window. Perhaps you can make more columns "weighted". Also note that UI components can cover more than one grid, so you could make the knob bigger.

Once the app is properly made with the uigridlayout and then compiled to a binary, it should behave better with different screen resolution.

If you would like a video call to go over it, you can reach me at [e-mail].