Fixed header issue on iPhone

Hi,

thanks for your question, and sorry for the trouble.

This seems to be related to the extra Shortcode parameter for the offset that you added. Can you try again after removing or adjusting that?

Regards,
Tobias

Good Morning

Thanks for this great plugin

My problem is that the table header does not fit the table rows on a large pc screen eg in this link https://torneosoccercup.com/sc/2017/05/30/futbol-8-sede -one /
You will see that the first table called NEXT DATE () is perfect but the others do not fit the screen size unless you click next.

What could I do to fix this?

Hi jttriana86,

thanks for your post, and sorry for the trouble. However, next time, please start a new thread for your problem ??

The problem on your site is that you are using the tables inside these navigation tabs, and that they use the Horizontal Scrolling checkbox. This is not completely compatible, as the JS library can not calculate the proper widths of elements that are initially hidden on the page. I therefore recommend to uncheck the “Horizontal Scrolling” checkbox for these tables. Instead, you could try using the scroll mode of the TablePress Extension from https://tablepress.org/extensions/responsive-tables/ which might work better here.

Regards,
Tobias

Thank you very much, I’m going to donate because you’re the best

Hi,

thanks, I really appreciate that!

Best wishes,
Tobias

Hi again Tobias.

Currently the Shortcode parameter is this: “[table id=4 datatables_fixedheader=top datatables_fixedheader_offsettop=115 /]”

When I remove the offset altogether (like this: “[table id=4 datatables_fixedheader=top datatables_fixedheader /]”), the header does not appear fixed on desktop or on iPhone.

When I change the number from 115 – it looks correct on the desktop but not on iPhone. If I reduce it, for example to “offsettop=”15” it still does not appear on desktop (scrolls up just like regular header) and has a far smaller margin at the top of iPhone.

Any other suggestions for me?

Thank you!

Hi,

the correct Shortcode for a Fixed Header without offset would be

[table id=4 datatables_fixedheader=top /]

Can you try that?

I’m afraid that having different offsets on phones and/or desktop is not possible, so we will have to find a solution that does not use an offset.

Regards,
Tobias

Hi again Tobias.

That makes it better on the iPhone but it is not fixed in Chrome… The header just goes away as one scrolls down the page in Chrome.

Hi,

it seems like none of the tables on https://torneosoccercup.com/sc/2017/05/30/futbol-8-sede-fontibon/ is configured to use the FixedHeader right now, correct?

Regards,
Tobias

Hi Tobias. Not sure if you responded to this reply from yesterday. If so, I missed it ??

I changed the shortcode to the code you provided for a Fixed Header without offset:

[table id=4 datatables_fixedheader=top /]

While that makes it better on the iPhone it is not fixed in Chrome: The header just goes away as one scrolls down the page in Chrome.

So in the meantime I have reinserted the original shortcode: [table id=4 datatables_fixedheader=top datatables_fixedheader_offsettop=115 /] for the time being, but of course, the problem persists on iPhone.

This is in regard to this page: https://www.generalrentalfrankfort.com/inventory/ (NOTE that I’ve launched the site, so the URL is different now).

Any additional suggestions for me? Thank you!

Hi,

as mentioned above, we will not be able to find a good solution with the 115px offset (which seems to be too big anyways, on the desktop).

For the table on https://www.generalrentalfrankfort.com/inventory/ , can you now remove the offset parameter again, i.e. use the Shortcode [table id=4 datatables_fixedheader=top /] ?

Regards,
Tobias

Hey again Tobias. I’m afraid I need that 115 offset in there for the desktop version, as my page header is that high.

As noted, when I remove that offset and use the code you sent, the table header scrolls up behind and above the page header, so it does not serve the intended purpose of being fixed and therefore it is not visible to visitors after scrolling.

I suppose if there is no other option, I’ll just need to leave the table header “floating” on mobile devices.

If you should come up with a fix in the future, please post it or let me know, if you would. I would be most appreciative.

Hi,

hhm, when I check your page, the 115 seems to big for me, as there is a gap between the page header and the fixed header row of the table.

I would rather suggest we not let it hide behind the page header, but stay above. That’s possible with “Custom CSS”:

.tablepress.fixedHeader-floating {
  z-index: 1000;
}

Regards,
Tobias