Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

For long mathjax equations with short viewport horizontal scrollbar will appear #669

Merged
merged 1 commit into from
Mar 12, 2019
Merged

For long mathjax equations with short viewport horizontal scrollbar will appear #669

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions layout/_third-party/math/mathjax.swig
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,15 +33,19 @@
MathJax.Hub.Queue(function() {
var all = MathJax.Hub.getAllJax(), i;
for (i = 0; i < all.length; i += 1) {
all[i].SourceElement().parentNode.className += ' has-jax';
document.getElementById(all[i].inputID + '-Frame').parentNode.className += ' has-jax';
}
});
</script>
<script src="{{ theme.math.mathjax.cdn }}"></script>

<style>
.MathJax_Display {
overflow-x: scroll;
.has-jax {
overflow-x: auto;
overflow-y: hidden;
}

li {
list-style-position: inside !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zq-97 Is this related to Mathjax? All <li> elements in the page are affected

Copy link
Contributor Author

@zq1997 zq1997 Mar 12, 2019 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That is a bug of many browser(chrome, safari, firefox ...), See here.

In short, if you put something with 'overflow' css inside a li element, the leading symbol (dot/circle for unordered or number for ordered) WILL DISAPPERA.

You can have a simple try w/o list-style-position: inside !important; using the flowing content.

- $\alpha$
- $\beta$

Because it is a bug of browser, I didn't found any better solution. You can remove this style if necessary.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This could cause a problem that the start indent of any list looks too long. Please check the behavior of usual list before and after setting "list-style-position: inside".

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue I just closed actually is also caused by it:
#721

}
</style>