CODEWITHSUNDEEP
cssblazortelerik.net-8.0multi-select
davide_pacman
davide_pacman

Reputation: 3

How can I modify an element style inside a Telerik component using Blazor?

I am trying to modify the autocomplete attribute from an inside a TelerikMultiSelect component. This is the html code generated by the TelerikMultiSelect:

<div data-id="" class="telerik-blazor k-multiselect autocompleteDisabled k-input k-input-solid k-input-md k-rounded-md" dir="ltr">
   <!--!-->
   <div class="k-input-values" tabindex="-1">
      <div class="k-chip-list k-chip-list-md">
      </div>
      <!--!-->
      <input type="text" autocomplete="off" placeholder="" size="1" tabindex="0" class="k-input-inner" role="combobox" aria-busy="false"><!--!-->
   </div>
   <button class="telerik-blazor k-button k-input-button k-button-solid k-button-md k-button-solid-base k-icon-button k-hidden" id=" data-id="" dir="ltr" tabindex="-1"  type="button">
      <!--!-->
      <!--!-->
      <span class="telerik-blazor k-button-icon k-icon k-svg-icon k-svg-i-caret-alt-down" aria-hidden="true">
         <!--!-->
         <svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <!--!-->
            <!--!-->
            <path d="M256 352 128 160h256z"></path>
            <!--!-->
         </svg>
      </span>
   </button>
</div>

This component, has a "Class" parameter where I can modify the css, but it does not affect to the tag where is the autocomplete attribute. As you can see, by default, the autocomplete is as "off", but I have read that does not work in chrome, so any time I click inside the box, my address is suggested to be filled by the autocomplete.

I have done it with JS, OnAfterRenderAsync I Invoke the JS function and it changes the autocomplete attribute to, for example "disabled" and it stops work. But as I have a project clean of JS using Blazor, this is not the solution I want.

Please, any idea that could help me?

Thank you very much in advance

Upvotes: 0

Views: 143

Answers (1)

TheMax370
TheMax370

Reputation: 47

We use Telerik in the company I work for and I've faced the same issue, normally modifying the css of a component from a component library sometimes can be difficult since it can change the behavior of the component (talking from my experience). But the workaround I found to modify any telerik component css is to use within the .razor page (or .cshtml) you are using it.

Let me show an example, I've created a .razor file called Example.razor which has this codecode

To demonstrate what I said before we are going to use blazor css isolation

css

As we can see I've created a css class, if we use that css class in the button component the background color wouldn't not apply. But if we use the tag withtin the same .razor file this is going to work

css2

buttonexample

This way yoy can achieve what you are trying to do, I hope this enlighten you. (same thing can sometimes apply to the script tag)

Upvotes: 0

Related Questions