default css file size

[admin]

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

[admin]

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/

[admin]

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

[admin]

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/

[admin]

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!

[yavordashew]

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/

[admin]

It works, many thanks!

[Author]

Posts