Apps created with app designer are not displaying components positioned correctly

I replied with this issue to a Mathworks support comment on this thread:

https://www.mathworks.com/matlabcentral/answers/395508-why-does-the-app-not-resize-properly-for-different-screen-resolutions-in-app-designer

But did not get a reply. I will briefly describe the issue here, but that post has some information also. I have been using app designer since its inception and before that had been hand coding GUIs. I have never had a problem porting apps or GUIs from one machine to another until now.

I wrte apps for classes I teach as well as in consulting work and have for past several years been writing apps on these two machines currently with MATLAB 2024b, although I have been installing new releases as they came out for years, with no troubles

1. Dell Precision 5680 laptop running Windows 11. The app appears equally well when displayed on a connected DellUZ2715H 1920x1080 external monitor and when that monitor is disconnected and the display is the laptop display itself (1920x1200).
2. Dell Precision Tower 5810 runing Windows 10 and a Samsung S34CG50 wide screen monitor (3440x1440).

I have been running the apps on these machines as well as in MATLAB online and some Windows PCs the university owns for which we have a site MATLAB license, but I don't right now have the specs of those machines, but they are economical machines.

This week I wanted to move my online presentation activities to another location in my home and use a machine that is there:

Dell Micro Tower Optiplex Small Form Factor Plus 7010, running Windows 11 with a Dell UZ2315H 1920x1080 monitor on which I have installed MATLAB 2024b, with all of the recommended display settings.

The genesis of the problem, with some screen shots of the simple projectile app I was trying to use, etc can be found in the linked thread. I also wound up with a workaround there in which I experimentally deliberately mis-positioned components so that they will after the app opens be repositioned so that it looks roughly like it should. Here I show what I did to display the problem. I opened up App Designer and created a dummy app by simply dragging two axes components from the component library and also dragging 8 buttons on the figure. I did nothing else. No code no boxes checked etc. Here is a screenshot of what that looked like.

Then I clicked the green "run" diamond button in the Designer tab and the app executed and created components to look like this:

\

This shows the opened app backlit by my screen background. The positions of the components have been shifted from original , with several being outside the figure. I tried one of the suggestions in the other thread, checking the "Scrollable" box under interactivity for the UIFigure and this is the result of that

In none of these cases does resizing the figures improve the component locations. In the other thread I reported that I also tried the suggested code in the startup function and that did not fix the problem either. In the apps I was trying to run, if the execute button showed and I could click it, the numerical, plotting, and table entry parts of the codes work and for the components visible disply on the app. I would very much appreciate some advice on this. As it is now this machine (and hence the new location) is unusable if I want to show apps during presentations, which I do routinely. I have never seen this problem before, peculiar to what is otherwise a relatively standard configuration computer.

[Frank]

Update July 4.

I ran an identical dummy app on both the Small Form Factor (SFF) machine and the Precision Tower (PT). The dummy app is the same one I displayed above, it had two axes and 8 buttons arrayed around the UIFigure. The only change I made from the version displayed above was to put in a startup function that output the positions of all the components into a .mat file. Just for completeness, I will post the dummy app text at the end of this description. I wrote the postions into an excel file for display. Here is the result of running in on the two machines.

Positions and display on execution on the Precision Tower (the display matches the appearance in app designer)

Postions and display after app execution on the SFF machine (the display does not match the appearance in the app designer):

The positions of all of the app components and the UIFigure are identical in both cases, but on the SFF the display is distorted. I would very much appreciate any idea why this could be happening and what I can do to fix it. As it is, this rather generic pc is useless for MATAB apps.

Here is the text of the dummy app for reference, apologizing for the space taken but I want to be absolutley clear.

