SFMap within SfTab only 20px tall

[James Bennett]

I can't seem to get SfMap to be 100% of the height of the page (or even a fixed height, say 500px) when displayed under a SfTab.

Suggestions?  

[CODE]

<div class="container-fluid">

        <SfTab LoadOn="ContentLoad.Init" Height="100%">

            <TabAnimationSettings>

                <TabAnimationPrevious Effect="AnimationEffect.None"></TabAnimationPrevious>

                <TabAnimationNext Effect="AnimationEffect.None"></TabAnimationNext>

            </TabAnimationSettings>

            <TabItems>

                <TabItem>

                    <HeaderTemplate>Data</HeaderTemplate>

                    <ContentTemplate>

                        <SfGrid TValue="StolenVehicleModel" DataSource="@model" AllowPaging="false">

                             <!-- snipped out this stuff -->

                        </SfGrid>

                    </ContentTemplate>

                </TabItem>

                <TabItem>

                    <HeaderTemplate>Map</HeaderTemplate>

                    <ContentTemplate>

                        <div class="min-vh-100">

                            <SfMaps Height="100%" Width="100%">

                                @* To zoom and pan *@

                                <MapsCenterPosition Latitude="39.7285" Longitude="-121.8375"></MapsCenterPosition>

                                <MapsZoomSettings Enable="true"

                                                  ZoomFactor="13" MaxZoom="16"

                                                  Toolbars='new string[]{"Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset" }'>

                                </MapsZoomSettings>

                                <MapsLayers>

                                    <MapsLayer LayerType="ShapeLayerType.OSM" TValue="string">

                                        <MapsMarkerSettings>

                                            <MapsMarker Visible="true"

                                                        DataSource="recoveredVehicles"

                                                        Shape="MarkerType.Circle"

                                                        Height="10" Width="10"

                                                        TValue="RecoveredStolenVehiclesModel">

                                            </MapsMarker>

                                        </MapsMarkerSettings>

                                    </MapsLayer>

                                </MapsLayers>

                            </SfMaps>

                        </div>

                    </ContentTemplate>

                </TabItem>

            </TabItems>

        </SfTab>

    </div>

[/CODE]

[Swetha Babu]

Hi James,

Thank you for contacting Syncfusion support.

We are able to reproduce the reported issue. However, we will analyze further and update you with further details on February 16, 2021.

Regards,
Swetha Babu

[Swetha Babu]

Hi James,

Thank you for your patience.

We have confirmed the reported issue as a defect and logged a defect report for the same. However, we will include the fix for the reported issue in our upcoming release which is expected to be available by the start of March 2021. Please find the below feedback link to keep track of the reported issue.

https://www.syncfusion.com/feedback/22533

Please let us know if you need any further assistance.

Regards,
Swetha Babu

[Sarasilmiya Shahul Hameed]

From: James Bennett
Sent: Thursday, February 18, 2021 8:39 AM
To: Syncfusion Support <[email protected]>
Subject: RE: Syncfusion support community forum 162500, SFMap within SfTab only 20px tall, has been updated. 

Thanks, though I get ‘access denied’ when I use your provided link:  https://www.syncfusion.com/feedback/22533 

[Swetha Babu]

Hi James,

Sorry for the inconvenience caused.

We have modified the provided feedback link. Please find the modified feedback link for your reference below.

https://www.syncfusion.com/feedback/22533

Please let us know if you need any further assistance.

Regards,
Swetha Babu

[Swetha Babu]

Hi James,

Thank you for your patience.

When we render the Maps component inside the Tab component with the fixed height and fixed width of the parent element, then the map gets rendered properly in our latest NuGet package release. You can update our packages to resolve the reported issue. But, when we set the class as “min-vh-100” to the tab element then the map is not getting the proper height from the parent element. We usually get the client height of the div element in the Maps component. However, we will check this issue and update you with further details on March 3, 2021.

Regards,
Swetha Babu

[James Bennett]

I update the package to .46 and removed the min-vh-100 div, but the map is still tiny.

Can you share a snippet of HTML with Tabs & Map that work correctly?

[Swetha Babu]

Hi James,

Sorry for the inconvenience caused.

When we render the Maps component inside the Tab component, we can set the fixed height and width of the parent element that encloses the Maps component. The issue will still be reproduced. This is because, the Maps component will be rendered initially not in the tab change. To resolve this, we need to refresh the Map component in the "Selected" event of the Tab component using the Refresh() method. Please find the below code snippet for your reference. 

<div class="container-fluid"> 

    <SfTab LoadOn="ContentLoad.Init" Height="100%"> 

        <TabEvents Selected="TabCreate"></TabEvents> 

        <TabAnimationSettings> 

            <TabAnimationPrevious Effect="Syncfusion.Blazor.AnimationEffect.None"></TabAnimationPrevious> 

            <TabAnimationNext Effect="Syncfusion.Blazor.AnimationEffect.None"></TabAnimationNext> 

        </TabAnimationSettings> 

        <TabItems> 

            <TabItem> 

                <HeaderTemplate>Data</HeaderTemplate>                 

            </TabItem> 

            <TabItem> 

                <HeaderTemplate>Map</HeaderTemplate> 

                <ContentTemplate> 

                    <div style="height:500px;width:100%;"> 

                        <SfMaps @ref="maps" Height="100%" Width="100%"> 

                             To zoom and pan 

                            <MapsCenterPosition Latitude="39.7285" Longitude="-121.8375"></MapsCenterPosition> 

                            <MapsZoomSettings Enable="true" 

                                              ZoomFactor="13" MaxZoom="16" 

                                              Toolbars='new string[]{"Zoom", "ZoomIn", "ZoomOut", "Pan", "Reset" }'> 

                            </MapsZoomSettings> 

                            <MapsLayers> 

                                <MapsLayer LayerType="ShapeLayerType.OSM" TValue="string"> 

                                </MapsLayer> 

                            </MapsLayers> 

                        </SfMaps> 

                    </div> 

                </ContentTemplate> 

            </TabItem> 

        </TabItems> 

    </SfTab> 

</div> 

  

@code { 

    SfMaps maps; 

    public void TabCreate() 

    { 

        maps.Refresh(); 

    } 

} 

Please find the sample application for the same from the below link. 

  

https://www.syncfusion.com/downloads/support/forum/162500/ze/Maps_(2)-2074225776 

  

Please let us know if the above sample code meets your requirement.

Please let us know if you need further assistance.

Regards,
Swetha Babu 

[Sarasilmiya Shahul Hameed]

From: James Bennett
Sent: Wednesday, March 3, 2021 11:41 AM
To: Syncfusion Support <[email protected]>
Subject: RE: Syncfusion support community forum 162500, SFMap within SfTab only 20px tall, has been updated. 

Sigh. 

In my many incarnations to get this right I had created some local CSS for the tabs, once I removed that it worked fine. 

Thanks so much for your assistance, the level of support you provide is fantastic and much appreciated! 

James 

[Swetha Babu]

Hi James,

Thank you for your update.

Most Welcome! Please let us know if you would require any further assistance.

Regards,
Swetha Babu