Row details column alignment

Resolved ossimuso
(@ossimuso)

8 years, 9 months ago

Hi Tobias,

I just have an issue on mobile when using the responsive extension and the row details extension. You can see it at the bottom of this page. Is there a way to make the row details row (with all the + icons) the same width as the other rows underneath it?

Also for some reason the alignment of the header cell in each row is not centered vertically. Is there a way to align it vertically to be in the middle.

https://wordpress.org/plugins/tablepress/

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author TobiasBg
(@tobiasbg)

8 years, 9 months ago
Hi,

thanks for your question, and sorry for the trouble.

I suggest that you try this “Custom CSS” on the “Plugin Options” screen of TablePress to make this better:
```
@media (max-width: 767px) {
  .tablepress-responsive-phone.tablepress-row-details tbody tr td.row-details-toggle {
    width: auto;
  }

  .tablepress-row-details tbody tr .row-details {
    height: 185px;
  }
}
```
Regards,
Tobias
Thread Starter ossimuso
(@ossimuso)

8 years, 9 months ago

Thanks Tobias,

Worked like a charm.

Plugin Author TobiasBg
(@tobiasbg)

8 years, 9 months ago

Hi,

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

Best wishes,
Tobias

Thread Starter ossimuso
(@ossimuso)

8 years, 9 months ago

Hi Tobias,

Just as a follow up. I have tried to make the text in the first column (header) vertically aligned to middle in responsive view. I used
.tablepress th,
.tablepress td {
text-align: center;
vertical-align: middle;
}

.tablepress thead th {
text-align: center;
}

Basically what I’m hoping to achieve is to have the word “Rank” in vertical alignment with the number “1” and so on. The table can be viewed at the bottom of this page.

Also, would it be possible to centre the + icons in the top row?
Plugin Author TobiasBg
(@tobiasbg)

8 years, 9 months ago
Hi,

this is actually not an alignment issue, but if you look closely, the first cell in that column is not high enough.

Therefore, please try with this “Custom CSS” instead of what I posted above:
```
@media (max-width: 767px) {

	.tablepress-responsive-phone.tablepress-row-details tbody tr td.row-details-toggle {
		width: auto;
	}

	.tablepress-row-details tbody tr .row-details {
		height: 185px;
	}

	.tablepress-row-details .row-details-toggle div {
	    margin: 0 auto;
	}
    .tablepress-responsive-phone thead th {
        padding: 8px;
    }

    .tablepress-responsive-phone thead .row-1 .column-1 {
        height: 18px;
    }

}
```
This will also center the + icon.

Regards,
Tobias
Thread Starter ossimuso
(@ossimuso)

8 years, 9 months ago

Great, that worked Tobias. Could you also please tell me how to make the header text not bold?
Plugin Author TobiasBg
(@tobiasbg)

8 years, 9 months ago
Hi,

sure, for that, please change
```
.tablepress-responsive-phone thead th {
        padding: 8px;
    }
```
to
```
.tablepress-responsive-phone thead th {
        padding: 8px;
        font-weight: normal;
    }
```
Regards,
Tobias
Thread Starter ossimuso
(@ossimuso)

8 years, 9 months ago

Thanks Tobias. Works perfectly.

Plugin Author TobiasBg
(@tobiasbg)

8 years, 9 months ago

Hi,

great, thanks for the confirmation!

Best wishes,
Tobias

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Row details column alignment’ is closed to new replies.

Tags