maker in sidebarpanel

sblb 1,166

Hi, I've updated the blazor wasm to net core 6 and right now I have a markes r in SibeBarpanel (see the picture below).
Do you know I can disable this markers?
thanks in advance

Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2023-01-05T01:25:26.333+00:00

Hi @sblb ,

Try to use F12 developer tools Elements to find maker elements, then according to it to find the element in your sidebar panel, then add CSS style to disable the makers.

You'd better to share the relates code about the sidebar panel and the maker, without any of code, it is hard to help you fix it.
sblb 1,166 Reputation points

2023-01-05T06:19:15.51+00:00

Hi,
in dev tools I see the marker

How I can disable this marker?
Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2023-01-05T07:21:50.787+00:00

Hi @sblb ,

Try to add a style attribute for the li, and set the display property as none. Refer to this sample:

sblb 1,166

In index.html in client side I've put : <li style="display:none" ><a href="/css/app.css" target="_blank"></a></li> I've always the maker.

Have you an idea ?
I just want to disable the maker

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu" >  
    <nav class="flex-column" >  
         <li class="nav-item px-3">  
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">  
                <span class="oi oi-home" aria-hidden="true"></span> Home  
            </NavLink>  
        </li>  
</nav>  
</div>

Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2023-01-06T02:39:27.01+00:00

Hi @sblb ,

Can't produce the problem according to your shared code, might be the issue relates the @NavMenuCssClass or other code. Can you create a minimal, complete sample to reproduce the problem?
sblb 1,166 Reputation points

2023-01-06T06:36:40.29+00:00

I have no code that refers to the marker.
I use the radzen library I thought that was the problem.
I went to the radzen forum apparently it is not from their library.
This came up when I created my blazor wasm net6 core project.
Zhi Lv - MSFT 32,011 Reputation points Microsoft Vendor

2023-01-06T07:11:02.637+00:00

This came up when I created my blazor wasm net6 core project.

If you create a new Blazor WebAssembly application whether it has this maker or not?
sblb 1,166 Reputation points

2023-01-06T09:40:54.577+00:00

I've created a new project blazor wasm and there is no maker. I don't why there is this maker.
I've installed a library Radzen and there are no markers.

You will find here the link of the exchange that I've in radzen forum 12679

Either I create a new app or I delete the marker in my current app. I prefer the second solution for 2 reasons 1. not understand this bothers me and 2. It gives me a lot of work to start my app all over again

have you an idea?

Accepted answer

AgaveJoe 26,191 Reputation points

2023-01-06T14:01:59.873+00:00

::marker is a CSS pseudo-element related to an HTML list element which controls the bullets.

https://developer.mozilla.org/en-US/docs/Web/CSS/::marker

It is not clear if the <li> tags are within a <ul> or <ol> tag. I'm guessing the HTML is malformed which is causing the issue. If you look at the screenshot the <li> tags have an underline. Place your cursor over the underline. You should get a pop up a message telling you what's wrong with the HTML.

Visual Studio Example

Perhaps learning the HTML ordered and unordered list will help solve this issue? Otherwise share enough code so the community can reproduce this issue and explain your user interface design intent.

https://www.w3schools.com/html/html_lists.asp
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

1 additional answer

sblb 1,166

.
I don't want maker.

The structure of mainlayout.razor is

 36 lines (30 sloc) 1.11 KB  
<div class="top-row ps-3 navbar navbar-dark">  
    <div class="container-fluid">  
        @*<a class="navbar-brand" href="">AppWeb</a>*@  
                   
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">  
            <span class="navbar-toggler-icon"></span>  
        </button>  
    </div>  
</div>  
  
<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">  
    <nav class="flex-column">  
         <li class="nav-item px-3">  
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">  
                <span class="oi oi-home" aria-hidden="true"></span> Home  
            </NavLink>  
        </li>  
        <li class="nav-item px-3">  
            <NavLink class="nav-link" href="developer" Match="NavLinkMatch.All">  
                <span class="oi oi-list-rich" aria-hidden="true"></span> Engineering Change  
            </NavLink>  
          
         </li>  
    </nav>  
</div>  
  
@code {  
    private bool collapseNavMenu = true;  
  
    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;  
  
    private void ToggleNavMenu()  
    {  
        collapseNavMenu = !collapseNavMenu;  
    }  
}

AgaveJoe 26,191 Reputation points

2023-01-07T12:44:05.81+00:00
As I suspected the HTML is malformed. The Visual Studio editor and the browser's dev tools are alerting you the HTML is malformed. It's confusing why you are ignoring these alerts.

Plus I provided links which clearly and openly explain the unordered list HTML syntax so it seems you ignored the links too. Why do you consistently ignore the community's advice?

The bottom line is you should fix the malformed HTML!

I suspect you are using a CSS framework. So, fixing the malformed HTML will allow the CSS framework to find the HTML elements and apply the documented format.

For completeness, the CSS syntax to remove the bullets is...

Inline:

<ul style="list-style-type: none;"> <li>Item 1</li> <li>Item 2</li> </ul>

However, the following might removed the bullets depending on how the forgiving the browser is.

<li class="nav-item px-3" style="list-style-type: none;">

If you are using a CSS framework the li elements will certainly not render as expected since the framework excepts properly formatted HTML.

As explained to you over the last several months, it is much easier to develop web application when you make an effort to learn the fundamentals rather than guessing and/or mindlessly copying and pasting code from the internet.