Expand my Community achievements bar.

SOLVED

overlay tabs components styles are not loading

Avatar

Level 3

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.

 

Satish2info_0-1693981391168.png

 

Thank you,

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@Satish2info 

 

In the official documentation, it is mentioned:

aanchalsikka_0-1694008211446.png

 

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?

 

 

 


Aanchal Sikka

View solution in original post

6 Replies

Avatar

Community Advisor

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


Aanchal Sikka

Avatar

Level 3

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?

 

 

Avatar

Community Advisor

@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


Aanchal Sikka

Avatar

Level 3

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?

Avatar

Level 3

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 ?  

Avatar

Correct answer by
Community Advisor

@Satish2info 

 

In the official documentation, it is mentioned:

aanchalsikka_0-1694008211446.png

 

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?

 

 

 


Aanchal Sikka