Search code examples
csstwitter-bootstrapmathquill

Conflict between bootstrap and mathquill


I'm trying to use mathquill (0.10.1) to display some static latex \sqrt{36} and the square root sign is just a squiggle. I'm using bootstrap (4.0.0-beta.3) and when I place <span class="mq">\sqrt{36}</span> inside some divs of "class container" it exhibits this behaviour. If I put the span outside of these container divs then the presentation works fine.

I've searched for a solution and this seems to be an issue for others but the advice is to change the mathquill-rendered-math class in mathquill.css but this doesn't exist in the version I am using. Any ideas how to fix this?

P.S. I realise there are other ways of presenting mathematical notation but I want to use mathquill's on-the-fly maths notation input at some point too


Solution

  • Fixed it! I had to assign the StaticMath to a variable in javascript (temp = mq.StaticMath($("#mq3")[0]) where mq3 was the id of the span with the latex inside) then use temp.reflow() once that area of the page was visible. As the docs say, mathquill uses computed dimensions so that was the problem as the latex had no dimensions when mathquill did its work.