Page MenuHomePhabricator

There is a problem in displaying the infoboxes on mobile and android application
Open, HighPublic

Description

Hello, there is a problem in displaying the infoboxes on mobile and android application in many languages. I think it's because of some minerva skin styles exactly in :

.content table.infobox td { padding: 7px 10px }
@media screen and (max-width: 720px) {.content table { display: block}}`

in Arabic wikipedia we resolved the problem on Mobile browsers by style( table.infobox td{padding: 2px } and (.infobox table { display: table}) but no result appeared on Android application .

This problem appeared also in other languages exactly in sequence sections:

This is also noted in :

This is Screenshot of Barack Obama article on Arabic Wikipedia in mobile browser and android application: :

I suggest changing the value of the two properties in the Minerva skin for resolve the problem globally (padding to 2px and display to table) thank you.

Event Timeline

Restricted Application added subscribers: Masumrezarock100, Liuxinyu970226, Aklapper. · View Herald Transcript
Omar_Ghrida updated the task description. (Show Details)Jun 7 2020, 11:25 AM
Omar_Ghrida updated the task description. (Show Details)Jun 7 2020, 2:57 PM
Omar_Ghrida updated the task description. (Show Details)Jun 7 2020, 3:10 PM
Omar_Ghrida updated the task description. (Show Details)Jun 7 2020, 3:29 PM
FShbib added a subscriber: FShbib.Jun 7 2020, 6:24 PM
Omar_Ghrida triaged this task as High priority.Jun 7 2020, 9:40 PM
Shadi added a subscriber: Shadi.Jun 8 2020, 6:18 PM
Jdlrobson added a subscriber: Jdlrobson.

in Arabic wikipedia we resolved the problem on Mobile browsers by style( table.infobox td{padding: 2px } and (.infobox table { display: table})

Sounds like the right solution for the mobile site. We encourage editors to address these problems via Extension:TemplateStyles

TheDJ added a subscriber: TheDJ.Jun 9 2020, 7:53 AM

This is in part because the templates use a table inside of a table (infobox). The default CSS doesn't account for that. I also agree that this should be fixed using TemplateStyles on the local wiki.

Omar_Ghrida added a comment.EditedJun 9 2020, 11:36 AM

Sounds like the right solution for the mobile site. We encourage editors to address these problems via Extension:TemplateStyles

Exactly @Jdlrobson , TemplateStyles is excellent solution, but most languages do not use it, How can motivate other languages to use it in infobox ? or for example Is it possible to add style to skin more personalized to solve the problem for those who do not use it:
@media screen and (max-width: 720px) {.infobox table { display: table}}`?. Thank you

This is in part because the templates use a table inside of a table (infobox). The default CSS doesn't account for that. I also agree that this should be fixed using TemplateStyles on the local wiki.

@TheDJ but for example in french wikipedia in (Barack Obama) article here , when resize the window for under 720px, Note that (tbody) element does not extend to the full width although the template don't use a table inside of a table. Thank you for your comment.

@Charlotte What's your priority on this for Android?

@Charlotte What's your priority on this for Android?

I'd certainly like to get this fixed within the next month. From what I can tell by looking at the provided links it doesn't prevent readers entirely from seeing/using the infobox, so it's not an unbreak now status, but usability problems like this shouldn't be allowed to persist.

TheDJ added a comment.EditedJul 3 2020, 8:02 AM

This is in part because the templates use a table inside of a table (infobox). The default CSS doesn't account for that. I also agree that this should be fixed using TemplateStyles on the local wiki.

@TheDJ but for example in french wikipedia in (Barack Obama) article here , when resize the window for under 720px, Note that (tbody) element does not extend to the full width although the template don't use a table inside of a table. Thank you for your comment.

That is because that template doesn't use the infobox class, but infobox_v2, which the skins know nothing about. Technically, it's not an infobox, its something that looks a little bit like an infobox.

There is no straight jacket that works as a general solution when the problem is so multi faceted. The problem is that all this content is years old and designed desktop only and that means it will NEVER be perfectly mobile friendly until someone fixes that specific code. This is the downside to letting every single community do whatever they want. They also need to take responsibility for maintaining and improving such things beyond their own screen.

Specifically, it seems that the fr.wp community is aware that this is required for the software to recognize what an infobox is (aka semantic class, not just styling) and still chose not to fix it. https://fr.wikipedia.org/wiki/Discussion_Projet:Infobox/V3#Ajout_de_la_classe_infobox_en_début_de_class="
So a problem like this is THEIR problem to fix.

MSantos added a subscriber: MSantos.

Moving Template Issues related tasks to the tracking column, please ping us if you think there is anything else that we should act on.