Author Topic: Width of select dropdown  (Read 7725 times)

queensgambit9

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Width of select dropdown
« on: September 01, 2017, 06:20:23 pm »
How do you set a different width of a dropdown compared to the select width (pqSelect)?
« Last Edit: September 01, 2017, 06:21:58 pm by queensgambit9 »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6113
    • View Profile
Re: Width of select dropdown
« Reply #1 on: September 01, 2017, 08:13:57 pm »
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
« Last Edit: September 04, 2017, 09:14:18 am by paramquery »

queensgambit9

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Re: Width of select dropdown
« Reply #2 on: September 05, 2017, 01:43:30 pm »
Im after something like this, check filter for company:

http://jsfiddle.net/bq46hzby/

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


paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6113
    • View Profile
Re: Width of select dropdown
« Reply #3 on: September 05, 2017, 09:55:06 pm »
Sorry, what's the issue in that jsfiddle?
« Last Edit: September 05, 2017, 09:57:35 pm by paramquery »

queensgambit9

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Re: Width of select dropdown
« Reply #4 on: September 06, 2017, 11:51:43 am »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6113
    • View Profile
Re: Width of select dropdown
« Reply #5 on: September 06, 2017, 03:10:47 pm »
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

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Re: Width of select dropdown
« Reply #6 on: September 06, 2017, 03:25:07 pm »
Thanks, and if I would like to apply on specific selects?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6113
    • View Profile
Re: Width of select dropdown
« Reply #7 on: September 06, 2017, 10:58:46 pm »
I don't see any way to apply it to specific selects.

chahal007

  • Newbie
  • *
  • Posts: 1
    • View Profile
Re: Width of select dropdown
« Reply #8 on: July 04, 2018, 02:23:24 am »
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

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Re: Width of select dropdown
« Reply #9 on: August 27, 2018, 01:59:24 pm »
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?
« Last Edit: August 27, 2018, 02:11:15 pm by queensgambit9 »

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6113
    • View Profile
Re: Width of select dropdown
« Reply #10 on: August 27, 2018, 07:25:33 pm »
Customization of filter UI is documented in this example:

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

queensgambit9

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Re: Width of select dropdown
« Reply #11 on: August 27, 2018, 09:47:27 pm »
Thanks...using:

Code: [Select]
.pq-popup
{
    width: auto !important;
}

give error

Code: [Select]
Uncaught NaN
Any idea what could be causing that?

paramvir

  • Administrator
  • Hero Member
  • *****
  • Posts: 6113
    • View Profile
Re: Width of select dropdown
« Reply #12 on: August 27, 2018, 10:49:20 pm »
It's to be used along with

Code: [Select]
gridOptions: {   
    width: 'flex',
    flex: {one: true}
}

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

queensgambit9

  • Pro Ultimate
  • Sr. Member
  • *
  • Posts: 341
    • View Profile
Re: Width of select dropdown
« Reply #13 on: August 28, 2018, 12:18:02 am »
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

  • Administrator
  • Hero Member
  • *****
  • Posts: 6113
    • View Profile
Re: Width of select dropdown
« Reply #14 on: August 28, 2018, 10:24:55 am »
.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;
}