Remove X from Row Filter but haven't recovered space

[Gerry]

I have this table with a Row Filter. There is an "X" both in and after the filter input element used to clear content.

The following code can be used to remove both Xs, or you can comment out a line to remove one X.

dataBound: function (e) {
               this.element.find('.k-filtercell .k-autocomplete .k-clear-value').remove(); // remove X from input box
               this.element.find('.k-button-icon').remove(); // remove X button after input box
            },

The problem: even if you remove the X button after the input field, the space is not recovered. My table has a lot of fields and I do not have space for a redundant and completely unnecessary button.

The question: how can I remove the X button and get the space back? Even if I remove the button (code above), the input fields do not resize to fit the space available.

[Orlin]

Hello,

The LESS-based themes are designed so that there is always space for that X clear button, even when it's not there. To make it disappear altogether, you need to remove the space by CSS.

This appears to be the BlueOpal theme, so I will offer a solution tailored to that theme, and if you need to you can play around with the values to fit the other themes.

These rules will remove the space left for the X button:

.k-filtercell > .k-operator-hidden {
  padding-right: 0;
}
.k-filtercell > span {
  padding-right: 2.4em;
}

.k-filter-row .k-dropdown-operator {
  right: 0;
}

You can see the above in action here: https://dojo.telerik.com/umOyAY

I hope this helps.


Regards,
Orlin
Progress Telerik

[Gerry]

Great thanks