App Designer - elements in radio button group change position on opening app designer

I have an app that has a radio button group that is added to a grid layout. Every time I open App Designer, the buttons (and text) within the radio button group change position. More specifically, the buttons shift down (the bottom value for each button decreases by 4).

This isn't necessarily an error, but it's driving me nuts because the buttons shift down and eventually I have to manually move them back up after a couple days. I'm not sure if it's the way App Designer is initializing or if this is some kind of setting I need to change in MATLAB. It seems like App Designer is running some auto-formatting routine at the end of initialization because after opening up App Designer I see that it has made changes (via the *) without me touching anything.

More details:

• App Designer opens on my main laptop screen (1920x1200)
• This happens regardless of whether I move the App Designer instance to a different screen or not
• I've tried changing some of the radio button group properties, but nothing seems to fix the issue.

[Mario Malic]

Try to remove and then add the component, maybe this will work. Otherwise, contact support so they fix your file.

Answer 1

[Ayush Singh]

Hey Garrett,

As far as I can understand the issue you are facing is in position of radio buttons.

While there is no straightforward "setting" in MATLAB that controls this kind of behavior, here are some considerations that might help mitigate or understand the issue better:

1. Since the issue persists regardless of the screen App Designer is on, it might not be directly related to screen resolution or DPI (dots per inch) settings. However, MATLAB GUI components can sometimes behave unexpectedly due to high DPI settings or scaling factors set in the operating system. If you have not already, try setting your display scaling to 100% to see if that stabilizes the behavior. This is especially relevant if your laptop or monitors have high pixel density.
2. As a workaround, you could consider adding a startup function to your app that programmatically resets the positions of the radio buttons to your desired coordinates. This is not an ideal solution, as it does not address the root cause, but it could serve as a temporary fix.

% Inside your app startup function
% Assuming you have a radio button group named 'radioButtonGroup'
% and individual buttons named 'rb1', 'rb2', etc.
% Here Position is the property of radio button
app.rb1.Position(2) = desiredYPosition1;
app.rb2.Position(2) = desiredYPosition2;
% Set the positions for each button as needed

Also if possible can you share the code to reproduce the issue if above workarounds do not work.

[Garrett Sneed]

Hey thanks for the response, Ayush! The app I am currently working on is very loaded with stuff, so I reproduced my issue with a much smaller example using grids, tabs, and the radio button group. See attached app1.mlapp. When I created this example, the default window was set to 640x480. I do not see any buttons shifting when I save, close, then reopen this .mlapp file. However, when I change the height of the window to anything other than 480 pixels, the buttons would shift up/down as I mentioned before (never left/right for some reason). The shift amount seems to change depending on how big my radio button group height is.

GUI View of app1.mlapp:

Currently, the all of my grid row and column sizes are dynamic using ColumnWidth and RowHeight with values like [2x, 1x] and [3x, 9x, 1x] respectively. When I change these to use static sizes in pixels, my issue is resolved, however changing the size of the whole GUI figure tends to make the button group look a litle funky.

I'll try to run my tests again with a change in my display settings and a reboot. My current display settings for my laptop screen are 1920x1200 with 125% scale. I'll attempt this at 1920x1080 with 100% scale. I'll update if anything changes.

Thanks again for your help!

UPDATE: The issue still persisted regardless of these settings

• After messing around with this example app a little more, it seems like the radio buttons are automatically moved upon opening the .mlapp file in App Designer. The grid layout where the radio button group is chages its size dynamically to the number of pixels over/under 480.
• For example: if I change the grid layout to have ColumnWidth = [1x, 1x] and RowHeight = [1x, 1x] where the radio button group is in the top-left quadrant of this grid, then changing the size of GUI from 480 pixels ---> 500 pixels will result in the buttons shifting up 10 pixels. If I change the radio button group to span across both rows and run the same test, then the buttons move up the full 20 pixels.
• I am checking the pixel values by exporting the .mlapp file to a .m file before closing, then exporting it again to a different file after opening and saving the same .mlapp file. I then use a compare tool to check.

It seems like this could be a bug in App Designer. I'm not sure if this is a viable (or even a remotely easy) fix, but if we had the ability to use grids within button groups, then the buttons could theoretrically snap into place and be deterministic in its position relative to the button group size.