Search code examples
htmlcssbootstrap-5devexpress-blazor

Why is it adding a horizontal scroll bar

I am getting a horizontal scroll bar and I can't figure out why. I have reduced it down to as simple as I can. But there's a fair amount here. But this way I am providing what I think is everything relevant.

If there's anything more I should add, please let me know. And is there a way to have the browser provide a single css file of everything relevant to the page? It would be nice if along with the rendered html, there was a way to provide a single css.

The web page is basically a <h3> and a form with just one control. I gave the form a blue border to show the form is not the problem. Here's the web page with the scroll to the left.

enter image description here

And here it is fully scrolled right

enter image description here

As you can see, the form is the width of the browser so it's not causing the scroll bar - unless there's something that adds margin to the form's right, which I could not find. There's definitely no margin to the form's left.

Here's the raw html (browser view page source):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css?v=coGWgpNGDM1Wzc18lTxde46RTppTfW9Oz4m8mCTmpf0" rel="stylesheet" />
    <link href="css/site.css" rel="stylesheet" />
    <link href="css/menu.css" rel="stylesheet" />
    <link href="LouisHowe.web.styles.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <script src="/js/Interop.js"></script>
</head>
<body>
    <main b-jv8gxb7csr>
        <div class="my-main-scrollbar" b-jv8gxb7csr>
            <h3>Dashboard</h3>
            <form style="border: 5px solid blue;">
                <div id="idfdca2d08-f895-43e0-922c-d655c9bb9588" class="dxbl-fl dxbl-fl-loading">
                    <div class="dxbl-row">
                        <dxbl-form-layout-item class="dxbl-col-md-12 dxbl-col dxbl-fl-item dxbl-fl-item-horizontal" id="id31058717-b0c5-4528-9b0f-2142faf1d24d">
                            <label class="dxbl-fl-cpt dxbl-text">
                                Full name:
                            </label>
                            <div class="dxbl-fl-ctrl">
                                <dxbl-input-editor id="id955558a4-4ae4-44e2-bd8a-ee978babe2f6" class="valid dxbl-text-edit" bind-value-mode="OnLostFocus">
                                    <input name="id955558a4-4ae4-44e2-bd8a-ee978babe2f6" autocomplete="off" type="text" id="idaab9cdbd-47f2-4b14-a075-5c553a2c28f5"></input>
                                </dxbl-input-editor>
                            </div>
                        </dxbl-form-layout-item>

                    </div>
                </div>
            </form>
        </div>
    </main>
    <div id="blazor-error-ui">
        An unhandled exception has occurred. See browser dev tools for details.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.server.js"></script>
    <script type="text/javascript" src="/_vs/browserLink" async="async" id="__browserLink_initializationData" data-requestId="2611f4ebf7d54be7a31d7c9120f10b14" data-requestMappingFromServer="false" data-connectUrl="http://localhost:65118/e19ec81e873b426a9ed54d25b9b587bc/browserLink"></script>
    <script src="/_framework/aspnetcore-browser-refresh.js"></script>
</body>
</html>

Here's the computed css for <body>

enter image description here

And for <main>

enter image description here

And for <div class="my-main-scrollbar">

enter image description here

And for the form

enter image description here

I can't find anything that is adding that little bit of width. But here's a bit of weirdness. If the EditForm is set to width:99%, then no scroll bar. So it's adding something to the right of the form. But what/how?

enter image description here

Solution

  • Okay, I've been able to create a possible minimal reproducible example:

    <div style="height:500px;width:100%;background-color:blue">
    <EditForm Model=Main>
        <div style="width:100%; border: 1px solid black; background-color:pink; margin:2px;">Some stuff</div>
    </EditForm>
</div>

    I think you'll find that one or more of the dxbl classes have non-0 margins, which would make a lot of sense since they are clearly column formatters.