Null 检查破坏了我的 Blazor wasm web 应用程序的 UI

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;
}