JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › Clacc property of Smart.Blazor UI in docs missing

Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • August 19, 2024 at 7:05 pm #111309
    Victor Sirghii
    Participant

    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!

    August 20, 2024 at 8:07 am #111312
    Markov
    Keymaster

    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

    August 26, 2024 at 4:04 pm #111337
    Victor Sirghii
    Participant

    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?

    August 26, 2024 at 10:38 pm #111340
    Markov
    Keymaster

    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
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.