Page 1 of 1

Text wrap in select tags

Posted: Sat Sep 15, 2018 8:46 pm
by RiddlerX2
Hi!
If I use data-role="select" on single select tag and if text of the selected option does not fit on width of visible element it's wrap to the next string and lies under another elements.
Code below in CSS file fix this, but not sure about multiselect:

Code: Select all

white-space: nowrap;
overflow: hidden;

Re: Text wrap in select tags

Posted: Sat Sep 15, 2018 10:10 pm
by olton
https://metroui.org.ua/select.html

You can create your own class for option and use with attribute data-cls-option

See Customize part for select

Re: Text wrap in select tags

Posted: Sat Sep 15, 2018 10:13 pm
by RiddlerX2
Thanks I will do modification this way.
And another thing selection border appears then I focused on element but does not remove then select lost focus.
It is stay always "focused" then I click on select and click again for hide dropdown element.

Re: Text wrap in select tags

Posted: Sat Sep 15, 2018 10:30 pm
by RiddlerX2
And I try to use your solution but failed.
If I apply my own class to data-cls-option nothing happened.
If I apply my own class to data-cls-select component markup crashed.
There is no way to apply additional class to DIV with class select-input?
Looks like this DIV is responsible for writing currently selected value on page.

Re: Text wrap in select tags

Posted: Sat Sep 15, 2018 10:52 pm
by olton
Create pen on codepen.io with your code

Re: Text wrap in select tags

Posted: Sat Sep 15, 2018 10:53 pm
by olton
Check your metro 4 version. Must be a 4.2.21

Re: Text wrap in select tags

Posted: Sun Sep 16, 2018 12:29 am
by RiddlerX2

Re: Text wrap in select tags

Posted: Sun Sep 16, 2018 8:45 am
by olton
Thanks, I fix it in 4.2.22. Temporary, you can use the next styles:

Code: Select all

.select .select-input, .select .d-menu li a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Re: Text wrap in select tags

Posted: Fri Feb 08, 2019 2:09 pm
by raut9967
Thanks for this updates.Great work.