Fix the horizontal overflow of the math formulas
Closed, ResolvedPublic

Description

If someone writes a long formula you can see that on devices with smaller viewports (sometimes also on pc) the css is broken.
The fact is that there is no horizontal overflow of the formula. What is need to be done is find the html element that contains the svg formula and add a simple css rule like 'overflow-x: auto'.

The problem with this is that the element that need need to be styled is a simple <div>, without id or class, so there is no way to style it avoiding javascript.
We have a structure like

<div>
<div class="mwe-math-mathml-display mwe-math-mathml-a11y" style="display: none;">
<math display="block" xmlns="http://www.w3.org/1998/Math/MathML">
</math>
</div>
...
</div>

It would be great to know if we can add a class to these elements using or writing an extension. I don't know if this is manageable

grigoletti updated the task description. (Show Details)
grigoletti raised the priority of this task from to Normal.
grigoletti claimed this task.
grigoletti added a project: WikiToLearn.
grigoletti moved this task to CSS & layout on the WikiToLearn board.
grigoletti added subscribers: grigoletti, russellg.
russellg closed this task as Resolved.Jan 24 2016, 9:12 PM

This should be resolved, as of https://git.io/vzKqs and https://git.io/vzKGj