Table with flip mode, is flipping top row with first column on mobile device

  • Resolved glashelder

    (@glashelder)


    4 years, 9 months ago

    Hi Tobias,

    I need some help with the table press and table press extension.
    I use 2 tables on this pages.

    the table halfway the page (figuur 5 with ID 1) is perfect and behaves good on desktop, tablet and mobile.

    But the table on the bottom of this page (figuur 8 with ID 2) is somehow flipping the top row and first column. This is visible on iPhone, macOS safari and firefox.

    Example:
    dekstop view: https://imgur.com/a/CR3Lodb
    mobile device view: https://imgur.com/i0XWfC9

    Can you suggest how to use this table as expected. A Fixed first row (flip mode) and all other rows scrollable.

    Her is the Custom CSS:
    .tabel {
    font-size: 15px;
    font-family: “myriad-pro”, sans-serif;
    font-style: Normal;
    line-height: 1.6em;
    font-weight: 400;
    letter-spacing: .02em;
    outline: none;
    resize: none;
    color: black;
    }

    .tablepress thead th {
    vertical-align: top;
    }

    .tablepress .column-1 {
    font-weight: 700;
    }

    .tablepress thead th,
    .tablepress tfoot th {
    background-color: #F4F3F2;
    color: #000;
    }

    .tablepress .row-hover tr:hover td {
    background-color: #009fe3;
    color: #fff;
    }

    .tablepress .sorting:hover,
    .tablepress .sorting_asc,
    .tablepress .sorting_desc {
    background-color: #009fe3;
    color: #fff;
    }

    .tablepress-id-1 .column-1,
    .tablepress-id-1 .column-2,
    .tablepress-id-1 .column-3,
    .tablepress-id-1 .column-4,
    .tablepress-id-1 .column-5,
    .tablepress-id-1 .column-6,
    .tablepress-id-1 .column-7,
    .tablepress-id-1 .column-8,
    .tablepress-id-1 .column-9,
    .tablepress-id-1 .column-10,
    .tablepress-id-1 .column-11,
    .tablepress-id-1 .column-12 {
    width: 131px;
    }

    .tablepress-id-2 .column-1,
    {
    width: 150px !important;
    }

    .tablepress-id-2 .column-2,
    .tablepress-id-2 .column-3,
    .tablepress-id-2 .column-4,
    .tablepress-id-2 .column-5,
    .tablepress-id-2 .column-6 {
    width: 131px;
    }

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

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

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    The reason for this is that the table header row has text in multiple rows. Therefore, we need to manually set a height in the responsive view. Please add this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    @media screen and (max-width: 979px) {
	.tablepress-id-2 th,
	.tablepress-id-2 td {
		height: 72px;
	}
}

    Regards,
    Tobias

    Thread Starter glashelder

    (@glashelder)

    Hi Tobias,

    Thank you for the quick reply: unfortunalty it didn’t solve the problem.

    I have added the code, and it does a good job of keeping the different rows at the same height. But the flipping still happens.

    The first column should always show the text: Centrum, West, Oost. etc.
    But is soon I make the window smaller it transposes to the top row.

    Any thoughts?

    I have added a table with id-4 and short text to experiment with and the same thing happens. So it is not a problem of the long text in multiple lines, as it happens with one-line headers text as well.

    thanks again,
    Aram

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    ah, so you want to turn off the flipping? Well, then just remove the responsive=flip parameter from the Shortcode ??

    Regards,
    Tobias

    Thread Starter glashelder

    (@glashelder)

    Thanks.

    I feel stupid now. Of course the mode “responsive=flip” will flip the tables. I have misread your manual page.

    So, using [table id=1 responsive=scroll ?/] is exactly what I need. But I really like to have the first column to stay there in a fixed position, and only column 2 to 8 scrolling. Is that possible?

    Aram

    • This reply was modified 4 years, 9 months ago by glashelder.
    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

    no problem! ??

    To get a fixed first column, you could try the TablePress Extension from https://tablepress.org/extensions/datatables-fixedcolumns/ instead of the Responsive Tables Extension.

    Regards,
    Tobias

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Table with flip mode, is flipping top row with first column on mobile device’ is closed to new replies.