Clacc property of Smart.Blazor UI in docs missing

[Victor Sirghii]

How to make components look like bootstrap “form-control” class?

I see on the demo that the Class property is used, ex: <Input Class=”basic-input” Disabled DropDownButtonPosition=”DropDownButtonPosition.Right” Placeholder=”Disabled select” />. All controls on Demo look like bootstrap elements.
But it’s not clear what “basic-input” means here. On my app a control with Class=”basic-input” looks narrower than the bootstrap html element.

I couldn’t find in the docs anything related to the Class property and how I could use custom classes on Blazor components and/or Styles?

 

Thank you!

• This topic was modified 3 months ago by Victor Sirghii.
• This topic was modified 3 months ago by Victor Sirghii.

[Markov]

Hi Victor,

By using Class which is a native property you can add additional styles to the components.
As for the theme of the components, the smart.default.css can be used or customized as well as smart.bootstrap.css which is included after smart.default.css and adds bootstrap-like styles.

Best regards,
Markov

Smart UI Team

[Victor Sirghii]

The Class property is getting really confusing. I’ll try to explain.

Say you have three elements on the page aligned horizontally:

<DropDownList  Class=”form-control”></DropDownList> <Input Class=”form-control”></Input> and <input type=”text” class=”form-control” />

All three look different.

<DropDownList> css is completely broken. (without form-control class it looks ok but slightly narrower than standard <input type=”text” class=”form-control” />)

<Input> looks ok but slightly higher than standard <input type=”text” class=”form-control” /> (without form-control class it takes the whole available width to its right and gets narrow)

So it’s only <input type=”text” class=”form-control” /> looks as a standard bootstrap form-control element, smart.blazor components are not consistent in their appearances.

Adding <link href=”_content/Smart.Blazor/css/smart.bootstrap.css” rel=”stylesheet” /> in the application doesn’t change anything.

How exactly would I set up app a theme so that all elements looked alike?

[Markov]

Hi Victor,

If you apply custom CSS class such as form-control, you need to make sure that this CSS class styles different types of components. The components come with a common set of styles applied by adding the smart.default.css and optionally you can add smart.bootstrap.css which adds bootstrap-like styles to the components.

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts