consider flexifying the jquery-ui select widget

[phiw13]

As you are busy with some multiple rewrites and optimisations… (and again RTL support for free!).

code extracted from Sandspace:

.ui-selectmenu-button {
    display: -webkit-inline-flex;
    display: inline-flex;
/* no need for white-space: nowrap; here */
}

/* force the icon to the end side of the widget */
.ui-selectmenu-icon {
    -webkit-flex: none;
    -webkit-order: 2;
    flex: none;
    order: 2;
    margin: auto 0 auto .428571rem; /* push the icon away from the text string - adjust to taste */
}

/* the text container */
.ui-selectmenu-text { 
    /* order: 1; */ /* optional  */
    display: block;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[dir="rtl"] .ui-selectmenu-icon {
    margin: auto .428571rem auto 0; /* adjust to taste, match LTR above */
}

[dir="rtl"] .ui-selectmenu-text { text-align: right; }

This will also solve the vertical alignment of the widget, except in Firefox (there at least 2 open bugs on that subject…).

[philwareham]

Thanks very much, I will look into this as part of the improvements.