10
Views
5
Comments
Solved
OutsystemsUI Dropdown Content Width
Application Type
Traditional Web

Hi, I am trying to use the OutsystemsUI 'Dropdown' as a replacement for the 'SilkUI' ButtonDropdown. 

I am applying my custom style on the DropDown successfully except for the width of the dropdown content. The content will always take the width of the container that the dropdown widget is in. 

It is possible to make the select 'button' smaller by applying a 'max-width' (as suggested on other posts) but this doesn't quite do what I want it to do. My Dropdown will be the first button in a row of 2-3 buttons and i need the dropdown content to overflow under the second button.

I have managed to apply an extended class which works on IE11, but I am struggling to get it to work on Chrome or Edge, example images below.

Extended class '"buttondropdown"

CSS example

.buttondropdown, 
.buttondropdown .dropdown-content .dropdown-content-list, 
.buttondropdown .dropdown-header {
    width: auto;
}

In Chrome

  


in IE11


I have attached the OML for this application.

If anyone has any suggestions it would be appreciated.

Neil

Dropdown.oml

Rank: #64
Solution

Hi Neil,


Ok, I think this is what you want:


Just apply this CSS:


.dropdown-content-list a {

    white-space: nowrap;

}


.dropdown .dropdown-content .dropdown-content-list {

    width: unset;


}


The first instruction prevents the wrapping of the options in multiple lines and the second overrides the default width: 100% which was causing the issue.


Regards,
João

Rank: #64

Hi Neil,


After testing with Google Chrome, just setting a width in pixels for dropdown-content class does the trick.


Is that your goal?


Regards,
João

Rank: #735

Hi João , thanks for the very quick reply.

That is an approach I could use, but I would like to see if I can define the width based on the length of the items within the content .

Regards

Neil

Rank: #64
Solution

Hi Neil,


Ok, I think this is what you want:


Just apply this CSS:


.dropdown-content-list a {

    white-space: nowrap;

}


.dropdown .dropdown-content .dropdown-content-list {

    width: unset;


}


The first instruction prevents the wrapping of the options in multiple lines and the second overrides the default width: 100% which was causing the issue.


Regards,
João

Rank: #735

Thanks again João, I will try this as soon as I get a chance - for some reason my personal environment has stopped working :/

Regards

Neil

Rank: #735

Hi João,

  I have tried your suggestion and it works brilliantly. 

  I have just had to also include the following css to apply the 'auto' width for ie11. 

  ie11 doesn't support 'unset'. This is a bit of a workaround but we still need to cater for ie11 unfortunately.

.ie11 .dropdown .dropdown-content .dropdown-content-list {

  width: unset;

}

Many thanks for you help

Regards

Neil