Text wrap in select tags

General issues related to the use of Metro 4
Post Reply
RiddlerX2
Posts: 9
Joined: Mon Jun 11, 2018 12:35 pm
Status: Offline

Text wrap in select tags

Post by RiddlerX2 » Sat Sep 15, 2018 8:46 pm

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;

User avatar
olton
Site Admin
Posts: 134
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Sat Sep 15, 2018 10:10 pm

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

RiddlerX2
Posts: 9
Joined: Mon Jun 11, 2018 12:35 pm
Status: Offline

Post by RiddlerX2 » Sat Sep 15, 2018 10:13 pm

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.

RiddlerX2
Posts: 9
Joined: Mon Jun 11, 2018 12:35 pm
Status: Offline

Post by RiddlerX2 » Sat Sep 15, 2018 10:30 pm

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.

User avatar
olton
Site Admin
Posts: 134
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Sat Sep 15, 2018 10:52 pm

Create pen on codepen.io with your code

User avatar
olton
Site Admin
Posts: 134
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Sat Sep 15, 2018 10:53 pm

Check your metro 4 version. Must be a 4.2.21

RiddlerX2
Posts: 9
Joined: Mon Jun 11, 2018 12:35 pm
Status: Offline

Post by RiddlerX2 » Sun Sep 16, 2018 12:29 am


User avatar
olton
Site Admin
Posts: 134
Joined: Mon Apr 09, 2018 6:19 pm
Location: Kiev, Ukraine
Status: Offline

Post by olton » Sun Sep 16, 2018 8:45 am

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;
}

Post Reply