ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: queensgambit9 on September 01, 2017, 06:20:23 pm

Title: Width of select dropdown
Post by: queensgambit9 on September 01, 2017, 06:20:23 pm

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

Title: Re: Width of select dropdown
Post by: paramvir 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

Title: Re: Width of select dropdown
Post by: queensgambit9 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...

Title: Re: Width of select dropdown
Post by: paramvir on September 05, 2017, 09:55:06 pm

Sorry, what's the issue in that jsfiddle?

Title: Re: Width of select dropdown
Post by: queensgambit9 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.

Title: Re: Width of select dropdown
Post by: paramvir 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;
}


Title: Re: Width of select dropdown
Post by: queensgambit9 on September 06, 2017, 03:25:07 pm

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

Title: Re: Width of select dropdown
Post by: paramvir on September 06, 2017, 10:58:46 pm

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

Title: Re: Width of select dropdown
Post by: chahal007 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

Title: Re: Width of select dropdown
Post by: queensgambit9 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?

Title: Re: Width of select dropdown
Post by: paramvir on August 27, 2018, 07:25:33 pm

Customization of filter UI is documented in this example:

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

Title: Re: Width of select dropdown
Post by: queensgambit9 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?

Title: Re: Width of select dropdown
Post by: paramvir 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

Title: Re: Width of select dropdown
Post by: queensgambit9 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...

Title: Re: Width of select dropdown
Post by: paramvir 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;
}


Title: Re: Width of select dropdown
Post by: queensgambit9 on August 28, 2018, 04:16:56 pm

OK, tried most of the elements in the popup but can't get it to work...