Filter input, drop down arrow has no padding to protect it

[jplevene]

In the filter bar drop down, if the selection is too long, the drop down arrow gets hidden because there is no padding in the input.

The input only has the generic classes "pq-grid-hd-search-field  ui-corner-all" and is missing a class like "pq-search-dropdown" so that we can apply below so that it will look like the second image:

Code: [Select]

.pq-search-dropdown {
  padding-right:1.6em;
  text-overflow: ellipsis;
}
A trick you could do is to use a <select> with none or one <option> instead and add the following to prevent the default drop down and trigger your own:

Code: [Select]

select.on("touchstart touchend mousedown", function(e){
e.preventDefault();
show_hide_dropdown()
});
When an option is selected in the the pqGrid drop down, delete the existing <select> <option>, then add a new <option> with the value as a JSON array string of the selected values, and the html as the displayed text values:

Code: [Select]

<option value="[1,4,6,9]">First, Forth, Sixth, Ninth</option>

[paramvir]

I don't see this issue in v11.1.0

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

dropdown icon in ShipCountry column remains visible.

[jplevene]

Everthing is visible, its just too many options goes under the drop arrow so it gets confusing.

You have set the padding in the style as 16px (not em) and not in a class assigned to (maybe like "pq-grid-hd-search-field-drop-down"), so when I do something like below, it goes wrong:

Code: [Select]

depot_filter = {
crules: [{condition:"range", value:[]}],
selectGridObj: function(ui) {
// Change the label render
ui.obj.colModel[0].renderLabel = function(ui){ return htmlEntities(ui["rowData"]["NAME"]); };
ui.obj.colModel[0].sortable = false;
},
//options: [], // Set below
gridOptions: {
stripeRows: false, // No stripey rows
numberCell: {show: false}, // Hide the number column
filterModel: {header: false},// Hide search box in the dropdown
focusModel: { focusable: false, onTab:""}, // Prevent the focus box
selectionModel: {type:null, column:false} // Disable row selection
},
title: function(sel, ui, column){
var s = "";
if(!empty(sel))
for(var i = 0; i < sel.length; i++) {
s += (s===""?"":", ") + depots_ids[ sel[i] ];
}

return s;
}
};

[jplevene]

I found where it is going wrong

.pq-theme input, .pq-theme textarea, .pq-theme select {
...
padding: .2em .28em;
...
}

But it is only one of the cells (see image) because I added },

style:"text-align:left"

[jplevene]

Looked into this further, by me setting the style option, it completely removed the padding from the input instead of adding a style to it.  Had the padding been due to a CSS class, then this wouldn't have happened.  I think it should be a CSS class, which also means that if I want to change the style in the style option, it will do so.

So for instance if I do "color:red" in the style option, the padding will disappear.

This is why I this is a bug and not a help request.