rasteiner / k3-awesome-picker

Kirby 4 field plugin to show and select a free Font Awesome icon.
MIT License
15 stars 0 forks source link

Optical and usibility problems #6

Closed Werbschaft closed 3 years ago

Werbschaft commented 3 years ago

The field does not quite match the other standard fields. The following consideration could possibly be in the room:

• Use a normal text field with a magnifying glass. Before: and after: could also be used here. With before: the icon is displayed if one is selected with after: could be a magnifying glass • the field is significantly higher than the standard fields, the whole layout is messed up when working with columns • the dropdown should be positioned absolutely, otherwise the layout will also be totally confused when opening. A modal window would be better anyway

rasteiner commented 3 years ago

in the latest version the field has now the same height as the text field, and when open it takes up the same space as 4 text fields. It should therefore now maintain the kirby vertical rhythm.

I personally don't like it when stuff covers other stuff, so I'd prefer to avoid modals and go with the "structure field" approach. You can however position it absolutely by providing your own panel stylesheet.

something like

.afp-dropdown {
    position: absolute;
}

should work (after the latest version)

chrfickinger commented 3 years ago

I don't like it as well when stuff covers other stuff. But if height is not limited the page is very long with 10000 icons. Maybe it would be helpfull to set max-height of "afp-list-container" to 250px which creates a vertical scrollbar.

Werbschaft commented 3 years ago

I have seen that it has now the same height, much better 😃 the rest can be done really easy with custom css

rasteiner commented 3 years ago

Maybe it would be helpfull to set max-height of "afp-list-container" to 250px which creates a vertical scrollbar.

that should already be the case, isn't it for you? If it's not, what browser are you using?

chrfickinger commented 3 years ago

that should already be the case, isn't it for you? If it's not, what browser are you using? Yes, indeed. After clearing the cache it is working.

Werbschaft commented 3 years ago

All seems to be fine!