0

do you have any idea how to add a top pointer (triangle) for some Clarity's dropdown components (but not globally) ?

Actually, Clarity's dropdown are without top pointer.

I'm not really sure about the best way to add a top triangle (like here), preferably in pure CSS, only for some dropdown, not globally.

Image with and without dropdown top pointer

About the libraries I'm using: Clarity 0.11.x and angular 5.x with universal.

Thanks for all your help.

Edit: Last minute: I've probably need to customize the whole dropdown (margins, links, ...). So if you have instead a solution to use a custom template with a dropdown or if Clarity has a directive or a service that popup a template, any help is welcomed.

Bérenger -appvizer-
  • 23
  • 7

1 Answers1

0

You could override the css to hide the clr-icon chevron. Then, conditionally apply it when you need to hide/show. 

::ng-deep .dropdown button clr-icon  { display: none; }

https://stackblitz.com/edit/clarity-dark-theme-v11-so-hide-dropdown-chevron

Can you describe what you expect to be able to customize? If its just look-n-feel you can accomplish that with a custom theme for dropdowns.

If you are trying to customize more than look-n-feel, you might be able to override the CSS. I wouldn't recommend doing this. There will likely be many issues with styling or layout that propagate down into the children components of ClrDropdown and will require more customizations to handle.

hippeelee
  • 1,788
  • 1
  • 10
  • 21
  • Hey @hippelee, sorry but it's the opposite: looking to add a top pointer to the dropdown panel, not removing the button's chevron. – Bérenger -appvizer- Jun 04 '18 at 07:18
  • Sorry, I’m not following what you want to do. Can you show me an example or sketch that visually shows what you want to accomplish? – hippeelee Jun 04 '18 at 08:51
  • Yes. I've edited the question. [Here the image](https://i.stack.imgur.com/cknEd.png) – Bérenger -appvizer- Jun 05 '18 at 16:06
  • I see, sorry I misunderstood but I don't think I can help you. Clarity UX does not recommend having this type of arrow/pointer on Clarity dropdowns. Obviously, you can override the css with `::ng-deep` but you will have to target the elements for a custom solution to your app. – hippeelee Jun 05 '18 at 18:38