webview and toolbar

[Walter Martin]

I'm using a webview control to show a web page inside an android mobile phone.

Inside this page (made using blazor server) there's a datagrid with a toolbar where I want to show only the icons

If I open the page with a browser in the Pc, I see only the icons as I want, instead using the mobile phone I see the icons and the description.

Is there a way to hide the description even when showed in the mobile phone ?

[Suganya Sethuraman]

Hi Walter,

Greetings from Syncfusion.

We have analyzed your query. But we are not aware of your exact application scenario, so please share the following details,

1. Could you please share your sample

2. Is SfDataGrid used in your sample

It will help us to provide better solution at the earliest.

Regards,
Suganya Sethuraman. 

[Walter Martin]

Thanks for your reply

I try to better describe the problem.

I have a blazor server application version 19.2.0.48 published in a shared hosting server and a page with a

SfGrid where the text of the toolbar is hidden thanks to the following lines in a css file

 

.e-grid .e-control.e-toolbar .e-tbar-btn-text {

        display: none !important;

    }

When I open this page from a PC everything is showed as expected (only the icons are showed)

I created another application based on xamarin forms where I simply have this line of code:

<WebView HeightRequest="250" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand" Source="https://address.com/" />

to see the same page from an Android mobile phone

but this time the toolbar shows the text and the icons as in the attached picture so it seems to the the css is ignored

How can I solve the problem ?

Let me know if you still need a source code

Thanks

Attachment: Cattura_217e5f7e.zip

[Vignesh Natarajan]

Hi Walter,  

Thanks for the update.  

We have analyzed your query and we understand that you have tried to remove the toolbar items text using CSS solution. While implementing this solution, you are facing issue while rendering it inside the Mobile view. Instead of hiding the toolbar items text using CSS, we suggest you to follow the below solution to remove the toolbar text.  

We have defined the Toolbar items as a ItemModel and removed the text. Refer the below code example.  

<SfGrid ID="Grid" DataSource="@Orders" AllowPaging="true" Height="200" Toolbar=@Tool> 

    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) IsPrimaryKey="true" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

@code{ 

    public List<Order> Orders { get; set; } 

    private List<object> Tool = new List<object>() { new ItemModel() { Text = "", PrefixIcon = "e-add", Id = "Grid_add"}, 

        new ItemModel(){ Text = "", PrefixIcon= "e-edit", Id="Grid_edit"}, 

        new ItemModel(){ Text = "", PrefixIcon= "e-delete", Id="Grid_delete"}, 

        new ItemModel(){ Text = "", PrefixIcon= "e-update", Id="Grid_update"}, 

        new ItemModel(){ Text = "", PrefixIcon= "e-cancel", Id="Grid_cancel"} 

    }; 

    protected override void OnInitialized() 

    { 

        Orders = Enumerable.Range(1, 75).Select(x => new Order() 

        { 

            OrderID = 1000 + x, 

            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], 

            Freight = 2.1 * x, 

            OrderDate = DateTime.Now.AddDays(-x), 

        }).ToList(); 

    } 

Refer the below screenshot for your reference 

 

Please get back to us if you have further queries. 

Regards, 

Vignesh Natarajan 

[Walter Martin]

You understood perfectly and you solved me the problem, thanks.

I'm experiencing some other problems with css I suppose because in the blazor server application I'm using also a sfsidebar with a sfmenu filled with these lines

MainMenuItems.Add(new MenuItem

                    {

                        Text = "Condizioni meteo",

                        IconCss = "sf-icon-data-settings sf-icon",

                        Url = "gestionemeteomob",

                    });

                    MainMenuItems.Add(new MenuItem

                    {

                        Text = "Rapportini Addetto",

                        IconCss = "sf-icon-user-time sf-icon",

                        Url = "gestionerapportimob",

                    });

the IconCss are created using Syncfusion Metro and the web page is showed correctly in a PC's browser, in the mobile phone I see the Text value instead and not the icons as showed in the attachment

Is there a solution for that ?

Attachment: Cattura_1eb0ed91.zip

[Aravinthan Seetharaman]

Hi Walter, 

 

We have checked your query in our latest version 19.2.0.59. We cannot reproduce your reported issue in our end. We have prepared video demo and sample here. 

 

Demo: https://www.syncfusion.com/downloads/support/directtrac/general/ze/menu_icon-1776562215 

 

 

protected override void OnInitialized() 

    { 

        MainMenuItems.Add(new MenuItem 

 

        { 

 

            Text = "Condizioni meteo", 

 

            IconCss = "icon-user icon", 

 

            Url = "gestionemeteomob", 

 

        }); 

 

        MainMenuItems.Add(new MenuItem 

 

        { 

 

            Text = "Rapportini Addetto", 

 

            IconCss = "icon-bell-alt icon", 

 

            Url = "gestionerapportimob", 

 

        }); 

    } 

 

 

 

 
Sample:  

 

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, MenuBar related code snippet.
• Please share us your iconCss related code snippet and css.
• Please let us know, when you are assigning Menu Items to MenuBar.
• Please share us the video demonstration of this issue.
• Please check your issue with already available icons and let us know still you are facing same issue.

 

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

 

Regards, 

Aravinthan S

[Walter Martin]

Thanks for this reply, my mistake.

It was a bug in my project

Now everything works

[Aravinthan Seetharaman]

Hi Walter, 

 

Thanks for the update. 

 

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Aravinthan S