Especially in the administration area, large tables can appear. This may also mean that table cells have several lines in some rows.
Currently, Gin middle-valigns table cell contents, which makes such tables hard to read.
Open an administration page which shows a table, for example created by theme_table:
[
'#theme' => 'table',
'#header' => $header,
'#rows' => $rows,
'#empty' => $empty,
[...]
];
with large contents in at least one cell. It's hard to read.
Set
td, th {
vertical-align: top;
}by default in Claro, as it's an Admin Theme, which should be able to handle such administrative UI elements like tables as well as possible.
- Discuss
- Implement
- Find possible conflicts (Views?)
- Test
- Release
Table contents are vertical-aligned top by default in Claro.
Before:
After:
None
None
| Comment | File | Size | Author |
|---|---|---|---|
| #15 | 2.2 View add field after.png | 41.39 KB | ressa |
| #15 | 2.1 View add field before.png | 34.78 KB | ressa |
| #15 | 1.2 View table after.png | 46.99 KB | ressa |
| #15 | 1.1 View table before.png | 47.13 KB | ressa |
| #8 | after.png | 178.4 KB | scott_euser |
Show commandsStart within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
changes, plain diff MR !9879
Comments
Comment #2
ravi kant commented@Anybody
I try to find issue. Is this issue with default setup. I am looking on default setup of Drupal 10.2.0.
Please provide screenshot also.
Comment #3
saschaeggi@Anybody seems like a good candidate to move to Core as we can change the default for this in Claro. (it's not defined by Gin).
Would you mind either moving this issue or creating a new one in the core issue queue?
Comment #4
anybodyThanks @saschaeggi! I agree! Moved to Drupal Core - Claro theme!
Fixing this, it might also make sense to take a general look at the default table styling (align, border, ... ) to fit the general Claro look.
Comment #5
anybodyComment #8
scott_euser commentedCreated an MR (probably my CSS is wrong, I don't do front-end much so I haven't set up linter to match core).
Before and after added to issue summary. The issue becomes obvious when cell contents are vastly different from each other like in this example.
Comment #9
scott_euser commentedOkay figured out how to run the linter, sorry for noise. Anyways ready for review.
Comment #10
thomas.frobieterPerfect, looks good!
Comment #14
nod_Committed and pushed a11036104f to 11.x and a3941f583e to 11.1.x. Thanks!
Comment #15
ressaI understand the thought behind this change, but it has unintended consequences all over the place, as I see it ... For example in the Token module modal, but also in Views, where the lines now are not aligned beautifully, but pushed to the top in tables and the Views UI.
Also, why do we need to update the
thin the first place?Drupal 11 - A Views table and Views interface adding a field
Table, before and after
Before, looks great
After, header and lines at the top
Views UI -- adding a field, before and after
Before, headers and lines are centered vertically, looking great
After, headers and lines are pushed to the top
Contrib modules, for example Token modal is also affected
See also this MP4 file: overlap.mp4
I think this needs to be rolled back, and given some more thought ...
Comment #18
nod_you're right, reverted
Comment #19
anybodyThanks for the feedback @ressa and sorry I didn't see that before!
Now the question is, are there any better ideas or CSS options to improve this?
I think we'll need to discuss this again in general... mhm, sad.
Comment #20
scott_euser commentedWonder if we can make it a configuration option in Views table display plugin? So opt-in?
Comment #21
nod_we can fix the uis where this makes sense, like the cell for tabledrag, the translation table, etc. not a by defa,ult thing
Comment #22
ressaNo problem @anybody, it's only natural that sometimes some things happen elsewhere, when you improve Drupal :)
And thanks for a fast reversion @nod_.
Maybe the title could be updated, and refined afterwards? (I also thought about "Allow table cell content to stay at the top, as tall cells on same row").
Comment #23
saurav-drupal-dev commentedplease correct me if i am on wrong direction as far i understood to fix the alignment how about using padding or transparent border to align it in middle.
Comment #24
saurav-drupal-dev commentedplease correct me if i am on wrong direction as far i understood to fix the alignment how about using padding or transparent border to align it in middle.