overlay tabs components styles are not loading

[Satish2info]

Hi Team,

I have to achieve the overlay tabs component how it is designed in we-retail. I have overlay the tabs component from the core component(2.11.0 version ) into my project but i am trying to load the style but those are not loading(the tabs are loading vertically without design). Can you please help me how to achieve  the same behaviour as we-retail.

Thank you,

[aanchal-sikka]

Hello @Satish2info 

Once you create an overlay, you need to create the policy specific to the new component.

policies are recognized by paths under conf. Overlay is idenfied as a new component from its perspective.

Hence, to append styles:

- go to the template

- click on the new component to create policy.

- Copy the values in Styles tab from the "Tabs" component to new component. Save

You should now get the Styles and should be able to apply as well

[Satish2info]

Hi @aanchal-sikka ,

Template level policy specific to tabs component we can append but I am trying to load the styles external through client libs how it is there in we- retail but those are not loading. After your comment I have verified in we- retail tabs component policys but those are  not defined. need to know how those are loading ! 

Could you please let me know if you have any other thoughts?

[aanchal-sikka]

@Satish2info 

Apologies, I thought you are referring to Style System.

Can you possibly check if client libraries are loading on your page?

Please add the Tabs component and check once.

If yes, please check if the styles are dependent on the name of the component. The component names are available in enclosing <div> when a component is rendered

[Satish2info]

Hi @aanchal-sikka 

Client libs are loading but the styles are not loading in overlayed tabs component. I have to achieve the tabs similar to we-retail tabs component! 

Am I Miss anything?

[Satish2info]

Issue i have observed after overlay the tabs component clintlibs related to tabs component not loading ! after i have embedded it , i am able to see the changes. 

If i overlay a component it should load all its dependencies and libraries am i correct ?  

[aanchal-sikka · Accepted solution]

@Satish2info 

In the official documentation, it is mentioned:

It appers, the clientlibs which you have identified might have been affecting tabs as well.

And after the embed, styles might be working for both.

Can you please confirm for the same page, by adding both tabs and new component?