Support » Plugin: TablePress » Fixed header issue on iPhone

  • Resolved armandoarrastia

    (@armandoarrastia)


    Hey again Tobias.

    On iPhone in Chrome and Safari, when I view the page (http://142.4.6.252/~lexingu2/generalrental/inventory/), the fixed header (in Chrome) appears only when I tap the screen), and (in both Safari and Chrome) it appears mid-section of the screen, not at the top. So you see the content of rows above and below it (it is overlaid on the rows, blocking some from view). I can send screenshots if you need me to.

    Thanks.

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    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

    jttriana86

    (@jttriana86)

    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 http://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?

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    jttriana86

    (@jttriana86)

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

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks, I really appreciate that!

    Best wishes,
    Tobias

    Thread Starter armandoarrastia

    (@armandoarrastia)

    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!

    Plugin Author TobiasBg

    (@tobiasbg)

    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

    Thread Starter armandoarrastia

    (@armandoarrastia)

    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.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

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

    Regards,
    Tobias

    Thread Starter armandoarrastia

    (@armandoarrastia)

    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: http://www.generalrentalfrankfort.com/inventory/ (NOTE that I’ve launched the site, so the URL is different now).

    Any additional suggestions for me? Thank you!

    Plugin Author TobiasBg

    (@tobiasbg)

    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 http://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

    Thread Starter armandoarrastia

    (@armandoarrastia)

    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.

    Plugin Author TobiasBg

    (@tobiasbg)

    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

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Fixed header issue on iPhone’ is closed to new replies.