classdef app1 < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure  matlab.ui.Figure
        Button8   matlab.ui.control.Button
        Button7   matlab.ui.control.Button
        Button6   matlab.ui.control.Button
        Button5   matlab.ui.control.Button
        Button4   matlab.ui.control.Button
        Button3   matlab.ui.control.Button
        Button2   matlab.ui.control.Button
        Button    matlab.ui.control.Button
        UIAxes2   matlab.ui.control.UIAxes
        UIAxes    matlab.ui.control.UIAxes
    end

    % Callbacks that handle component events
    methods (Access = private)

        % Code that executes after component creation
        function StartUp(app)
           uipos = app.UIFigure.Position ;
           axespos = app.UIAxes.Position;
           axespos2 =  app.UIAxes2.Position;
           butpos = app.Button.Position;
           butpos2 = app.Button2.Position;
           butpos3 = app.Button3.Position;
           butpos4 = app.Button4.Position;
           butpos5 = app.Button5.Position;
           butpos6 = app.Button6.Position;
            butpos7 = app.Button7.Position;
            butpos8 = app.Button8.Position;
            save("app1.mat","butpos8","butpos7","butpos6","butpos5","butpos4","butpos3","butpos2",...
                "butpos","uipos","axespos","axespos2");

        end
    end

    % Component initialization
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)

            % Create UIFigure and hide until all components are created
            app.UIFigure = uifigure('Visible', 'off');
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'MATLAB App';

            % Create UIAxes
            app.UIAxes = uiaxes(app.UIFigure);
            title(app.UIAxes, 'Title')
            xlabel(app.UIAxes, 'X')
            ylabel(app.UIAxes, 'Y')
            zlabel(app.UIAxes, 'Z')
            app.UIAxes.Position = [116 211 300 185];

            % Create UIAxes2
            app.UIAxes2 = uiaxes(app.UIFigure);
            title(app.UIAxes2, 'Title')
            xlabel(app.UIAxes2, 'X')
            ylabel(app.UIAxes2, 'Y')
            zlabel(app.UIAxes2, 'Z')
            app.UIAxes2.Position = [116 14 300 185];

            % Create Button
            app.Button = uibutton(app.UIFigure, 'push');
            app.Button.Position = [433 31 100 22];

            % Create Button2
            app.Button2 = uibutton(app.UIFigure, 'push');
            app.Button2.Position = [30 31 100 22];
            app.Button2.Text = 'Button2';

            % Create Button3
            app.Button3 = uibutton(app.UIFigure, 'push');
            app.Button3.Position = [17 161 100 22];
            app.Button3.Text = 'Button3';

            % Create Button4
            app.Button4 = uibutton(app.UIFigure, 'push');
            app.Button4.Position = [17 293 100 22];
            app.Button4.Text = 'Button4';

            % Create Button5
            app.Button5 = uibutton(app.UIFigure, 'push');
            app.Button5.Position = [17 416 100 22];
            app.Button5.Text = 'Button5';

            % Create Button6
            app.Button6 = uibutton(app.UIFigure, 'push');
            app.Button6.Position = [433 141 100 22];
            app.Button6.Text = 'Button6';

            % Create Button7
            app.Button7 = uibutton(app.UIFigure, 'push');
            app.Button7.Position = [433 273 100 22];
            app.Button7.Text = 'Button7';

            % Create Button8
            app.Button8 = uibutton(app.UIFigure, 'push');
            app.Button8.Position = [415 416 100 22];
            app.Button8.Text = 'Button8';

            % Show the figure after all components are created
            app.UIFigure.Visible = 'on';
        end
    end

    % App creation and deletion
    methods (Access = public)

        % Construct app
        function app = app1

            % Create UIFigure and components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            % Execute the startup function
            runStartupFcn(app, @StartUp)

            if nargout == 0
                clear app
            end
        end

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end

Answer 1

[Image Analyst]

Yes, what you say is very true. I've spent hours with tech support to find some solution to the App Designer layout nightmare. Tech support says that the layouts are heuristically determined at runtime so that if you do any resizing, such as setting the WindowState of the figure to be maximized (which doesn't always work but the workaround is to maximize it programmatically in the startup function), then it tries to decide how to size and position the controls on your GUI. And it usually gets it wrong. Not only wrong, but inconsistently wrong. If I simply run the same program twice in a row, it can give drastically different sizes and positions of controls, and some controls are even off the edge of the GUI or overlapping each other. A real nightmare.

