Radzen component and preserve style of existing Blazor Server project

Radzen.Blazor Components
1

Hello. Is there guidance on how to add Radzen Blazor components into an existing Blazor Server application, with minimum change to existing project style? In particular I noticed that after adding a RadzenDropdown control that the vertical scroll bar in the browser has a small blue dot slider instead of the normal proportional length rectangular slider (like these in this forum screen). I tried listing the original css after the Radzen css. Is it possible?

    <link rel="stylesheet" href="_content/Radzen.Blazor/css/default.css">
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link href="css/site.css" rel="stylesheet" />
2

You can check my reply in this thread which shows how to disable the scrollbar styling: Don't style the scrollbar - #2 by korchev

3

This also affects the highlight selection colour (::selection). There is no way of altering it due to inherit/unset not picking up anything since the default value is browser dependent. No real workaround too since browser/OS highlights are all different, other than wrapping components and scoping the css to it.

4

With today's release of Radzen.Blazor (4.1.1) this should no-longer be a problem if you include the -base.css version of a theme. Now all global styling (scrollbars, selection, font etc.) will happen only if you include the "full" version of a theme e.g. "material.css". If you include "material-base.css" this should no longer happen. We will also update the documentation to reflect that.

5

I found that it would override styles regardless of full or base theme.

With my base theme added the overriding styles are:
-webkit-font-smoothing
::selection

and possibly any others I haven't noticed yet.

6

The base themes should override selection only if you use the RadzenLayout component. -webkit-font-smoothing is only used in Radzen specific classes in the base files. Make sure you are using the latest Radzen.Blazor version and have cleared your browser cache.

7

I'm not using Radzen layout (just want the dropdown component), the docs, examples and source code do not implement RadzenLayout. ::selection is included in default-base.css, would it be better to only apply it to radzen components by default, not everything?

Default-base.css includes -webkit-font-smoothing: antialiased; with the latest version + cleared cache. Again, could these (along with all body and root styles) only be applied to radzen components?

8

It is included only in this selector which applies only to RadzenLayout.

.rz-layout ::selection {
}

It is included only in Radzen components:

.rzi, .rz-column-drag, .rz-datatable-loading-content .rzi-circle-o-notch, .rz-datatable-header .rzi-plus, .rz-sortable-column .rzi-grid-sort, .rz-datatable .rzi-chevron-circle-down, .rz-datatable .rzi-chevron-circle-right, .rz-fileupload-row .rz-button .rzi-close, .rz-fileupload-row .rz-paginator-element .rzi-close,
.rz-fileupload-row .rz-button .rzi-times,
.rz-fileupload-row .rz-paginator-element .rzi-times,
.rz-fileupload-row .rz-button .rz-icon-trash,
.rz-fileupload-row .rz-paginator-element .rz-icon-trash, .rz-menuitem .rz-menuitem-icon {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: var(--rz-icon-size);
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}

Please double check.

9

I cannot upload as I am a new user but heres a pastebin of: /_content/Radzen.Blazor/css/default-base.css

::selection does not have a layout parent

10

You seem to be using an older version of the default-base.css file.

11

Thank you for the help.