Width of select dropdown

[queensgambit9]

How do you set a different width of a dropdown compared to the select width (pqSelect)?

[paramvir]

name dropdown and select list is used interchangeably.

width of select list/ dropdown can be set through css.

if you want to know how to set width of pqSelect it's here.

https://paramquery.com/pro/api/select#option-width

[queensgambit9]

Im after something like this, check filter for company:

http://jsfiddle.net/bq46hzby/

Although with nowrap and possible to use auto width...

[paramvir]

Sorry, what's the issue in that jsfiddle?

[queensgambit9]

If you click comanpy filter you see that the drop down is wider than the select width.
I do this by using CSS:

Code: [Select]

body > div:nth-child(5) > div.pq-select-popup.ui-widget-content.ui-corner-all {
width: 400px;
}
1. Would like to have possibility to set width: auto...but it does'nt seem to work.
2. How can I prevent word wrap...tried white-space: nowrap without success.
3. I prefer to not use nth-child since it could change due to layout changes, can I use ID in any way?

Thanks.

[paramvir]

So you want the select options to appear in single line without wrap.

Please use this css rule.

Code: [Select]

.pq-select-popup-cont{
  width: auto !important;
}


[queensgambit9]

Thanks, and if I would like to apply on specific selects?

[paramvir]

I don't see any way to apply it to specific selects.

[chahal007]

Is there a way to override the default css property for pq-select-popup-cont?

Currently, the out of box,  pq-select-popup-cont opens with these css attributes:

font-family: myriad-set-pro_text, "Myriad Set Pro", "Myriad Set", "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
    font-size: 13px;
    width: 117px;
    top: 244px;
    left: 303px;
    display: block;

Not sure how I can override this.

Thanks,
Manjodh

[queensgambit9]

In 5.3.0 I tried:

Code: [Select]

.pq-select-popup-cont {
  width: auto !important;
}
But it doesn't seem to work...is it the wrong class?

[paramvir]

Customization of filter UI is documented in this example:

https://paramquery.com/pro/demos/filter_custom

[queensgambit9]

Thanks...using:

Code: [Select]

.pq-popup
{
    width: auto !important;
}
give error

Code: [Select]

Uncaught NaN
Any idea what could be causing that?

[paramvir]

It's to be used along with

Code: [Select]

gridOptions: {   
    width: 'flex',
    flex: {one: true}
}

https://paramquery.com/pro/demos/filter_custom

[queensgambit9]

Thanks, possible to have different background color on popup vs grid? Tried:

Code: [Select]

.pq-popup
{
    width: auto !important;
    background-color: grey !important;
}
but no success...

[paramvir]

.pq-popup is the container and its background color is hidden behind children nodes.

You would need to change background color selectively.

Code: [Select]

.pq-popup selector of the element{
  background-color: grey !important;
}