Responsive Table Collapse – Width of First Column

  • Resolved garneranalysis

    (@garneranalysis)


    7 years, 11 months ago

    Hello Tobias,

    I have the Responsive Tables extension and I’m trying to use the collapse mode. I’ve entered the proper shortcode but the table is responding strangely. The collapse response mode (in a mobile view) is showing the first 1 or 2 columns of the table stretched way across the screen so that a horizontal scroll bar is necessary in the window.

    https://firstquarterfinance.com/places-that-hire-at-14-and-15/

    Also, in this current state, the collapsed data is then placed either to the center or the very right of the over-extended first column when the “plus” button is pressed. Each additional column of data is not necessarily aligned with one another either.

    How can I normalize the size of the first 2 columns? By correcting that column size will the location of the collapsed data be corrected? If not, how can I align the collapsed data more neatly when the button is pressed to reveal it?

    Thank You,
    Megan

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

    (@tobiasbg)

    Hi,

    thanks for your question, and sorry for the trouble.

    I just took at look at this link in the mobile phone simulation of the Google Chrome Developer Tools, but could not experience this wrong behavior.
    The only thing that is not properly showing is the “+”/”-” icons position. It’s slightly overlapping the text, due to the CSS code that you are using for the padding.

    Can you maybe post a screenshot of the wrong appearance that you are getting?

    Regards,
    Tobias

    Thread Starter garneranalysis

    (@garneranalysis)

    Tobias,

    I’m not sure how to post a pic here in the thread so I took some screenshots and saved them to an album:

    https://goo.gl/photos/JPSV45o4ujhWkDvZ8

    Megan

    Thread Starter garneranalysis

    (@garneranalysis)

    I just looked at the site on my iPhone 6 and I do not see the same Column stretching issue as I do when I inspect the screen in Google Chrome as an iPhone 5 mobile view. the collapsed data is still not in an ideal location but the first 3 columns are showing properly.

    Do you know why I would be seeing something different in the browser inspect mode? Other than the phone series difference.

    Megan

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi Megan,

    that’s strange. I do not see that for an iPhone 5 in the Developer Tools simulator. Are you reloading the page after switching phone models there (necessary so that the JS library can do its calculations)?

    Now, I do however suddenly get JavaScript errors about jQuery not being defined. This might be caused by your theme or by the JS minification/concatenation that you are doing using a plugin.

    Regards,
    Tobias

    Thread Starter garneranalysis

    (@garneranalysis)

    Hi Tobias,

    Thank you, hitting refresh eliminated the stretched column issue. Sorry, I didn’t realize that was necessary.

    How can I prevent the button from partially covering text? You helped me in another thread previously with sort arrow icons covering text. Is it possible to adapt that code for this issue? Ex:

    .tablepress .column-1 {
    padding-left: 20px !important;
    }

    Also, the collapsed data has a bullet point next to it. Your example table in the Responsive Tables extension page does not have the same bullet point next to the collapsed data. {(https://tablepress.org/extensions/responsive-tables/) And can I align the the collaped data to the left? Or does it have to be centered?

    Thanks,
    Megan

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi Megan,

    the problem is that

    .tablepress .column-1 {
  padding-left: 20px !important;
}

    will apply to all TablePress tables. I would actually suggest to only apply it to those tables where it’s really necessary, by using the ID-based selectors, like

    .tablepress-id-123 .column-1 {
  padding-left: 20px !important;
}

    To remove the bullet point (which is added by your theme) and move the items to the left, you can use

    .tablepress ul {
    list-style-type: none !important;
    padding: 0 !important;
}

    Regards,
    Tobias

    Thread Starter garneranalysis

    (@garneranalysis)

    Tobias,

    Thank you so much for the prompt feedback. I apologize for continuing to bother you but I put in the recommended code (using specific table id for the first part as you mentioned) and my buttons are still partially covering text and the collapsed column still has a bullet point next to it

    https://firstquarterfinance.com/places-that-hire-at-14-and-15/

    You mentioned that the bullets are something that is added by my theme. Did I select a theme upon downloading the plugin? Can/should I change it now?

    Megan

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi Megan,

    can you maybe try again after clearing the cache of the minification plugin that you are using?

    With “theme”, I’m referring to your actual WordPress theme (Divi), not any special TablePress theme. You don’t have to change it, we just need to adjust some CSS code to achieve the desired styling.

    Regards,
    Tobias

    Thread Starter garneranalysis

    (@garneranalysis)

    Thank you for your continued assistance Tobias.

    As I am not the owner of the site, I will need to wait to clear the cache of the minification plugin. The owner is in a different timezone so that probably won’t happen until later today.

    In the meantime, I notice that if I remove the center alignment of body text, then the bullet point on the collapsed data goes away. I would rather have my body text centered but when I re-enter the centered CSS code for body, the bullet point comes back. Is that expected behavior? Could this also be something that will be resolved with a cleared cache?

    I do not have much customized code entered but could any of it be interfering with the button issue? Here is what I have entered for Custom CSS (I left out the color codes):

    .tablepress thead th {
    padding-right: 20px !important;
    }

    .tablepress tbody td,
    .tablepress thead th {
    text-align: center;
    vertical-align: middle;
    }

    .tablepress {
    width: auto;
    margin: 0 auto 1em;
    }

    .tablepress-id-4 .column-1 {
    padding-left: 20px !important;
    }

    .tablepress ul {
    list-style-type: none !important;
    padding: 0 !important;
    }

    Thanks,
    Megan

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi Megan,

    the bullet points only appearing when the body text is centered might also be a theme feature. It has nothing to do with TablePress.
    The bullet points are however gone from the table for me, right now.

    The “Custom CSS” that you posted is correct.
    However, please replace

    .tablepress-id-4 .column-1 {
  padding-left: 20px !important;
}

    by

    table.dataTable.dtr-inline.collapsed>tbody>tr>td:first-child,
table.dataTable.dtr-inline.collapsed>tbody>tr>th:first-child {
  padding-left: 30px !important;
}

    Regards,
    Tobias

    • This reply was modified 7 years, 11 months ago by Tobias B?thge.
    Thread Starter garneranalysis

    (@garneranalysis)

    That worked! The buttons are no longer blocking text. Also, the bullet point is gone as well from the collapsed data.

    Thank you so much for your help Tobias! Already reviewed TablePress with 5 stars ??

    Megan

    Plugin Author Tobias B?thge

    (@tobiasbg)

    Hi,

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

    Best wishes,
    Tobias

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Responsive Table Collapse – Width of First Column’ is closed to new replies.