App Designer Object Positioning Not working. Grid not working. Resize window doesn't resize objects correctly.

I'm trying to postion basic components on an app using App Designer, as GUIDE is no longer avaliable, and when I run the app my components are moved off screen or laying over each other. There doesn't seem to be a way to resizable windows in app designer.

There's no code written for any of these attempts. Just running an empty UI with no callbacks.

Attempt 1) Place objects directly on the figure.

The objects were placed directly in design view. On running, the top of the objects are above the top of the window. I understand this is because of the windows menu bar at the top. So Attempt 1b) I just shuffled all the component down leaving space at the top. The issue then is that the amount of space needed changes inversly with the size of the window. So that didn't work.

Attempt 2) Use grid layout.

New figure. place a grid layout on the figure. I simplified down to 1 column and 4 objects. Label on top, list box, button, button. If I set the rows in the GridLayout to fixed it works fine, but as soon as I resize the window nothing scales with it. I want the label on top and the buttons underneither to stay fixed and the list box to resize, so I set the listbox row to weighted 1. When run, for some reason the list box now extends behind the buttons at the bottom.

Attempt 2b) I tried adding a grip row below the listbox and fixing it at 10, thinking it would add a buffer space, but didn't work. 2c) fix this buffer row space to 50. Looked fine when first run, but then when you expand the window the list box goes behind the buttons again. 2d) set the row to weighted, now it's a huge empty space below the listbox however its resized.

Attempt 3) AI recomended using a panel. So now figure. placed a panel on the emtpy figure and set it to the size of the figure, then place a grid on the panel. On the panel I Set AutiResizeChildren to off. This effectivly recreated Attempt 1, where the top of the objects was above the top of the window.

So now I'm stuck and very frustrated! I need to convert a complex plotting tool that was built using GUIDE into App Designer but I can't build even basic UI's in app designer and have them resizable. The tool I'm looking to convert/rebuild contains around 100 objects on the GUI and then there are multiple fogures beyond that which I also need to convert.

Answer 1

[Maddie]

Hi @Gregory,

I just saw the app you uploaded and it looks like you're running into the issue described here, where the app components are misplaced due to a Text size setting. Specifically, the Accessibility Text size setting on a Windows computer.

The screenshots here show the same issue when I have the setting above 100%, vs. at 100%. To avoid this issue while also keeping the desired text size, the recommended workaround is to use the Scale setting (in Display) rather than Text size (in Accessibility). Sorry that you're running into this issue! I'd recommend following the bug report to get updates on new workarounds or future fixes.

[Gregory]

Hi, Yes that's the issue and it worked as intended.

Does Mathworks have any plans to fix the bug to allow the use of larger fonts in windws?

Changing Start > Settings > Accessibility > Text size does correct the problem but now the readability it bad.

Changing Start > Settings > System > Display doen't really fix this as it makes everything look strangly fuzzy and almost out of focus.

Answer 2

[Jacob Mathew]

Hey @Gregory,

The goal is to setup the grid row and columns to the number that you require and then snap the elements like buttons and axes into place imagining them as merging those cells of the grid layout. I tried to recreate the app you made above using grid layout and it looks as follows:

If I click on the grid element, you can see how the elements are aligned within the grid:

The setup for this grid is as follows:

You can read more about grid layout component, its properties and examples too at the MathWorks documentation below:

https://www.mathworks.com/help/releases/R2024b/matlab/ref/uigridlayout.html#mw_c51139db-ea41-4666-a1e2-b353a37a6405

[Gregory]

What does your app look like when you run it?

I followed your process. New app, insert layout, define the grid layout (2 column, 3 rows), set the height of the bottom row for the buttons, run.

You can see in the image, it looks great in Design View, but once running the listbox is over the top of the axis, and the right button is over the top of the left one.

[Jacob Mathew]

Hey @Gregory,

Could it be that you are resizing the app's figure window somwhere?

Plus if you could share your mlapp file I can try to debug it to see what is going on within. For reference, I have attached how my mlapp is and you can cross reference that too.

[Gregory]

Hi Jacob,

Please find my app attached.

I dont think I resized anything, I was careful not to. I just built the app in the simplest way possible to try to find the problem. There isn't even any code behind it at all.

Thank you for your help.

Regards,

Greg