Datatable filter text input length

jQuery UI Widgets
Post Reply
darcome
Posts: 31
Joined: 29 Sep 2015, 17:43

16 Feb 2016, 10:08

Hello everyone,

I have a question, is it possible to change the length of the filter text input field of the datatable? Or even better, automatically use a percentage of the column width?

Because if you have a short column it goes behind the limits of the column...

you can see the effect even in the demo page if you narrow the browser window

Thanks in advance

cagatay.civici
Prime
Posts: 17987
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

16 Feb 2016, 12:50

Try;

Code: Select all

.ui-datatable .ui-column-filter {
  width: 100%;
  box-sizing: border-box;
}

darcome
Posts: 31
Joined: 29 Sep 2015, 17:43

16 Feb 2016, 13:03

Yeah!

It works like a charm!

But shouldn't it be the default behavior?

However, thank you very much!

cagatay.civici
Prime
Posts: 17987
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

16 Feb 2016, 16:53

Glad to hear, if we get more feedback, we'll make it default.

darcome
Posts: 31
Joined: 29 Sep 2015, 17:43

17 Feb 2016, 11:08

I'll discuss my case :)

Here is a screenshot without the css you gave me:

Image

And here the one with the css:

Image

As you can see if you have small columns like "Ente" and "Tipo", the filters are ugly to see because they go beyond the column width....
In the opposite, it could be ugly too to have a so large filter like in the "Oggetto" column...

A good trade off could be to have the 100% thing plus a "maxwidth" setting so the filter will not grow too much...

However I prefer to have a big filter than a filter beyond the column width

What do you think about it?

cagatay.civici
Prime
Posts: 17987
Joined: 05 Jan 2009, 00:21
Location: Cybertron
Contact:

18 Feb 2016, 11:39

I've added this to upcoming 4.1.

jkotak
Posts: 3
Joined: 01 May 2018, 19:54

31 May 2018, 16:46

I believe we need this as default.

Solution worked for me too.

Thanks

Likyle
Posts: 1
Joined: 11 Jun 2018, 12:33
Location: https://diceus.com/

11 Jun 2018, 12:36

cagatay.civici wrote:
16 Feb 2016, 12:50
Try;

Code: Select all

.ui-datatable .ui-column-filter {
  width: 100%;
  box-sizing: border-box;
}
Thanks for the answer, for a long time could not find the answer and solve the problem, it helped me!

Post Reply

Return to “PrimeUI”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest