9

On Astronomy, I just encountered an answer to this question which completely overflows the answer/question column of the site:

table with MathJax

I'm not sure whether there actually is a good solution to this - but SE could use the full screen width instead of 1/3 in the middle when it is available, at least in cases like this where it actually is needed. The full width is available here; note the large amount of white left and some on the right where it overflowed into:

Enter image description here

11
  • 3
    At least for the example you've provided, the following CSS will resolve the issue: .MathJax_Preview + span.MathJax {display: block; overflow: auto;}. I haven't investigated further than the example page you linked, so the CSS here may not be sufficient for other instances.
    – Makyen
    Commented Aug 26, 2022 at 21:28
  • I'm pretty sure this is a duplicate, but I can't find it. You can do some really weird things with these MathJax bugs, including covering up the downvote button so no one can downvote posts, so it can certainly be exploited to do undesired things. Commented Aug 27, 2022 at 0:16
  • 5
    Weird, this is status-completed: Add a horizontal scrollbar to MathJax formula blocks
    – Laurel
    Commented Aug 27, 2022 at 0:30
  • @Laurel they're making massive changes in JS all over the place, won't be a surprise if it also overwrites patches made to fix bugs. Hopefully it's easy for them to patch it back. :) Commented Aug 27, 2022 at 6:14
  • I confirmed the problematic answer overflows the right side for me, as the OP has shown. I copied & pasted the text into an available answer in Math meta's Sandbox for drafts of long, complex posts, with the preview also showing the table overflowing. The basic cause is using the inline MathJax format, i.e., of the form $inline$, rather than the display format, i.e., of the form $$display$$, for the MathJax table. After changing this, the preview and, more importantly, the final display show properly, i.e., use a horizontal scroll bar. Commented Aug 27, 2022 at 7:55
  • On my phone, the table runs off to the side, but at least it doesn't overlap anything.
    – PM 2Ring
    Commented Aug 27, 2022 at 10:02
  • 2
    Somewhat similar question on Mathematics Meta: How to make the table fit better? And perhaps this questions on Robotics Meta can be considered related, too: Out of question body area bound MathJax-ed matrices
    – Martin
    Commented Aug 27, 2022 at 22:37
  • @Makyen How are you so good at CSS! ;) Btw, is that a CSS rule that has to be added?
    – DialFrost
    Commented Aug 30, 2022 at 10:03
  • 1
    @JohnOmielan Thanks for the link to that sandbox. Testing there indicates that the CSS I posted above needs modification in order to to not disrupt other inline uses of MathJax (a CSS only solution may not be possible). I agree that the underlying cause is the user's error in using the inline MathJax when the display format was needed. It's unclear to me if SE should compensate for that or display an error for the user to correct. Overall, there's no full fix for the possibility of overflow other than constraining the entire post, which SE has, historically, been reluctant to do.
    – Makyen
    Commented Sep 10, 2022 at 21:13
  • 1
    Testing with the sandbox post linked above shows the CSS I provided above causes issues. The following works without disrupting the inline examples I've seen, but, again, this isn't a full solution. A full solution would look at the what possible HTML could be produced and either adjust that HTML or add CSS which covers all possibilities. To correct what I've seen so far, the following CSS works: p > .MathJax_Preview:first-child + span.MathJax[data-mathml*=mtable] {overflow: auto; display: inline-block; max-width: 100%; vertical-align: bottom;}
    – Makyen
    Commented Sep 10, 2022 at 21:13
  • 1
    @DialFrost Yes, the CSS I've most recently provided is something which can be added to the page that will result in the pages/examples I've seen being displayed appropriately. However, as I mention above, it's not necessarily a full solution. To really get to the point of actually solving this would need to look at what possible HTML can be produced, rather than just the few examples I've looked at. Basically, having the above CSS makes things better, but doesn't, necessarily, truly resolve things.
    – Makyen
    Commented Sep 10, 2022 at 21:16

0

You must log in to answer this question.

Browse other questions tagged .