DataTables ColumnFilterWidgets not working

Hi,

thanks for your post, and sorry for the trouble.

You mean the width of the dropdowns, right?
To fix that, please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.column-filter-widget select {
  max-width: 100px;
}

Regards,
Tobias

Tobias,

Getting there.

Is there a way of doing the measurement per column, like you do with TablePress? Also, will this now apply to all tables? Can I make it table specific?

Thank you,

TablePress column specific example:
.tablepress-id-32 .column-3 {
width: 35%;
}

Hi,

in order to control the individual dropdowns, you would need CSS like

#tablepress-35_wrapper .column-filter-widget:nth-child(3) select {
  width: 200px;
}

(The 35 is the table ID, and the 3 is the column/dropdown.)

The code from my first reply would apply to all tables/dropdowns, this new one would not.

Regards,
Tobias

Tobias,

Got it, thanks. One detail in case anybody is following this thread. The code Tobias suggested…
like #tablepress-35_wrapper .column-filter-widget:nth-child(3) select {
width: 200px;
}
… may appear to not be working if you used inserted his previous code…
.column-filter-widget select {
max-width: 100px;
}
… which gets the ColumnFilterWidget working. You will need to increase the “max-width” value to greater than the column you are wanting to affect the size of.

Or at least I was lame enough to struggle with that!

Thank you Tobias,
Will

Hi,

no problem, you are very welcome! ?? Good to hear that this helped!

Best wishes,
Tobias

Tobias,

OK, let me know if this should be a new thread, I will re-ask.

I’ve done what you suggested, so far so good.
https://www.anasysinstruments.com/sandbox/

But I need to integrate the two column headers. I either need to get the sort coding inside the red headers, or I need to make the red headers disappear and not take up any space. In the second instance i will need to make the sort boxes red.

Is this going too far?

Thank you,
Will

Hi Will,

are you sure that you want that? For me, that wouldn’t make sense. In the current way, the dropdowns are clearly a set of filtering controls above the table.
I’m not aware of integrating them into the table, sorry ??

Hiding the actual column headers would be possible, but I don’t think the resulting layout will satisfy you:

.tablepress-id-35 thead {
  display: none;
}

Regards,
Tobias

Tobias,

OK, thanks for that.

I couldn’t say for sure what a user would find logical or not. I have had a request for the sorting currently on the table to be more in depth, hence my request. But it’s certainly debatable whether that works best for the user.

Will

Hi,

ok, if you are requested to do it like that…

Best wishes,
Tobias