CSS isolating specific RadzenTextArea

Radzen.Blazor Components
1

I am trying to customize the scrollbar from a specific RadzenTextArea. I tested several css selections, but the only thing that works is to overwrite the Radzen css by using the exact same selection which effects all scrollbars and not just the one i want to.
The only solution left would be to not use radzen and use html textarea

https://pastebin.com/VEFDHkM7

https://imgur.com/nCwwe2O

2

added Radzen Element id id="ShellConsoleJU64
and tried to reach it
body:not(.rz-default-scrollbars) [ShellConsoleJU64]::-webkit-scrollbar-corner
[ShellConsoleJU64]::-webkit-scrollbar-corner
#ShellConsoleJU64 ::-webkit-scrollbar-corner
....
..

::deep always throws a validation "is not a valid pseudo-element" does not matter in which format i test it.

3

Hi @Dabios,

The scrollbar styling is special - it can't be turned off. The only solution is to disable it globally by applying the .rz-default-scrollbars to the body element of your page:

<body class="rz-default-scrollbars">
1 Like
4

hi @korchev thanks for the answer,
i added the body tag

     <body class="rz-default-scrollbars">
            <RadzenContent Container="main">
                <ChildContent>
                    <RadzenHtml> 
                         <Some Html Tags>
                               <RadzenTextArea id="ShellConsoleJU64"></RadzenTextArea>
                         </Some Html Tags>
                    </RadzenHtml> 
                </ChildContent>
            </RadzenContent>
        </body>

and tried to reach the RadzenTextArea scrollbar
but body:not(.rz-default-scrollbars) ::-webkit-scrollbar-corner is still the only working css isolation which effects all scrollbars on the whole website.

5

You don't need to add a body tag. You should modify the existing one in your index.html or _Host.cshtml

1 Like
6

@korchev
Thank you, that worked.
i also had to define the css isolation around a html tag.
so embed the Radzen Element in a html tag with id instead of giving the RadzenTextArea an id.

_Host-cshtml:

<body class="rz-default-scrollbars">
     ...
     <script src="_content/Radzen.Blazor/Radzen.Blazor.js"></script>
     ...
</body>

Page:

<RadzenHtml>
     <td id="ShellConsoleStyleJU64">
          <RadzenTextArea>
          </RadzenTextArea>
     </td>
</RadzenHtml>

Style.cs

#ShellConsoleStyleJU64 ::-webkit-scrollbar-corner {
    background-color: #1AA4E0;
}