1

I'm having a sort of conflict between two libraries I'm using, Bootstrap and Mathquill. I'm using bootstrap for the layout, structure, and overall UI of the website, and Mathquill for interactive LaTeX rendering- basically, letting the user type in math in a nice, "textbook style" format.

My problem is that bootstrap seems to conflict with Mathquill, in the rendering of the math. Here is the structure of my page:

HTML

<div id="container">
  <span id="input" class="mathquill-editable"></span>

</div>

CSS

#container {
    padding: 5px;
    width: 80%;
}
#input {
    width: 100%;
    padding: 15px;
    margin: 5px;
}

Without Bootstrap running, the math renders perfectly. Here is a fiddle, and below is a screenshot: without bootstrap

With Bootstrap, I have the same code, except that I add the classes panel and panel-default to div#container. User inputted math, doesn't render well, because the spacing seems to be wrong, and it doesn't respect the boundaries of span#input. Here is a fiddle, and below is a screenshot: with bootstrap

I think the problem here is the bootstrap causes MathQuill's math spans (inside of span#input) to have more padding, thus the problems with MathQuill. Is there a way to let bootstrap ignore the area inside span#input?

Obviously, I could just copy the styling I need from bootstrap and just apply it to the areas I need the styling for, but this would be a hassle considering that I'm using it quite extensively.

Any thoughts?

hkk
  • 2,069
  • 1
  • 23
  • 48
  • Can it simply be that bootstrap applies another font? – angabriel Dec 31 '13 at 06:44
  • @angabriel yes bootstrap does apply it's own font, but mathquill's font, Symbola, does seem to be displayed properly both with and without bootstrap. – hkk Dec 31 '13 at 15:14

5 Answers5

2

This can be corrected by modifying the mathquill-rendered-math class in mathquill.css file.

just add the following.

.mathquill-rendered-math * {
box-sizing: content-box;
top: auto;}
digitalman
  • 131
  • 1
  • 4
1

You could use a iframe for applying the mathematical stylesheet only. I don't think it will cost too much speed to load if you're using MathQuill extensively.

I would do something like this:

<html>
    <head>
        <link href="bootstrap.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <iframe src="math.php#f=2*2"></iframe>
        <iframe src="math.php#f=3*5"></iframe>
    </body>
</html>

And then let math.php output something like this:

<html>
    <head>
        <link href="mathquill.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <script>
            // Generate content dynamically with JavaScript from parameter `f` so the this page can be cached.
        </script>
    </body>
</html>

Another approach would be creating your own custom bootstrap stylesheet. You can download the LESS sourcecode on its website.

Tim
  • 5,521
  • 8
  • 36
  • 69
  • Please elaborate- I'm not sure exactly what you mean by "use an iframe for applying the mathematical stylesheet only" and "creating your own custom bootstrap stylesheet". Could you please give a more specific information, perhaps an example or some links to documentation I should look at? – hkk Dec 30 '13 at 23:38
  • Thanks for clarifying! The `iframe` method is quite an interesting approach, but the problem I have is that I don't have control over the backend, so it won't really work in this situation. Besides, that wouldn't work because mathquill renders the math interactively, as the user types (see [their website](mathquill.com) for a demo ). As for the second approach, I think that I may have to use that if I don't find a better solution. It sounds like a ton of work with little return value, but it may be my only option. Anyway, thanks again for the examples. – hkk Jan 01 '14 at 16:27
  • Well, I'm not sure that the `iframe` solution wouldn't work. But I would certainly avoid it only because of the reason that it wasn't intended to work this way. Besides it could get performance issues if you need the backend (I thought MathQuill is a pure js/css/html solution?). I would recommend creating your custom bootstrap stylesheet, because of the following reasons: It may be your only solution to this problem, you **will** need the to customize it one way or another because you can't use the whole 250kb bootstrap files for a production environment, it is simply too large. – Tim Jan 01 '14 at 17:25
  • 1
    *2nd comment because it would be too long* So I think you should generate only the parts you need (http://getbootstrap.com/customize/) and manually replace the name conventions with prefixes like `bt-`. If you use the LESS source files it will be less work. It will also be a good learning experience diving in to the source of bootstrap, you might need it if you want to change certain parts. Good luck! – Tim Jan 01 '14 at 17:27
1

Thanks @Tim for the great answer, but I found a better solution here. I will wrap the rules in my own class bootstrap-enabled, so that bootstrap's styles only apply where I want them to.

Community
  • 1
  • 1
hkk
  • 2,069
  • 1
  • 23
  • 48
0

What I've done to solve this is find the areas where they conflict and use my custom CSS to override Bootstrap for those elements.

For instance, the powers look bad/go beyond the border because of 

sup {
    top: -0.5em;
}

in Bootstrap. I've reset this to 0 for mathquill elements in my CSS.

You correctly point out that Bootstrap is fiddling with padding, which makes the denominator wrap around. Specifically Bootstrap uses "border-box" rather than the default "content-box" for box-sizing. Setting:

.denominator {
    box-sizing: content-box;
}

fixes this.

This fixes the two problems in your example. I'll update this post as I find more conflicts (and their sources).

user918962
  • 1
  • 1
0

I just solved mathquill + bootstrap conflict by adding css-resetter from this answer into beginning of mathquill.css (change .reset-this to .mathquill-rendered-math *)

Community
  • 1
  • 1
igor
  • 2,746
  • 3
  • 20
  • 24