App designer putting components over plot

Hi,

I am working on a project that utilizes the app designer feature in matlab. I am trying to display a plot, and have a button and some output fields below the plot.

In the AppDesigner I have a plot with labels, and a couple components I just mentioned below (see image: AppDesigner). When I run the app, the formatting seems to be lost and the button, slider, and output field fall onto the plot (see image: Appoutput). The button is a call back which i used to run a matlab function that does some calculations and spits out a constant, and an array. The array is called car.r which is the only thing plotted, and the constant is called D which is outputed in the text box labeled "Outer Turning Diameter".

This is the only code that relates to the outputs. The slider and the box labeled yaw rate are not being used right now.

I am not sure why this formatting occurs. When I see other people put plots in with buttons, there's seem to work first try without any extra code or formatting. Does anyone know the solution to this problem? Thanks

%% Output

app.OuterTurningDiameterEditField.Value = num2str(round(D, 2))

%% Plotting

car.r = car.r * 3.28084;

plot(app.UIAxes, car.r(:, 1), car.r(:, 2), 'b-')

hold(app.UIAxes);

app.UIAxes.XLim = [min(car.r(:, 1)), max(car.r(:, 1))] + [-1, 1];

app.UIAxes.YLim = [min(car.r(:, 2)), max(car.r(:, 2))] + [-1, 1];

[VBBV]

pls share the mlapp code.

[Isaiah]

Here is the mlapp code

[VBBV]

I could not get same problem when i run the app, It seems that complete code is not shared.

 [D, car] = turningModel_App(car, 5);

This line calls another function turningModel_App

[Isaiah]

Sorry, here is the function called. That's interesting. Could it be a version issue?

[VBBV]

I checked it again, there is no such overlapping problem i get when i run the app.

Yes, It may be the version issue. Which one are you using ?.

[VBBV]

@Isaiah Also, check the scaling of Rowheight in the else part of code. This may be the actual cause of problem when the RunButton is pushed. Also, the SizeChangedFcn in UIFigure seems to be not working correctly,

function updateAppLayout(app, event)
            currentFigureWidth = app.UIFigure.Position(3);
            if(currentFigureWidth <= app.onePanelWidth)
                % Change to a 2x1 grid
                app.GridLayout.RowHeight = {494, 494};
                app.GridLayout.ColumnWidth = {'1x'};
                app.RightPanel.Layout.Row = 2;
                app.RightPanel.Layout.Column = 1;
            else
                % Change to a 1x2 grid
                app.GridLayout.RowHeight = {'1x'};  % this line 
                app.GridLayout.ColumnWidth = {273, '1x'};
                app.RightPanel.Layout.Row = 1;
                app.RightPanel.Layout.Column = 2;
            end
end

[Isaiah]

I am using 2023a, the code you mentioned that is not working correctly is inside the greyed section which is not editable. Is there a way to fix that?

[Isaiah]

I recently remade the app using the single pannel as opposed to the double panel which i had used above. And that seem to work without any issues. I'm gonna run with this solution for my time sake, but I apperciate the help a lot. Thank you.