[4.0] All backend lists use center-aligned fields

[nikosdion]

Steps to reproduce the issue

Open any backend list where it's critical that the user understands its nested structure such as Menus, User Groups or Categories

Expected result

The Title field is left aligned, giving an intuitive overview of the nested structure of the listed information.

Actual result

Everything is centre-aligned, making the structure not obvious to new users and a read headache for us experienced users.

System information (as much as possible)

Not relevant to this issue.

Additional comments

The Title field – the one and only field that's centre-aligned – is also the one that needs to be immediately scannable on a long list by the person using the site. Centre alignment makes it really hard to do that.

I tried to see if this is reported before but I could not find any open issue about this.

[brianteeman]

Must be a very recent change that caused this

[nikosdion]

Nope, this is actually as old as the file in the repository is. The title column is rendered everywhere as a <th> which is centre-aligned by Bootstrap. Centre-alignment of TH elements has been a thing in Bootstrap since at least Boostrap 2. This should really be a <td> which fixes the table structure and display.

[brianteeman]

Are we talking about the same thing?

[brianteeman]

This should really be a which fixes the table structure and display.

That would be incorrect for accessibility reasons and others because the title is the header for the row in a horizontal direction

[nikosdion]

We are talking about the same thing. I am using the latest Joomla 4 development branch.

[nikosdion]

This is what I see

[brianteeman]

Don't know what to say @nikosdion I dont see that on the latest branch as of 5 minutes ago

[nikosdion]

I can tell you why. I am using Safari. You are using Chrome or Firefox. The template.min.css defines text-align: inherit for <th> elements. Safari uses centred text for <th> elements. Other browsers use left aligned text. Here's the important thing. Safari is the ONLY rendering engine on iOS. So that is something that definitely needs fixing. It's not just me, it's everyone using Safari.

Can we please not be the victims of browser monoculture? We've tried that 20 years ago, it sucked.

[infograf768]

I confirm this happens with Safari, not with Firefox (Macintosh)

[brianteeman]

Can you tell me how the alignment is on this page

https://getbootstrap.com/docs/4.4/content/tables/

[infograf768]

when we have <th scope="col"> it is aligned left (in LTR)

[brianteeman]

It seems that the problem is upstream in bootstrap with a recent change to their resets. They have acknowledged and fixed it. twbs/bootstrap#30323

[nikosdion]

The content on https://getbootstrap.com/docs/4.4/content/tables/ looks correct:

As @infograf768 said, if we were to correctly use <th scope="col"> the alignment would also be correct. Reading https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th it says that if not specified it reverts to auto which as far as I can tell lets the browser decide. I guess Safari makes the wrong guess. Also note that the Bootstrap doc page you linked does use explicit scope. Joomla doesn't.

I guess we should really be adding scope to TH elements if they're outside a THEAD. A THEAD readily implies that its TH elements are scoped to the column but a TH in a TBODY row could be anything. If the reason for using TH instead of TD is accessibility we should be explicit and be sure instead of implicit and hope for the best. Right? This is a serious question; I am trying to improve accessibility on my own stuff as well.

[brianteeman]

We are using th scope=col and th scope=col everywhere - or at least we should be as I added it. The only place I am aware of that I didnt already check was your webauthn plugin

As I stated it is a bug in bootstrap which they have fixed on their site but the fix hasnt been released yet.

@wilsonge do we need to manually apply that fix?

[nikosdion]

@brianteeman I've never used a TH inside a TBODY by my own accord, so... 🤷

[brianteeman]

Took me a while to get my head around it as well - but it is definitely correct

[nikosdion]

Yeah, I thought I knew how tables work but I read the MDN page only today. I now understand the use case – and why scope is important when the TH is not inside a THEAD. Definitely noted for future reference and use.

[Quy]

Fixed in PR #28921

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/28904.}