This topic contains 6 replies, has 3 voices, and was last updated by Avatar ORE 5 days, 14 hours ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #102041
    Avatar
    ORE
    Participant

    Hi everyone, I just want to use the smart.tabs. (https://www.htmlelements.com/docs/tabs/)

    It’s a standard HTML page, so no Angular, React, etc.

    I was able to get it working by linking the smart.tabs.js and the smart.default.css files.

    However, the smart.default.css file is very large. Is there a way to import only the CSS that the tabs need?

    thanks

    #102050
    Avatar
    admin
    Keymaster

    Hi ORE,

    You can use \source\styles\components\smart.tabs.css file instead. It includes all styles for the tabs component and is only 25KB.

    Best regards,
    Peter Stoev

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

    #102053
    Avatar
    ORE
    Participant

    Hi Peter,

    Thanks for your answer. I’ve tried it , but it doesn’t work. I think some CSS is missing. For example: The file  \source\styles\components\smart.tabs.css contains some variables, so I also tried adding the \source\styles\default\smart.variables.css. But even then it doesn’t work properly.

    Best regards

    #102054
    Avatar
    admin
    Keymaster

    Hi ORE,

    You are right. Sorry, about that. I missed to add that 2 more files are required.

       <link rel="stylesheet" type="text/css" href="../../../source/styles/components/smart.base.css" />
    <link rel="stylesheet" type="text/css" href="../../../source/styles/components/smart.tabs.css" />
    <link rel="stylesheet" type="text/css" href="../../../source/styles/components/smart.common.css" />

    When you use more components on the page and want to load only these styles, add them between smart.base.css and smart.common.css.

    Best regards,
    Peter Stoev

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

    #102088
    Avatar
    ORE
    Participant

    Hi Peter,

    Sorry for the late reply. It works, thanks for your help!
    One last question 🙂

    We want the tab position to be on the left or right and we need the option of automatic height (https://www.htmlelements.com/demos/tabs/auto-height/).
    But when we use the right tab position and the auto height styles the transition doesn’t work properly. The tab to be slides in is not animated and the tab that slides away is visible in the background.

    can you help ?

    many Thanks!

    #102090
    Avatar
    Yavor Dashev
    Participant

    Hi ORE,

    Yes, this is unwanted behavior.

    Anyway I have created a temporary solution which resolves the issue.
    Just add the following CSS snippet:

    
    .smart-tabs[vertical] .smart-tabs-content-section, 
    .smart-tabs[vertical] .smart-tabs-header-items{
        height: auto;
    }
    

    Let me know if that works for you!

    Please, do not hesitate to contact us if you have any additional questions.

    Best regards,
    Yavor Dashev

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

    #102099
    Avatar
    ORE
    Participant

    It works, many thanks!

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.