Change appearance of 'dropdown' field

Hello :wave:.

Is it possible to format a ‘dropdown’ field so that the edges are squared off? If you look closely at the attached screenshot you can see that the edges of the ‘Filter by Type’ are rounded-off.

Any help would be gratefully received. Thank you JG

1 Like

Thanks @lantzgould - I’m using a ‘Style’ and I don’t have the option to set ‘Roundness’?

What browser are you using?

This is because you are defining each border independently. The roundness options are there “Top-left”, “Top-right” etc. If you unselect the independent option you will see it will say “roundness”.

@lantzgould - Chrome on a Mac

Thanks @SerPounce - it looks like even with the roundness set to 0 there is still a roundness. I’m thinking that the only option maybe to:

  1. Set no border on the dropdown;
  2. Create a group and set the bottom border to be visible;

1 Like

You sure that’s the correct style you’re editing?

I’ll try on a Mac in a bit to see if I can replicate.

100% sure as I’ve changed the style to not set the boarder independently and roundness to 0 in the image :point_up:t2: - I can see the full boarder and it still has a rounded corner.

Selects (dropdowns) are a native HTML element. Different browsers render them different ways.

(As a really BASIC example, look at a select on your iPhone… is that ANYTHING like a select (dropdown) in Chrome desktop?

No… no it’s not.)

If you want to replicate a select, you can do that (and make whatever changes you want), but then that’s not a select.

Do not let your OCD keep you from building an app. Worry about that crap later.

1 Like

:raised_hands: Wise words @keith - I thought there might be a simple answer.

Wish I had read this 9 months ago. Wise words indeed.

I ran into the very same issue and this solution (no border/group with 0 roundness) worked perfectly for me!

Same issue here. Dropdown roundness does not work on Chrome for Mac. you can put 0 or 100 and nothing changes. I think this is a bug.

Remove at the dropdown borders.
Put him in a group.
Set the bottom border for the group.

@lstk.kb thank you for the advise. But we can not keep going with workarounds for anything. And you know what ? Is not only the border issue.

I have also found that dropdown formatting and function options in general are limited (e.g. show an image or icon together with text). For this reason, whenever I have needed to do anything beyond the most basic of dropdowns I use a group as the initial UI element and then GroupFocus containing an RG for the options. Then you can implement whatever you want in terms of UI for both the initial element and what is shown on click of the dropdown.

Example 1: The GroupFocus contains an actual dropdown as well as a checkbox for filter.

Example 2: The GroupFocus contains a checkbox to limit the long list of results.

This topic was automatically closed after 70 days. New replies are no longer allowed.