Null checks ruin the UI of my Blazor wasm web app

Question

When I add a null check on a page, it messes with the UI, especially some of the bootstrap components of that page.

For example:

@if(Summary is null){
    <Spinner />
}
else
{
    <div class="col-4">
        <label class="mr-3 col-2 mt-3">My dropdown</label>
        <select class="form-control bootstrap-select col" id="kt_form_status">
            <option value="Today">Today</option>
            <option value="7 days">7 days</option>
            <option value="4 weeks">4 weeks</option>
        </select>
    </div>
}

displays this

and:

<div class="col-4">
        <label class="mr-3 col-2 mt-3">My dropdown</label>
        <select class="form-control bootstrap-select col" id="kt_form_status">
            <option value="Today">Today</option>
            <option value="7 days">7 days</option>
            <option value="4 weeks">4 weeks</option>
        </select>
    </div>

gives me this:

What am I missing or what can I do to stop/workaround this?

Answer 1

Here's the code you've given us in a standard Blazor template Index page.

I've:

1. Added a button to toggle Summary from null to a value.
2. Wrapped your column divs in rows to space out correctly.

Both look the same to me.

In your images there's two different styles applied, therefore there must be something your not showing us that is causing your problem.

@page "/"

<PageTitle>Index</PageTitle>

<div class="m-3 p-2 text-end">
    <button class="btn btn-primary" @onclick=Update>Update</button>
</div>

@if (Summary is null)
{
    <alert class="alert alert-danger">
        Summary is Null!
    </alert>
}
else
{
    <div class="row">
        <div class="col-4">
            <label class="mr-3 col-2 mt-3">My dropdown</label>
            <select class="form-control bootstrap-select col" id="kt_form_status">
                <option value="Today">Today</option>
                <option value="7 days">7 days</option>
                <option value="4 weeks">4 weeks</option>
            </select>
        </div>
    </div>
}

<div class="row">
    <div class="col-4">
        <label class="mr-3 col-2 mt-3">My dropdown</label>
        <select class="form-control bootstrap-select col" id="kt_form_status">
            <option value="Today">Today</option>
            <option value="7 days">7 days</option>
            <option value="4 weeks">4 weeks</option>
        </select>
    </div>
</div>

@code {
    private string? Summary;

    private void Update()
         => Summary = Summary is null ? "Not Null" : null;
}