How to resize width page after page is loaded?-CodePudding

I have a React App.

In this app, I have a Sidebar which is always on the left of the screen, and the entire app on the right :

const AppLayout = () => (
        <>
            <Header />
            <div className="flex">
                <Sidebar />
                <Outlet />
            </div>
        </>
    );

This Sidebar is loaded from my backend, so as it is a request from my API, the sidebar appear like 0.2s after the page is loaded.

This behaviour on mobile is a problem because the page load, set the size based on my <Outlet /> and then the Sidebar comes. So I end up with a horizontal scrollbar, just for the size of the sidebar.

I was wondering how to avoid this behaviour ? Is it possible with <meta name="viewport" [...] /> ?

Thank you very much for your time

CodePudding user response：

Whilst I am not particularly sure on how react works, I have encountered similar issues in normal html pages. I found that using media queries in CSS which set the properties of the class depending on the size of the screen width in pixels help to accomplish this.

Always start with the smallest screen first then size up my page accordingly using the media queries, changing properties as the screen scales up. You can use the inspector on the browser to view how your page reacts as you scale up to larger screens. Please note my example is written using SASS, but the concept is the same.

@media only screen and (min-width: 339px) {
    .flex-container {
        .progress-step {
            margin: 0 5% 0 0;
        }
    }
}

I also use a handy and lightweight framework called flexboxgrid (http://flexboxgrid.com/). This helps me to align and manage the content on the page in a more organised way.