search

day8 / re-com

A ClojureScript library of reusable components for Reagent
https://re-com.day8.com.au
MIT License
798 stars 147 forks source link

Dropdown arrow is not stylable on high-res (without deep hacking) #101

Open johanatan opened 8 years ago

johanatan commented 8 years ago

Due to background-image being marked !important in the media section of re-com.css, all attempts to style this control via stylesheets with a custom image for the dropdown arrow are failing. I had to resort to the following 'deep hacking' in componentDidMount to achieve the styling.

(.setProperty (aget b "style") "background-image" "image.png" "important")

where b is defined as:

(.item (.getElementsByTagName (.getDOMNode this) "b") 0)

This poking into the implementation of the dropdown to pull out a b is obviously not ideal.

See Issue #99 for similar situation.

MawiraIke commented 2 years ago

As of re-com 2.13.2, this is not possible even with the addition of parts keyword argument which can be used to solve similar issues like #99 . This is because the drop down arrow is not exposed to the parts supplied to single-dropdown. I suggest adding a new parts keyword called arrow which can be used to style or add classes to the dropdown arrow. I have attached the code to add this feature below.

MawiraIke commented 2 years ago

Example usage at https://github.com/day8/re-com/pull/318#issue-1112551187