Fixed Header & Responsive = Flip Help!

  • Resolved marksurkin

    (@marksurkin)


    5 years, 4 months ago

    Hi Tobias, can you help?

    I’ve got this page set up with the fixed header and responsive = flip mode enabled, but the columns don’t line up properly when in flip mode, and i’m using images in the column headers, which get cut off in flip mode.

    I’m also noticing on mobile that when in landscape mode, when the header column becomes fixed to the top, it moves over to the right about 25px or so, which puts all of the data in the columns slightly offset from the headers.

    Any ideas??

    thanks
    -Mark

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    Unfortunately, the flip mode and the FixedHeader Extension are not really compatible, which you can see when scrolling down on small screens.

    However, the problems that you are facing are independent from each other.

    The offset of the FixedHeader likely is caused by the JS library being unable to properly calculate certain column widths. Unfortunately, I haven’t yet seen a fix for this ?? At this time, I can therefore only recommend to not use the FixedHeader Extension with this table.

    Now, for the misaligned first column of the flip mode: Here, the images do indeed cause a different row height. And as the columns are not “connected” in the flip mode, they are misaligned. We could, with some manual CSS, however adjust the row heights to be equal. For that, you could add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    @media screen and (max-width: 767px) {
	.tablepress-id-2 thead th,
	.tablepress-id-2 tbody td {
		height: 90px !important;
	}
}

    Regards,
    Tobias

    Thread Starter marksurkin

    (@marksurkin)

    That did the trick, thank you Tobias!

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

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

    Best wishes,
    Tobias

    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Fixed Header & Responsive = Flip Help!’ is closed to new replies.