cssblazor-server-sideazure-mapsazuremapscontrol

Why does my component have a height of 0?

I am using the AzureMapControl <AzureMap> component in a Blazor server-side web app. If I have it as the sole content of my Index.razor page, it displays fine. (This was in a small sample app I wrote).

But when I move it to my application I want to use it in, which has a lot of stuff in the MainLayout.razor, it has a height of 0. I finally tried to force a height doing the following:

<div style="width: 600px; height: 600px;">
<AzureMap Id="map"
          CameraOptions="new CameraOptions { Zoom = 12 }"
          Controls="new Control[]
{
    new ZoomControl(new ZoomControlOptions { Style = ControlStyle.Auto }, ControlPosition.TopLeft),
    new CompassControl(new CompassControlOptions { Style = ControlStyle.Auto }, ControlPosition.BottomLeft),
    new StyleControl(new StyleControlOptions { Style = ControlStyle.Auto, MapStyles = MapStyle.All() }, ControlPosition.BottomRight)
}"
          StyleOptions="new StyleOptions { ShowLogo = false }"
          EventActivationFlags="MapEventActivationFlags.None().Enable(MapEventType.Ready)"
          OnReady="OnMapReadyAsync" />
</div>

But it's still a height of 0: enter image description here

What can cause this and how do I get it to have a height?

Solution

  • Ok, this is a really horrible hack. (And I'll have to figure out what values to set based on the browser window size.) But it works.

    Add the following style:

    <style>
    #map {
        width: 600px;
        height: 600px;
    }
</style>

<AzureMap Id="map"
          CameraOptions="new CameraOptions { Zoom = 12 }"
          Controls="new Control[]
                {
                    new ZoomControl(new ZoomControlOptions { Style = ControlStyle.Auto }, ControlPosition.TopLeft),
                    new CompassControl(new CompassControlOptions { Style = ControlStyle.Auto }, ControlPosition.BottomLeft),
                    new StyleControl(new StyleControlOptions { Style = ControlStyle.Auto, MapStyles = MapStyle.All() }, ControlPosition.BottomRight)
                }"
          StyleOptions='new StyleOptions { ShowLogo = false, Language = "en-US" }'
          EventActivationFlags="MapEventActivationFlags
                .None()
                .Enable(MapEventType.Ready, MapEventType.Click, MapEventType.DragEnd, MapEventType.SourceAdded)"
          OnReady="OnMapReadyAsync"
          OnDragEnd="OnMapDragEnd"
          OnSourceAdded="OnDatasourceAdded" />