I've let the App Designer managers know of this layout problem, and of 25 other problems there are with App Designer. The other problems range from annoying to fatal crashes but this layout problem is one of the worst. I don't know why they can't just follow the way Microsoft does it in VIsual Studio with their docking, anchoring, and alignment features - those seem to work well. But now we're stuck with AppDesigner for GUI layout if you want to use R2025a or later, since they don't let you edit GUIDE apps anymore.

The first thing I tried was to make the gui the exact size of my screen by typing in the width and height into the Position property of the main GUI. Then I unchecked the checkbox that says "Resize children". Then set the WindowState property to "normal". Sad to say, it didn't work.

The best workaround tech support could give me is to apply a grid layout. Go to the "Containers" section of the Component Library and drop a grid layout onto your main GUI figure. It basically snaps all your components to an invisible (at runtime, not design time) grid. It makes your design time view ugly and cluttered but it seems to consistently put most (not all) controls where you'd expect them to be at runtime. (I still have an interior text box inside a panel that is positioned so that the top of the edit box is cut off by the top of the panel.)

You should call tech support and complain about this so they know how important it is to get it right.

[Frank]

Thanks for the confirmation that I am not alone. I will submit this to tech support, although it seems like they know about it already. The part that is peculiar to me is the seeming machine dependence of the problem, although it is a bit suspcicious tha the machine with the problem is newest machine.

[Image Analyst]

Even weirder than machine dependence is that the layout is not even consistent from one run to the next on the very same machine. (And my computer is only 6 months old.)

[Frank]

I plan to submit this sometime later today or tomorrow. In the meantime I did eliminate one element. I replaced the monitor on the SFF pc that is giving me trouble with a monitor from one of the other systems that works fine. I also configured the monitor connection to the SFF pc exactly like the connection on the other system, namely from data port to HDMI, instead of data port to data port as it had been on the SFF. The only component that is now different from the systems that work is the pc itself, and it is running the same verision of Windows 11 as one of the ones that work. The result is the same bad result as I had with the SFF in its orginial configuration. All systems including the SFF are updated to current in firmware, drivers and software and show no hardware issues from diagnostics. I am not sure if this is technically a Heisenberg bug or a bad girlfriend bug, but it is definitely a pain.

Answer 2

[Maddie]

Hi @Frank,

Sorry for catching this so late, I just shared a response on this thread that might match the same issue here. The tl;dr is, this is likely due to a known issue (see the bug report here) where app components do not appear in the right position, due to the Accessibility Text size setting.

To confirm if this is the same issue you're experiencing, you can check that in your computer system settings. There are still options for increased text size that will avoid this unintended behavior, detailed on the bug report. Again, sorry for not sharing this sooner. I hope this answers your question.

[Frank]

Maddie, Thank you!!!! I had actually given up on moving my online presentations to the nicer location (from where it is now in my lab/workshop area), but I just checked the simple workaround and it does indeed work around the problem. After the minor setting change, I checked a handful of the apps I use and they all had no appearance issues. Just in time too, my classes are about to start up for the fall term. Thanks so much for thinking to look for other sufferers. Mathworks is still the best...because the best people work with it and for it.

Answer 3

[Kalala]

I came accross a similar problem today in app designer and i solved it by just expanding the canvas. After i made sure all my components were on the canvas, it fixed it and looks a lot better.

[Bruce Rodenborn]

This has nothing to do with accessibilty text settings in WIN OS machines. It is, yet another, MATLAB 2025 bug that should be found and fixed rather than asking users to change OS settings. I have the same issue on a MACOS machine so text settings on WIN OS machines might minimize the bug, but does not fix the problem.

To demonstrate, I created a dummy app with two elements using all default settings and the button and the axes are clipped. The default resizing of UI elements means that the GUI does not display properly if the window is resized unless auto resizing of elements is disabled. See the image.

[Maddie]

@Bruce Rodenborn

Since this looks like a different issue, as it is on a Mac instead of Windows, I recommend you contact our Technical Support team (email [e-mail]) or create a separate MATLAB Answers post for this issue, so our team can take a closer look and try to help.

Thanks!