Radzen panel menu

Radzen.Blazor Components
1

Hi Guys

I've been driving myself insane trying to figure out how to remove the gradient effect when clicking a panel menu item.
I've been using the browser dev tools changing all the css but can't for the life of me find the relevant part has anyone got any ideas ?

Thanks

2

Hi @wizard123,

Are you referring to the ripple effect? It is enabled by default in the Material theme as required by specification. You can use a different theme if you don't want it.

3

Yes thanks the ripple effect when you click the button, is there no way to override it in material without changing theme ?

4

Not to worry i figured it out, thanks for your time.

5

@wizard123 How did you go about disabling the ripple effect? I would like to know. Thanks.

6

@wizard123 HOW??????????

7

There isn't a built-in way to disable the ripple effect but you can build your own material theme without it. Here is how.

  1. Clone the Radzen.Blazor github repository
  2. Open the Radzen.Blazor.csproj with Visual Studio.
  3. Edit material-base.scss and remove all CSS rules that contain rz-ripple e.g.
    .rz-button {
  @include rz-ripple($pseudo: true);
}
  4. Save material-base.scss and build the project.
  5. Copy wwwroot\css\material-base.css to your application and include it instead of _content/Radzen.Blazor/css/material-base.css
1 Like
8

Hi @korchev!

I´m trying this solution that you proposed. And I can't find the path _content/Radzen.Blazor/css/material-base.css in my project, to paste the modified material-base.css file from the repository.
Could you help me please?

9

Hi @Luar79,

Please check the steps once again. They are not asking you to open _content/Radzen.Blazor/css/material-base.css.

10

Ok, that I have come to understand in those steps, we have to link the new material-base.css file, from _host.cshtml. So let's make link in this way: .
Ok, I tried it like this, and it didn't work. And I have verified that material-base.css file that all the controls that have @include rz-ripple($pseudo: true) have been properly commented; What could be wrong?

In my application, we are using humanistic theme, in the wwwroot/css folder we complement it with more code both in the site file and in another file, which we link from _Host. I'm telling this in case it helps, I don't know if it's incompatible to be referencing two Radzen themes.

Thank you again.

11

The humanistic theme doesn't use the ripple effect at all. Only the material theme uses it. I am not sure what problem you are referring to.

12

Ok I have done all this steps:

  1. Clone the Radzen.Blazor github repository
  2. Open the Radzen.Blazor.csproj with Visual Studio.
  3. Edit material-base.scss and remove all CSS rules that contain rz-ripple e.g.
.rz-button {
  @include rz-ripple($pseudo: true);
}
  1. Save material-base.scss and build the project.
  2. In _Hosts.Cshtml put : and in wwwroot/css I have pasted material-base.css that I have copied of the Radzen.Blazor clone project.

After all these steps, I have verified that it has been used in my project, the new material.base.css file, from the path wwwroot/css, and it is still seen the ripple effect.
The problem that the ripple effect is still being seen, could be because there be another step to do more?

Thank´s again.

13

There isn't another step. You can use your developer tools to see if the CSS that contains the ripple exists or not.

14

@korchev
Ok, look at the developer tools, it seems that it is because when loading the application the material-base.css file is called from wwwroot/css and also the same file from _content.
I have already tried ways to disable that call to _content without success. In my project there is no call to _content/Radzen.Blazor/css/material-base.css
Do you have any idea to solve it?

Thank´s again.

15

This probably comes from RadzenTheme. You can remove it.

1 Like
16

@korchev
Okey thanks. The thing, is that I think you think that Radzen is installed in my project, with the Radzen repository, and really Radzen is installed with Nuget. If I'm not mistaken, I believe, Is why I won't be able to access the Radzen.Themes libraries and delete the base-material one?

Thank you very much again for this help!

17

The built-in material theme that ships with the Radzen.Blazor nuget package has the ripple effect. If you want to remove the ripple effect you need to use a customized version of the theme (or use another theme which doesn't have the ripple). This thread shows how to do that. Nothing more to add really.

1 Like