Changing styles of select component

[ridwanhabbal]

Hi,

I have added the selector to my application. However, when I apply the css for all like the following, I get the whole page elements get affected.
<style type="text/css">
         *{
                padding:0px;margin:0px;
            font-size:12px;
            font-family:Verdana, Geneva, Helvetica, sans-serif;
                line-height:20px;                            
         }
         
           
      </style>

I tried to apply the class or some style using some javascript code and jquery but they failed. so can you advise how to change the css custom things, not changing the jquery in the import url, so I can set myspecific border color and keep the rest as is, similarly, changing the background color.

Please advise.

Regards,
Ridwan Habbal

[ridwanhabbal]

Hi everybody...
Can't anyone give a hint regarding this?
Thanks for help in advance
Ridwan

[paramvir]

Here is an example jsfiddle on how to change css rules of common classes in pqSelect.

http://jsfiddle.net/dLvx6u63/10/

And the classes are documented here:

https://github.com/paramquery/select/wiki/Css-customization

[ridwanhabbal]

Thanks for the help.

I have another issue. When I apply the searchable combo style to a select item it works fine, however, when I apply it inside a div that is configured to work as a modal popup it fails. I tried to see which attribute of the style of the enclosing div conflicts and it turned out it is : display. when display=none, I get the problem. the css for the modal popup is

.popupDialogClass{
   background-color:white;
   display:none;
   padding: 10px;    
   border: 2px solid #ddd;
   float: left;
   font-size: 1.2em;
   position: fixed;
   top: 50%; left: 50%;
   z-index: 99999;
   box-shadow: 0px 0px 20px #999;
   -moz-box-shadow: 0px 0px 20px #999; /* Firefox */
    -webkit-box-shadow: 0px 0px 20px #999; /* Safari, Chrome */
   border-radius:3px 3px 3px 3px;
    -moz-border-radius: 3px; /* Firefox */
    -webkit-border-radius: 3px; /* Safari, Chrome */
}
when I set display=block it works fine, however, I have to set display =none because the modal popup is initially closed.

Any hint?
Thanks
Ridwan

[ridwanhabbal]

Hi everybody
Any hint? Hope you help me
Thanks
Ridwan

[paramvir]

pqSelect being a js control can't display correctly when its ancestor is hidden ( display none ).

Solution is to call refresh on pqSelect when dialog is shown.

http://paramquery.com/api/select#method-refresh

http://api.jqueryui.com/dialog/#event-open

[ridwanhabbal]

Thanks for the help. It works now
One more issue is now, the combo box get appeared however, the drop down menu that contains the elements is getting displayed behind the popup. I tried to play with z-index property and make the z-index of (.pq-select-menu, .pq-select-popup) higher than the popup css class. but no hope.
maybe I applied it incorrectly or maybe you have another solution.

Thanks in advance
Ridwan

[paramvir]

Try to set z-index of .pq-select-popup-cont higher than the popup, though its z-index is already set to z-index:10000; which should work unless popup in your case has z-index more than 10000.

If still doesn't work please share a jsfiddle so that I can look into it.

[ridwanhabbal]

Hi,

Thanks for support. I have another issue now. The issue is that I have some select item to be disabled / enabled based on specific input. I could archive that by calling:
$("#recievingMethodId").pqSelect("enable");
$("#recievingMethodId").pqSelect("disable");
However, the style that gets applied when the multiple select item is disabled needs to changed to look like the style I apply for other regular items.
When the item is enabled the style looks ok. Only when it's disabled.

Thanks in advance.
Ridwan

[ridwanhabbal]

Hi everybody... anybody would like to help please?

[ridwanhabbal]

Hello, is there someone who would like to help me? Please

[paramvir]

ui-state-disabled class is added to the control when it's in disabled state.

So you can define custom css rules for the class combined with control to change its style.

.pq-select-button.ui-state-disabled{
 /*define your css rules*/
}