Menu Bar gets display: none; inline style when adding padding.

[Dylan Davenport]

When I try to add padding to the Menu Bar container the Menu Bar is assigned display: none; as an inline style and becomes hidden. This happens when I try to use the Bootstrap 4 padding utility classes (p-0, p-1, p-2, etc.) either on the element in the document or on the parent that wraps the Menu Bar.

I can however apply padding via CSS but I would like to know why adding a simple Bootstrap 4 class breaks the entire component.

Attachment: Display_None_Added_235d8565.zip

[Aravinthan Seetharaman]

Hi Dylan, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. We cannot reproduce your reported issue in our while adding Bootstrap4 padding utility css. For your reference we have prepared code snippet, demo sample here. 

 

Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Menu_Css-1037653319  

 

 

@using Syncfusion.Blazor.Navigations 

<div class="container-fluid p-2"> 

    <div class="row align-items-center"> 

        <div class="col-6 d-flex justify-content-start"> 

            <div class="col-6 d-flex justify-content-end"> 

                <SfMenu TValue="MenuItem"> 

                    <MenuItems> 

                        <MenuItem Text="File"> 

                            <MenuItems> 

                                <MenuItem Text="Open"></MenuItem> 

                                <MenuItem Text="Save"></MenuItem> 

                                <MenuItem Text="Exit"></MenuItem> 

                            </MenuItems> 

                        </MenuItem> 

                        <MenuItem Text="Edit"> 

                            <MenuItems> 

                                <MenuItem Text="Cut"></MenuItem> 

                                <MenuItem Text="Copy"></MenuItem> 

                                <MenuItem Text="Paste"></MenuItem> 

                            </MenuItems> 

                        </MenuItem> 

                        <MenuItem Text="View"> 

                            <MenuItems> 

                                <MenuItem Text="Toolbars"></MenuItem> 

                                <MenuItem Text="Zoomr"></MenuItem> 

                                <MenuItem Text="Full Screen"></MenuItem> 

                            </MenuItems> 

                        </MenuItem> 

                        <MenuItem Text="Tools"> 

                            <MenuItems> 

                                <MenuItem Text="Spelling & Grammar"></MenuItem> 

                                <MenuItem Text="Customize"></MenuItem> 

                                <MenuItem Text="Options"></MenuItem> 

                            </MenuItems> 

                        </MenuItem> 

                        <MenuItem Text="Go"></MenuItem> 

                        <MenuItem Text="Help"></MenuItem> 

                    </MenuItems> 

                </SfMenu> 

            </div> 

        </div> 

    </div> 

</div> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Menu_Css_utility-492082992  

 

If you are still facing the issue, kindly share the below details. 

 

·        If possible, try to reproduce the reported issue in provided sample or share the issue reproducible sample. 

·        Please share us the video demonstration of this issue. 

·        Please share us the Syncfusion Package Version. 

 

Please provide the above requested information, based on that we will check and provide you a better solution quickly. 

 

Regards, 

Aravinthan S