[Feature Request] Allow adding css styles to various parts of component

[digitalsigi]

First of all: Thank you for this great component. It saved me a lot of work! I am not so experienced with CSS and SCSS but can survive. So I ran into a situation where I need help.

Is your feature request related to a problem? Please describe. I am using the AdminLTE Styling template for a Blazored Application with many pages and of course
blazored.typeahead. The Problem is, typehead styling does not fit with AdminLTE. Positioning the search filed seems to not an easy one, especially the height of input field. Even more, if it comes to media targeted design thing get complicated. However, I don't want to rework all styles and copy paste the ones from bootstrap or AdminLTE into typeahead stale sheet.

Describe the solution you'd like It would be great have a possibility to add css classes to the elements in typeahead component through parameters or break apart the component into child components like in blazored menu.

Describe alternatives you've considered I tried to overcome the styling issue using scss @extend and @mixin but that did not work. At the end I cloned the project and added the classes I need. This seems to be not an ultimate solution, because I suspect I loose future enhancements of the component.

Additional context Code snippet what I have done:

@typeparm TItem
@typeparam TValue
<div class="blazored-typeahead @FieldCssClasses">

    <div class="blazored-typeahead__controls form-control form-control-sm">

        @if (Disabled)
        {

There are more such things like the shadow around the input field and the way focus is styled.

[chrissainty]

Hey Josef,

I'm not sure this is something we can do. We need specific CSS to make the control work correctly if that is missing or is altered in the wrong way then the control will break. Also, the control isn't really what it appears to be. When you're not focused into it it's just some divs styled to look like a control.

If you have an idea of how this could work universally for anyone and won't break the functionality of the control I'm more than happy to look at implementing it.

[digitalsigi]

Hi Chris, you are right, I discovered that already when playing with it. Currently I did nothing more than adding the two mentioned classes to exactly this line shown above.

I did not find the time to dig further into that, but its seems not an easy one.

[chrissainty]

I'll have a think and see if something comes to mind, but I'm not hopeful right now.

CC'ing @vertonghenb just in case he has any thoughts/ideas.

[vertonghenb]

A workaround:

Add the styling directly to the predefined css classes.

Solution

We can simply add a Class parameter and add the classes to the list of css classes in the control. The user is then responsible for the overwrite.

[digitalsigi]

Sounds good. I think, if one wants to change it, it should be possible. I experienced already, that this is not easy doing and requires good knowledge of css. @Workaround: Did not work for me, because I am using the scss templates bootstrap and AdminLTE (yes, I know, not Javascript free) and their responsive design. It was easier to fork the project and change the code.