Sidebar width property not working

[HappyCamper]

I've got a sidebar that is displayed when a user does an operation in my app that opens up with a pdf inside it (PDF control is within another control). The sidebar just targets the body (no target specified), however it doesn't matter what I set the width property, the sidebar always just displays at the default size.  

If I inspect the page once the sidebar is open, I can see the style is set to the width specified, however the sidebar still just shows as the normal default width.  Any ideas how I can troubleshoot this so I can get to the bottom of it?

Also, any possibility that the sidebar width can be set as a percentage of the page width rather than a static px value?

Sidebar code:

<SfSidebar ID="ReportSlider"

            @ref="SidebarObj" 

            Width="800px"

            Position="SidebarPosition.Right"

            @bind-IsOpen="Visible"

            Type="SidebarType.Over">

    <ChildContent>

            <div class="rightbar-title pt-2 pb-2">

                <a rel='nofollow' href="javascript:void(0);" class="right-bar-toggle float-right">

                    <i class="dripicons-cross noti-icon" @onclick="CloseProfileBar"></i>

                </a>

                <h5 class="m-0">View Report</h5>

            </div>

            @if (Visible)

            { 

                <CMCPdfView CompanyID="@CompanyID" ReportType="@ReportType" RecordId="@RecordId" />

            }

    </ChildContent>

</SfSidebar>

[Indhumathy Loganathan]

Hi HappyCamper, 

 

Greetings from Syncfusion support. 

 

Query 1: Width property not working 

 

We have validated your reported query in Sidebar component and unable to reproduce the reported issue. The Sidebar width property is working fine and style changes are reflected in Browser. 

 

Please find our validation sample from the below link. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Sidebar_blazor-1580287652 

 

Since we unable to reproduce the issue in our end, please share us complete code snippets of your sample. If possible, please revert us by replicating the issue in the above sample. 

 

Query 2: Width can be set as a percentage 

 

You can set width property as percentage like the below code. 

 

            <SfSidebar ID="ReportSlider" 

                       @ref="SidebarObj" 

                       Width="20%" 

                       Position="SidebarPosition.Right" 

                       @bind-IsOpen="Visible" 

                       Type="SidebarType.Over"> 

                <ChildContent> 

                    <div class="rightbar-title pt-2 pb-2"> 

                        <h5 class="m-0">View Report</h5> 

                    </div> 

                </ChildContent> 

            </SfSidebar> 

 

Please let us know if need any further assistance. 

 

Regards, 

Indhumathy L 

[HappyCamper]

Thanks...... but that didn't solve my problem.

For anyone else that has this problem (probably because some parent is blocking the width property...) I fixed it by adding !important to my width property:

<SfSidebar ID="ReportSlider"

            @ref="SidebarObj" 

            Width="50% !important"

            Position="SidebarPosition.Right"

            @bind-IsOpen="Visible" 

           HtmlAttributes="HtmlAttribute"

            Type="SidebarType.Over">

    <ChildContent>

            <div class="rightbar-title pt-2 pb-2">

                <a rel='nofollow' href="javascript:void(0);" class="right-bar-toggle float-right">

                    <i class="dripicons-cross noti-icon" @onclick="CloseProfileBar"></i>

                </a>

                <h5 class="m-0">View Report</h5>

            </div>

            

    </ChildContent>

</SfSidebar>

[Keerthana Rajendran]

Hi HappyCamper,  

 

Most welcome. We are glad to know that the issue has been resolved. Please get back to us if you need further assistance. 

 

Regards, 

Keerthana.