search

Jemt / Fit.UI

Fit.UI is a JavaScript based UI framework built on Object Oriented principles
http://fitui.org
GNU Lesser General Public License v3.0
19 stars 7 forks source link

DropDown: Selected items positioned slightly too high #177

Open Jemt opened 1 year ago

Jemt commented 1 year ago

See the following example: https://jsfiddle.net/wL7qe2bv/4/

For different font-sizes the selected items do not always align properly.

image

The problem is probably related to: https://github.com/Jemt/Fit.UI/blob/bae9ac2a840f18a0b9bc54807c9ba480616680b4/Controls/DropDown/DropDown.css#L132

Try adjusting the font-size a bit - and make sure to test it with many different font sizes! The control MUST remain 2em height by default to align properly with other controls !!

div.FitUiControlDropDown[data-multiselect="true"] div.FitUiControlDropDownItems > span,
div.FitUiControlDropDown[data-multiselect="true"] div.FitUiControlDropDownItems > input
{
    font-size: 0.885em; /*original value: 0.85em;*/
}

Also make sure it looks good when selected items "word wrap":

image

Jemt commented 1 year ago

Actually there is no need to adjust the font size in text selection mode. Use this instead:

div.FitUiControlDropDown[data-multiselect="true"][data-selectionmode="visual"] div.FitUiControlDropDownItems > span,
div.FitUiControlDropDown[data-multiselect="true"][data-selectionmode="visual"] div.FitUiControlDropDownItems > input
{
    font-size: 0.885em; /*original value: 0.85em;*/
}