Responsive Table Collapse – Width of First Column

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

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

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

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

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

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

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

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

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

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.

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

Hi,

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

Best wishes,
Tobias