Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
johanatan opened this issue Jul 13, 2016 · 2 comments · May be fixed by #318
Open

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

johanatan opened this issue Jul 13, 2016 · 2 comments · May be fixed by #318
Assignees
@MawiraIke
Labels
styling

Comments

@johanatan
Copy link

johanatan commented Jul 13, 2016 •
edited

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.
@johanatan johanatan changed the title Dropdown is not stylable on high-res Dropdown arrow is not stylable on high-res Jul 13, 2016
@johanatan johanatan changed the title Dropdown arrow is not stylable on high-res Dropdown arrow is not stylable on high-res (without deep hacking) Jul 13, 2016
@Gregg8 Gregg8 added the styling label Nov 24, 2016
@superstructor superstructor mentioned this issue May 6, 2021
Open
@MawiraIke
Copy link
Contributor

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 MawiraIke linked a pull request Jan 24, 2022 that will close this issue
Open
@MawiraIke
Copy link
Contributor

Example usage at #318 (comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@MawiraIke MawiraIke

Labels
styling
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add parts support for dropdown arrow MawiraIke/re-com
3 participants
@johanatan @Gregg8 @MawiraIke