# vertical scroll bars on display katex

**URL:** <https://talk.observablehq.com/t/vertical-scroll-bars-on-display-katex/2304>\
**Category:** Feedback\
**Created:** [August 22, 2019, 10:14pm UTC](https://talk.observablehq.com/t/vertical-scroll-bars-on-display-katex/2304 "2019-08-22T22:14:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [August 22, 2019, 10:14pm UTC](https://talk.observablehq.com/t/vertical-scroll-bars-on-display-katex/2304/1 "2019-08-22T22:14:58Z")

</div>

I noticed that some recent change has added a bunch of vertical overflow scrollbars to katex in notebooks where they didn’t show up before.

Are those intended, or a bug? I could e.g. try to add some vertical whitespace in my latex code to make them go away.

They seem to show up in both Firefox and Chrome here.

[Example](https://observablehq.com/@jrus/jzazbz):

 ![37%20PM](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/d/d5090e11d4ee50fbf87c9b203f3311fd2f1c94a8.png)

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [August 22, 2019, 10:34pm UTC](https://talk.observablehq.com/t/vertical-scroll-bars-on-display-katex/2304/2 "2019-08-22T22:34:59Z")

</div>

This is my fault. I’m trying to allow horizontal scrolling when tex.block is too wide, so I added overflow-x: auto. But I don’t want overflow-y, so I’m not sure yet what’s going wrong here. My apologies. I’ll try to fix my solution (or revert it).

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [August 22, 2019, 11:18pm UTC](https://talk.observablehq.com/t/vertical-scroll-bars-on-display-katex/2304/3 "2019-08-22T23:18:26Z")

</div>

I have reverted this change and the fix should be live in a few minutes. I’d still like to enable horizontal scrolling for wide tex.block’s, but it looks like it won’t be possible with simple CSS. Suggestions welcome.

---

<div class="post-metadata">

**Author:** ![jrus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jrus/32/586_2.png) [@jrus](https://talk.observablehq.com/u/jrus)\
**Post date:** [August 23, 2019, 1:28am UTC](https://talk.observablehq.com/t/vertical-scroll-bars-on-display-katex/2304/4 "2019-08-23T01:28:55Z")

</div>

No worries. When I looked before it didn’t look like the KaTeX people had any especially good ideas for making KaTeX-rendered display math more mobile-friendly.

Personally I don’t much like the horizontal scrollbar solution on websites where I have seen it used, but it _is_ better than just overflowing off the right side with no ability to see chopped-off content at all.

Personally my preference on mobile for equations is for them to be just shrunk so that they fit on the page, but with the mobile browsers’ ability to zoom not disabled, so any equation that is illegibly small can be expanded.

I added a function for this [@jrus/misc#responsive\_katex](https://observablehq.com/@jrus/misc#responsive_katex) which can be seen in use at [https://observablehq.com/d/fb4d519e95cdbd83](https://observablehq.com/d/fb4d519e95cdbd83)

It might not be easy to do this in an automatic way that doesn’t break anything else / stomp on other authors’ preferences though.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 23, 2019, 7:16am UTC](https://talk.observablehq.com/t/vertical-scroll-bars-on-display-katex/2304/5 "2019-08-23T07:16:24Z")

</div>

> [@mbostock](#):
>
> Suggestions welcome.

Replacing `margin: 1em 0` with `padding: 1em 0` for `.katex-display` might work. Basically the element content must not extent past the parent boundaries.
