Fixed Column with Double Scroll Bar When Show Entries More than 10

Hi,

thanks for your post, and sorry for the trouble.

I’m not really sure why this happens, but the fix should not be difficult. Please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

.DTFC_LeftBodyLiner {
  padding-right: 0 !important;
}

Regards,
Tobias

THx for your reply. the code you gave me is not working. Also I have another problem, the sticky header can not follow the table horizontal scroll, any solution? thank you

Hi,

hhm, it’s working for me. When I now check your link, I don’t get the extra scroll bar…

As for the FixedHeader of the table: Unfortunately, it’s not currently possible to use both FixedHeader and FixedColumns at the same time, sorry.

Regards,
Tobias

Dear Tobias,
The double scroll will only show when you select more than 10 entries. Can you see that?

Hi,

ok, I see… Please also try adding this:

.DTFC_LeftBodyLiner {
  overflow-y: hidden !important;
}

Regards,
Tobias

Hi Tobias,
The double scroller is gone, thx.
By the way, any chance I can modify the filter button width and position?

Hi,

great! Thanks for the confirmation!

What exactly do you mean to change about which button? I’m a bit confused here.

Best wishes,
Tobias

Hi Tobias,
https://staging-viitorsemiconducotr.kinsta.cloud/home/

1. I mean the filter and button(csv, print,) boxes above my second table. Can I adjust the width and position?

2. And also you can see there are two Tablepress tables in my link. The second table is created by Divi Tablepress Styler which works fine with all buttons and filters shown. But I don’t know why the first table which I created manually can not show filters but only buttons(csv, print,). Can you please check if my code is wrong for the first table?

[table id=1 datatables_buttons=”csv,excel,pdf,print” datatables_columnfilterwidgets=true datatables_columnfilterwidgets_exclude_columns=1,3,6,9,11,13,14,15,16 automatic_url_conversion=true utomatic_url_conversion_new_window=true?filter_columns=”1″ datatables_fixedcolumns_right_columns=1 responsive=”scroll” datatables_fixedcolumns_left_columns=1/ ]

3. By any chance I can repeat the header column at the bottom of my table and also every time I display 20, 50, 100, all entries? For making up that I can not make fixed+horizontal scrollable header?

Thanks so much for your help!

• This reply was modified 2 years, 4 months ago by angelawu.

Hi,

1) Yes, this is possible with CSS code. What exactly would you like to change? I can then try to make code suggestions.

2) This is due to a conflict in an internal parameter, that both of the Extensions are changing. To make this work, please add

"dom": "BWlfrtip"

to the “Custom Commands” text field on the table’s “Edit” screen. (The TablePress Styler for Divi plugin does this automatically.)

3) You can add a footer row with the same content, i.e. add a new row at the end of the table, into which you put the same texts as in the first row, and then enable the “Table footer” checkbox. Having rows “in the middle” of the table like that is however not possible.

Regards,
Tobias

Hi,
Now I have deleted the tablepress styler table, with only the mannually set table left on this page:
https://staging-viitorsemiconducotr.kinsta.cloud/home/

1.About Filter Boxes Design:
A)I would like to make a space before “package” filter and make every filter align with it’s own column and with same width of each column.
B)I would like to change the border color and background color of both filter boxes and buttons(CSV,PDF…)
C) Why my VDS(V) filter box is padding is wider than others?

2. command works, thx.

3. I succeffuly add the footer. it’s really a useful feature. One small thing is that the footer layout would gradually mess up as I show more and more entries.

4.How to adjust the width of each column? I used the short code column_widths=”5%|5%|5%|5%|5%|5% but nothing changed.
Below is my full short code:

[table id=1 datatables_buttons=”csv,excel,pdf,print” hide_columns=”9″ datatables_columnfilterwidgets=true datatables_columnfilterwidgets_exclude_columns=1,3,6,9,11,13,14,15,16 automatic_url_conversion=true automatic_url_conversion_new_window=true? column_widths=”5%|5%|5%|5%|5%|5%” datatables_fixedcolumns_right_columns=1
responsive=”scroll” datatables_fixedcolumns_left_columns=1 / ]

Thanks for your prompt assistance!

Hi,

1)
A) Unfortunately, I don’t see a good way for that, as there’s no direct “connection” between the filter dropdowns and the columns. You would have to mess with individual widths and margin between the dropdowns, which will be very ugly and not really maintainable if the content of the table changes.
B) The styling for the buttons is in https://staging-viitorsemiconducotr.kinsta.cloud/wp-content/plugins/tablepress-datatables-buttons/css/buttons.dataTables.css You could try extracting the relevant pieces and copy/paste those with your changes e.g. into the “Custom CSS” textarea in TablePress.
C) The padding for “VDS(V)” appears like that because some of the option values that are shown when clicking the dropdown are longer/wider than the actual word “VDS(V)”. For all other dropdowns, the name of the dropdown is actually the longest word.

3) Do you mean if the text in the footer cell is very long and shown in multiple lines of text? That’s a consequence of that text’s length, and the number of columns, indeed.

4) What are you trying to adjust regarding the width? Essentially, these changes will not take effect as your table’s columns are already at their limit. They can’t really be more narrow anymore. You could try making them wider, with CSS like

.tablepress-id-1 .column-2 {
  width: 200px;
  min-width: 200px;
}

(at least for the relevant columns).

Regards,
Tobias

Hi Tobias,
for 3) I mean this:
https://staging-viitorsemiconducotr.kinsta.cloud/wp-content/uploads/2022/07/123.jpg

for 4) thanks for your advise, I know how to adjust now.

BR
Angela

Hi,

when is this happening? I can’t reproduce this, neither by changing the pagination, scrolling, or anything?!

Regards,
Tobias

Hi Tobias,
my site move from Kinsta to Siteground below url:
https://angelaw38.sg-host.com/home/

You can see how to reproduce:
[video src="https://angelaw38.sg-host.com/wp-content/uploads/2022/07/123.mp4" /]

BR
Angela

Hi,

ok, right now, the JS features are not working at all, the reason being that you are using defer to load the jQuery JS library (and likely others as well). Unfortunately, that will not work for the JS features, so that the defer loading has to be turned off in the optimization/caching plugin that you are using for this.

Regards,
Tobias