Support » Plugin: TablePress » Responsive table head row out of alignment

  • Resolved Jodi Wigmore

    (@jodi-wigmore)


    Hello, Tobias

    First, thank you for an excellent plugin! I am in the process of converting a client’s site to a new responsive theme, and have migrated from Table Reloaded to TablePress (which I used for the first site), but am seeing some odd behaviour in mobile devices. I imported my old xml file to the new testing area, installed a brand new TablePress (did not install Reloaded), then assigned the appropriate code on one page:

    http://v2.equitablerealestate.ca/residential-vacancies/

    [table id=1 responsive=”tablet” /]
    The table [table-info id=1 field=”name” /] was last modified at [table-info id=1 field=”last_modified” format=”raw” /] by [table-info id=1 field=”last_editor” /].

    As you can see on a tablet or phone, the first 3 entries of the head row are out of alignment with everything else. I’m wondering if this might be a styling error, or something to do with importing old data? Please advise and thank you; I am happy to donate for your time 🙂

    Best, Jodi

    http://wordpress.org/plugins/tablepress/

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

    (@tobiasbg)

    Hi Jodi,

    thanks for your post, and sorry for the trouble.
    Good to hear that you already made the switch from WP-Table Reloaded to TablePress!

    About your issue:
    The reason for this is the “Size” column, which has text in two lines of text. Due to that, the height of the rows (in responsive mode) can not be determined correctly and has to be set with CSS.
    Please try adding this to the “Custom CSS” textarea on the “Plugin Options” screen of TablePress:

    .tablepress-id-1 td,
    .tablepress-id-1 th {
      height: 59px;
    }

    Regards,
    Tobias

    Thank you, Tobias! Worked perfectly. I have another question but am going to search the forum before I bother you again 🙂

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

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

    And don’t hesitate to open a new thread if you can’t find a solution for the other question!

    Best wishes,
    Tobias

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

    Hi Tobias

    I’m not sure what happened but for some reason my responsive tables are not lining up again.

    http://v2.equitablerealestate.ca/office-building-vacancies/

    It looks fine on a desktop but not on a tablet or phone – I see a bit of grey top and bottom that seems to be throwing it all off. Please advise and thank you, again. Jodi

    I have added this into the plugin options CSS area:

    .tablepress-id-1 td,
    .tablepress-id-1 th {
    	height: 59px;
    }
    
    .tablepress thead th,
    .tablepress tfoot th {
    	color: #fff;
    	background-color: #014918;
    }
    
    .tablepress thead .sorting_asc,
    .tablepress thead .sorting_desc,
    .tablepress thead .sorting:hover {
    	background-color: #6b6b6b;
    }
    
    .tablepress .row-hover tr:hover td {
    	background-color: #e8e8e8;
    }
    
    .tablepress {
    	width: auto;
    	margin: 0 auto 1em;
    }
    
    .tablepress {
    	border: none;
    }
    Plugin Author TobiasBg

    (@tobiasbg)

    Hi Jodi,

    as this is now table 2, the CSS from above does not apply, as that was for table 1 only.
    To now also change table 2, please add this to the “Custom CSS”:

    .tablepress tr {
      vertical-align: top;
    }
    .tablepress-id-2 .column-8 {
      height:59px;
    }

    Regards,
    Tobias

    Ah! Of course, so if I remove the table id then it will work for all tables, correct? I’m curious, what does the .column-8 specify? 🙂

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    yes, you could remove the “-id-2” part here, and make that piece of code apply to all tables. In this example, you don’t want to do this though, as it would change the height of all cells in all tables then.

    The .column-8 specifies that the code shall only apply to column 8 of the table. However, as in the responsive mode the table is flipped, this basically targets row 8 of the table when in responsive mode.

    Regards,
    Tobias

    Ah, thank you for the explanation 🙂

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    sure, no problem! 🙂
    If this problem happens again, feel free to post here again!

    Best wishes,
    Tobias

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Responsive table head row out of alignment’ is closed to new replies.