Community X.

Connect with other creators, share ideas, give feedback and get the latest product updates.

Jan 6

Is there a way to redesign a dropdown filter icon?

I have several dropdown filters like ones on spreadsheets.

In full screen is look like this [Condition \/ ] above a column.

But as I reduce the size of the screen it looks like this [Con \/ ] or even [C \/ ]

Why is there so much space on both sides of the \/ forcing the text to get cut off?

I need to be able to reduce the space on both sides of the down arrow.

The repeater items resize as I drag to narrow the screen

but the space around the \/ and the arrow itself does not resize.

Is there way to get the down arrow and spacing to resize ?


Thanks


1

Dropdown arrow problem
.docx
Download DOCX • 561KB

Jan 8Edited: 6d ago

Buttons that resize to the text within it is working for me nicely with each button in a grid. Is it also possible to have responsive buttons like this when there is one button per repeater item? It doesn't seem to work the same way.

1

Thanks Matanya Dayfani for your insightful and quick response to my question. I will defiantly us your suggestions.

One of the reasons I went with WIX and Editor X was the supposed easy adaptation of a website to all platforms especially to mobile platforms, since more and more people are using mobile phones the view web sites.

Your solution does not solve my basic concern.

The down arrow takes too much space as it down sizes.

See attachment.


Again thanks for your replay.

iPhone view of the web site
.docx
Download DOCX • 88KB

I understand the problem. The arrow is large relative to the size of the text.

The only solution is to increase the height and width of the input.

As a designer, I would recommend you do so. This is a better user experience.

It is difficult for a user to press such a small button on a phone.

I would increase the button height to at least 48px and no more than 2 buttons in the same row.

This will leave enough space for the text and the user will be able to clearly see the content of the input and press the button. https://material.io/components/text-fields#specs

1
Jan 9Edited: 6d ago

Thanks again for your quick and helpful response.

I was concerned about the size of the buttons but had not tried them on a phone yet. Make a site for all platforms is harder then I imagined.

I will consider your two responses good answers to my question.

But I still think the arrow takes up too much space. :)

Your quick and helpful responses makes me glad I am working with WIX editor X.


Keep up your good work.


Editor X

Design your boldest creations.