Jake B.
Rank: #17230
10Views
1Comments
Solved
RichWidgets\Container_ExpandCollapse - custom CSS
Question
CSS
Traditional Web

Im using this element: RichWidgets\Container_ExpandCollapse. However I would like to change the styles of the default arrow, I would like to change the color and also it seems that the element has some absolute position and top margin and I would like to remove all that margins. Do you know how to achieve that? Thanks!

0
0
on 2020-12-29
Copy link to comment
Benjith Sam
mvp_badge
MVP
Rank: #75
Solution

Hi Jake,

If you observe the Container_ExpandCollapse widget using the Browser inspect element feature or refer/open the clone of the RichWidgets module, you will observe that the arrow used in the Container_ExpandCollapse widget is simply an image. So, defining custom CSS to change the color of the arrow image tag won't work.

 Instead you can follow any of the below mentioned approaches...

  • Clone the Container_ExpandCollapse widget to the module where re-usable component are defined in your application architecture module layer, then customize/change the arrow image as per your need and use the customized widget wherever it's required.
  • Using JavaScript, you can modify the arrow image tag's src property value with the preferred image runtime path value.
  • Clone the widget to the respective module and create the expand/collapse arrows using pure CSS rules instead of using expand/collapse arrow images.


Hope this helps you!


Kind regards,

Benjith Sam

1
0
on 2020-12-29
Copy link to comment