Question Re: Select List max-width and width not working in Technology Q&A

Select List max-width and width not working

davidsigleinit — Tue, 24 Oct 2023 11:12:21 GMT

Hello all,

I'm currently having trouble with changing the width of the list that shows when opening a select field. The select has a width of 100% and spans the entire site, just as I want. But when I open the select and the list for it shows all items have a maximum width of 600px.

Changing the max-width or width properties does nothing to change the width of this list and it always stays at a width of 600px.

I'd be grateful if any of you have insight into why the list of the select behaves in such a way and how I can have the list have the same width as the select field.

Cheers

Re: Select List max-width and width not working

davidsigleinit — Tue, 24 Oct 2023 11:52:42 GMT

Found it myself after some more searching and it was this class that needs adjusting:

Re: Select List max-width and width not working

boghyon — Tue, 24 Oct 2023 12:13:34 GMT

Please note that "[..] HTML and CSS generated by SAPUI5 isn't part of the public API and may change in patch and minor releases. If you decide to override styles, you need to test and update your modifications each time SAPUI5 is updated. [...] SAP Fiori launchpad apps shouldn't override styles." (Source: Compatibility Rules - SAPUI5)

Re: Select List max-width and width not working

boghyon — Tue, 24 Oct 2023 12:18:28 GMT

Instead of manipulating the internal max-width* of the picker, set the `wrapItemsText` property of the control to true. From the sap.m.Select API reference:

> "Determines whether the text in the items wraps on multiple lines when the available width is not enough. When the text is truncated (wrapItemsText property is set to false), the max width of the SelectList is 600px. When wrapItemsText is set to true, SelectList takes all of the available width."

<Select xmlns="sap.m" wrapItemsText="true">

___

* Please note that "[..] HTML and CSS generated by SAPUI5 isn't part of the public API and may change in patch and minor releases. If you decide to override styles, you need to test and update your modifications each time SAPUI5 is updated. [...] SAP Fiori launchpad apps shouldn't override styles." (Source: Compatibility Rules - SAPUI5)

Re: Select List max-width and width not working

davidsigleinit — Tue, 24 Oct 2023 12:35:58 GMT

Thanks for taking the time to reply. Unfortunately your solution does not work for me. Either because I'm on an older version of SAPUI5 (1.71) or because of other reasons, like conflicting CSS. Either way your answer is probably the one that is more correct. Thanks!

Re: Select List max-width and width not working

boghyon — Tue, 24 Oct 2023 13:20:51 GMT

davidsigleinit You can find the sap.m.Select sample with wrapItemsText="true" at https://sdk.openui5.org/entity/sap.m.Select/sample/sap.m.sample.SelectWithWrappedItemText/code