Vertical cell alignment when using responsive=flip

Resolved masaq
(@masaq)

9 years, 11 months ago

Hi.

I’m using the responsive plugin in flip mode, so my table header is displayed vertically down the left of my table. I’m also manually setting heights for certain rows, otherwise each column does not line up with the one next to it.

My issue is that the text labels in the header column are vertically aligned to the top of the cell, while the sort buttons are vertically aligned to the middle of the cell.

I would like to be able to top align the sort buttons so they are on the same line as the labels.

Thanks for any help.

https://ww.wp.xz.cn/plugins/tablepress/

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

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 11 months ago
Hi,

thanks for your question, and sorry for the trouble.

Usually, some CSS like
```
.tablepress thead th {
  vertical-align: middle;
}
```
should work just fine here. Can you please try that?

Regards,
Tobias
Thread Starter masaq
(@masaq)

9 years, 11 months ago

Thanks for the response.

Unfortunately it has no effect. I can confirm it’s definitely set after inspecting the table in Chrome.

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 11 months ago

Hi,

Can you then please post a link to the page with the table where this problem happens, so that I can take a direct look? Thanks!

Regards,
Tobias

Thread Starter masaq
(@masaq)

9 years, 11 months ago

Unfortunately I can’t do that yet.

However, it’s possible to replicate the effect on the responsive extension flip table example on the TablePress site – https://tablepress.org/extensions/responsive-tables/

If you inspect one of the flipped th elements and add a ‘height’ property (say 200px), you can see that the label is aligned to the top of the cell, and the arrows to the middle. Adding a vertical-align property has no effect.

Thanks again for helping with this.
Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 11 months ago
Hi,

ok, good idea! I just tried this:
Additionally to setting the height with
```
height: 200px;
```
please also set the line height, with
```
line-height: 200px;
```
Regards,
Tobias
Thread Starter masaq
(@masaq)

9 years, 11 months ago

Ah that’s great, progress!

It works well if the column contains a single line of text, but if there are multiple lines it doesn’t work as well as the lines are spaced very far apart.

Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 11 months ago

Hi,

ah, yeah :-/ Unfortunately, I can’t really think of a way around that at the moment…

Regards,
Tobias

Thread Starter masaq
(@masaq)

9 years, 11 months ago

Perhaps rather than moving the label down to be aligned with the arrows, maybe it’s possible to move the arrows up to be aligned with the label?

I will give it a try later tonight.

Thanks for the help so far!
Plugin Author Tobias Bäthge
(@tobiasbg)

9 years, 11 months ago
Hi,

yes, moving the arrows up should be better then.
You could set
```
top: 10px;
bottom: auto;
```
maybe.

Regards,
Tobias

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

The topic ‘Vertical cell alignment when using responsive=flip’ is closed to new replies.

Tags