images in columns

Hi,

thanks for your post, and sorry for the trouble.

My assumption here is that this is related to the scrolling in the table. That requires the JS to fix some of the column widths automatically. Can you maybe turn off the “Horizontal Scrolling” checkbox for a quick test?

The problem in the header row is caused by the

height: 90px;

command in the first piece of “Custom CSS”. That also applies to the header cell in the first column. As it should not be necessary, I suggest to remove that.
Otherwise, you could also change

.tablepress-id-16 .column-1 {

to

.tablepress-id-16 tbody .column-1 {

Regards,
Tobias

thanks for your help Tobias, I will give it a try.

Hi,

sounds good! Let me know when there are problems!

Regards,
Tobias

HI Tobias
I got the header row fixed – thanks – but there is something strange going on when I inspect the images in the first column. Compare the top two in the inspector – I see an extra 18×80 placeholder or something at the bottom of the 2nd image, which is the only one that is center aligned even though they all are tagged “aligncenter”. The top image has a size of 84×80 for some reason – even though the images are 80×80. It’s a small detail but I need to understand what’s going on, and if I need to resize the thumbnails or tweak something else to get it right. I have many many images to add to that first column….
thanks for your help
N

Hi,

I’m not exactly sure why this is happening, it might be related to the box-sizing.
You could therefore try to change that, by adding

.tablepress td,
.tablepress th {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

Also, the HTML for the link in the second content row differs from the rest a little bit.

Regards,
Tobias

Hi and thanks for your quick reply.

The only difference I saw in the HTML besides that it’s a different image, is that the first image has “data-wp-pid=”825” at the end.

I just re-imported the second image which now matches all the rest – not sure what was different there – but I still see an extra 3px padding on the right side of all of them–see: https://imgur.com/soLEt7E

The code for the box sizing made it all worse, giving me a larger padding (still not centered) and messing up the header.

A couple of other questions (sorry)
–I still see the “entries” label showing above the table even though the “Enable the table information display” is turned off. ??

-Is it possible to edit the “show”tag, and change the position of that box?

thanks so much
N

Hi,

I had seen some different style attribute in the <a> tag there, but that seems to be gone now.

Yes, I also see that 3px “padding” (it’s technically not a padding, as far as I can see), but I don’t see where it’s coming from.

Additionally to adding the box-sizing code, please try reducing the width and heightthat you are setting to80px`.

The “entries” label is part of the “Show” above the dropdown. Basically, you’ll have to fix the position of that, with

.dataTables_wrapper label input,
.dataTables_wrapper label select {
  display: inline !important;
  margin: 2px !important;
}

(You can also turn that off by unchecking the “Length Change” checkbox.)

To change the actual text of “Show … entries”, you can use https://tablepress.org/extensions/change-datatables-strings/

Regards,
Tobias

HI Tobias
So I am really liking Table press & the extensions I am trying out. I am still having trouble with my images though. If you look here: https://andes-world-travel.flywheelsites.com/ at the table in the first column – the images are not centered, still with some extra “padding”, but now on rollover the cell enlarges and centers the images. Do you know what is going on there? I am having issues with my css on my site, not displaying correctly, but this seems like something else.
Thanks for your help
Nancy

Hi Nancy,

I just checked again, but I just can’t spot why the images are not center. It must be some weird interaction with the theme CSS…

That effect on rollover/hover is also caused by your theme. To turn that off, you can try adding this “Custom CSS”:

.tablepress-id-16 tbody .column-1 img {
    margin: 0 !important;
    padding: 0 !important;
}

Regards,
Tobias

THanks Tobias – I think I fixed the problems. I am now though getting an error message on one of my tables, which I formatted for the mobile. I can’t find any errors. This is the message:

DataTables warning: table id=tablepress-64 – Requested unknown parameter ‘3’ for row 0. For more information about this error, please see https://datatables.net/tn/4

on this page on the mobile:
https://andes-world-travel.flywheelsites.com/exploring-2/

it is displaying fine, as far as I can see. Can you see what the problem is?
thanks
N

Hi,

that’s coming from the “Custom Commands”

"columnDefs": [ { "type": "formatted-num", "targets": 5 } ]

as far as I can see. That 5 would target the sixth column, but the table only has 3 columns shown.

Regards,
Tobias

ah I get it thanks. code not needed there.

Is it possible to hide columns with code from the shortcode or only from the admin?

Hi,

no, you can also hide them via the Shortcode parameter, namely the hide_columns parameter, see https://tablepress.org/faq/documentation-shortcode-table/

Regards,
Tobias

great that’s what I needed, thanks!

Hi,

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

Best wishes,
Tobias