Why are there random offsets in the alignment of my App Designer axes?

Folks,

When I click "Run" in AppDesigner, my single UI window that comes up has random differences in the vertical height and vertical position of my axes. These axes all have the same height and vertical position. Yet, when I close it and hit run again, the offsets can move to other plots. There seems to be an edge case situation here. Sometimes there are no offsets and it looks as intended. Any ideas? Version 2020a. I'm wondering if this is related to the thin horizontal length and the toolbar, which I set visibility to "off" in the startup.

Thanks,

Kris

[Kristoffer Walker]

Folks,

I could really use some expert app designer guidance on this one. Here is how my UI looks in AppDesigner "Design View" screen. When I click on "Run", the above view results. Note the vertical offsets and different vertical heights of the axes, which is somewhat random in which axes it affects. What can I check for or change to avoid this?

Thank you for viewing my post!

Kris

[Kristoffer Walker]

Folks,

Just another obseration. This issue goes away in the EXE version once I convert it to EXE using Matlab version 2018b Application Compiler. I do not have access to 2020a Application Compiler, so I cannot try it with that.

Kris

Answer 1

[Ajay Pattassery]

Is the axes are placed in a UI Grid Layout. If not try adding a Grid layout and then add these axes on each cells of the grid layout.Grid Layout can be selected from the component Library. Refer the following link.

[Kristoffer Walker]

Hi Ajay,

Thanks for the reply. I dragged "Grid Layout" on top of the UI. As I started crossing onto the individual graphs, the entire canvas (minus the menu bar) was highlighted in light blue. I took my hand off the mouse button to "release" the Grid Layout onto the canvas. Then App Designer grayed out and a spinning circle started to indicate it was working. The circle continued for 5 minutes until I got tired of waiting any longer and closed App Designer. They are only 12 graphs and about 7 other GUI elements on the canvas. I'll ignore this issue and improvements to App Designer or related Windows graphics DLL's will make this problem go away in the future.

Kris

Edited above to correct the "highlighted" details.

[Ajay Pattassery]

Hello Kris,

That is a very unusual time after dragging the grid layout to the app interface. It only takes seconds usually. Could you try again? While you are dragging the Grid layout to a space without the UI components, the region that is without any UI components should be highlighted as blue, not the Axis and UI component area.

Alternatively,You can try selecting all the axes and GUI components and cut (ctr + x or cmd + x) and paste on a temporary app. Then adding the Grid Layout to the app canvas and pull back and place the components back. Grid Layout is beneficial as the base point for an app since you could configure how the Grid cell behaves during the resizing of the app.

[Kristoffer Walker]

Hi Ajay,

I did it again. This time it only took about 10 seconds. See the two attached images. Note the second to the left axes are squished vertically. If I temporarily move the images, note the grid layout beneath. It seems going to "grid mode" eliminates the "position" property for all axes. So I do not know how to fix this problem.

Update: It seems that the font size greatly influences the fit of the axes into the constraints by the grid. This makes it a real challenge to manually figure out how to fit things around using this "automated" method. I note that simply deleting the Y-axis label does not seem to make a difference in the positioning of the axes in the grid cells. However, reducing the font size makes a difference. This is not intuitive.

Kris

[Ajay Pattassery]

If you click on the app.GridLayout from the component browser, in the below pan you can change the column and row width. Column width by default in values of say 1.2x,22x etc. You can play with the column and row width size to adjust the size of the ui components. You can also remove the columns and rows width values to adjust how the grid looks.

[Kristoffer Walker]

Ajay,

This is not working. In my view, a more practical implementation of rows and columns would be to permit one to put unique column lines within a single row, which do not affect other rows above and below. The non-grid approach is by far and away easier to use. There seems to simply be a bug in the software implementation that is causing my grids to not randomly not align when I click "Run", but they align fine when I compile to an *.exe app.

Kris

Edit: Ajay, by the way, I could not find any Column or Row Width under Inspector after clicking app.GridLayout in Component Browser. There seems that some important properties of the axes are hidden once you convert to a grid layout. The absence of these properties makes alignmnet, even with the grid, difficult if not impossible.