javascripthtmlcsstailwind-cssmathjax
Tailwind mathjax is showing above to the navbar
Sorry to ask a question again as I asked a problem in the morning also.
This time I am facing an issue with Mathjax text. As my navbar is fixed, my texts are going inside the navbar whereas the math expressions are going above the navbar. This is annoying me from today's morning itself.
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"
<div class="flex flex-col h-screen">
<!-- navbar -->
<div class="fixed inset-x-0 left-0 right-0 w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800">
<div x-data="{ open: false }" class="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
<div class="p-4 flex flex-row items-center justify-between"> <a href="#" class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">Sachchidanand Prasad</a>
<button class="md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow pb-4 md:pb-0 hidden md:flex md:justify-end md:flex-row"> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="index.html">
Home
</a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-gray-200 text-gray-900 rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="research.html">
Research
</a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="cv.html">
CV
</a> </nav>
</div>
</div>
<!-- section -->
<section class="text-gray-600 body-font">
<div class="container lg:px-36 py-24 mx-auto">
<div class="flex flex-col items-center text-center justify-center">
<h2 class="text-gray-900 text-3xl title-font font-medium">Research</h2>
<div class="w-24 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
</div>
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div class="p-4 md:w-full flex">
<div class="flex-grow lg:px-32 px-6">
<p class="mt-4 leading-relaxed text-lg text-justify"> My area of interests include <em>differential geometry</em>, <em>differential topology</em> and <em>algebraic topology</em>. More specifically, I am working on <em class="text-green-600">cut locus of a submanifold</em>. For a given Riemannian manifold $M$ and $N\subset M$ the <em class="text-green-600">cut locus of $N$</em>, $\mathrm{Cu}(N)$, is the collection of points $q\in M$ such that extension of a distance minimal geodesic joining $N$ to $q$ is no longer minimal. Here by the <em class="text-green-600">distance minimal geodesic $\gamma$ joining $N$ to $q$</em> we mean that there exists $p\in N$ such that the length of $\gamma$ from $p$ to $q$ is same as the distance from $N$ to $q$. In my recent <a href="#publications" class="text-blue-500 hover:text-blue-800">paper</a> (joint with Dr Somnath Basu) we have discussed the cut locus of a closed submanifold and described the relation between cut locus, Thom spaces and Morse-Bott functions. </p>
<p class="mt-4 leading-relaxed text-lg text-justify"> Currently, I am working on the cut locus of a quotient manifold and application to the classifying spaces. </p>
<p class="mt-4 leading-relaxed text-lg text-justify:"> </p>
<h2 class="mt-4 mb-4 text-gray-900 text-xl title-font font-medium" id="publications">Publications and Preprints</h2>
<ol class="pl-8 list-decimal">
<li class="text-lg"> <em>A connection between cut locus, Thom spaces and Morse-Bott functions</em> (joint with Dr Somnath Basu) <a href="ml-8 https://arxiv.org/abs/2011.02972" target="_blank" class="text-blue-500 hover:text-blue-800">ArXiv link</a>
<div class="mt-2 ml-4 border-l-2 border-indigo-500 hidden md:block xs:hidden">
<p class="pl-2 leading-relaxed text-base text-gray-500 text-justify"> <span class="text-gray-900">Abstract:</span> Associated to every closed, embedded submanifold $N$ in a connected Riemannian manifold $M$, there is the distance function $d_N$ which measures the distance of a point in $M$ from $N$. We analyze the square of this function and show that it is Morse-Bott on the complement of the cut locus $\mathrm{Cu}(N)$ of $N$, provided $M$ is complete. Moreover, the gradient flow lines provide a deformation retraction of $M-\mathrm{Cu}(N)$ to $N$. If $M$ is a closed manifold, then we prove that the Thom space of the normal bundle of $N$ is homeomorphic to $M/\mathrm{N}$. We also discuss several interesting results which are either applications of these or related observations regarding the theory of cut locus. These results include, but are not limited to, a computation of the local homology of singular matrices, a classification of the homotopy type of the cut locus of a homology sphere inside a sphere, a deformation of the indefinite unitary group $U(p,q)$ to $U(p)\times U(q)$ and a geometric deformation of $GL(n,\mathbb{R})$ to $O(n,\mathbb{R})$ which is different from the Gram-Schmidt retraction. </p>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="foot mt-auto border-t border-gray-200">
<div class=" container flex flex-col flex-wrap px-4 py-1 mx-auto md:items-center lg:items-start md:flex-row md:flex-nowrap">
<div class="justify-between w-full mt-4 text-center lg:flex">
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="https://mathscinet.ams.org/mathscinet/" target="_blank">MathSciNet</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://www.ams.org/open-math-notes" target="_blank">AMS open Math Notes</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://mtts.org.in/" target="_blank">MTTS</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://www.atmschools.org/" target="_blank">ATM School</a> </li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="http://www.nbhm.dae.gov.in/" target="_blank">NBHM</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">About Us</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">Blogs</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">Contact Us</a> </li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Social Networks
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="">Facebook</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Twitter</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Instagram</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Github</a> </li>
</ul>
</div>
</div>
</div>
<div class="flex justify-center">
<p class="text-base text-gray-400"> All rights reserved by @ <a class="text-gray-400 hover:text-gray-800" href="index.html">Sachchidanand</a> 2022 </p>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
]
},
svg: {
fontCache: 'global'
}
};
</script>
We can see in the above image that the math text s over the navbar. I don't know what exactly the problem is. Any help will be appreciated.
Solution
Insert the tailwind class z-10 to the navbar container to give the navbar a higher z-Index
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"
<div class="flex flex-col">
<!-- navbar -->
<div class="fixed inset-x-0 left-0 right-0 w-full text-gray-700 bg-white dark-mode:text-gray-200 dark-mode:bg-gray-800 z-10">
<div x-data="{ open: false }" class="flex flex-col max-w-screen-xl px-4 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
<div class="p-4 flex flex-row items-center justify-between"> <a href="#" class="text-lg font-semibold tracking-widest text-gray-900 uppercase rounded-lg dark-mode:text-white focus:outline-none focus:shadow-outline">Sachchidanand Prasad</a>
<button class="md:hidden rounded-lg focus:outline-none focus:shadow-outline" @click="open = !open">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path x-show="!open" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path x-show="open" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<nav :class="{'flex': open, 'hidden': !open}" class="flex-col flex-grow pb-4 md:pb-0 hidden md:flex md:justify-end md:flex-row"> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="index.html">
Home
</a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-gray-200 text-gray-900 rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="research.html">
Research
</a> <a class="px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="cv.html">
CV
</a> </nav>
</div>
</div>
<!-- section -->
<section class="text-gray-600 body-font">
<div class="container lg:px-36 py-24 mx-auto">
<div class="flex flex-col items-center text-center justify-center">
<h2 class="text-gray-900 text-3xl title-font font-medium">Research</h2>
<div class="w-24 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
</div>
<div class="flex flex-wrap sm:-m-4 -mx-4 -mb-10 -mt-4 md:space-y-0 space-y-6">
<div class="p-4 md:w-full flex">
<div class="flex-grow lg:px-32 px-6">
<p class="mt-4 leading-relaxed text-lg text-justify"> My area of interests include <em>differential geometry</em>, <em>differential topology</em> and <em>algebraic topology</em>. More specifically, I am working on <em class="text-green-600">cut locus of a submanifold</em>. For a given Riemannian manifold $M$ and $N\subset M$ the <em class="text-green-600">cut locus of $N$</em>, $\mathrm{Cu}(N)$, is the collection of points $q\in M$ such that extension of a distance minimal geodesic joining $N$ to $q$ is no longer minimal. Here by the <em class="text-green-600">distance minimal geodesic $\gamma$ joining $N$ to $q$</em> we mean that there exists $p\in N$ such that the length of $\gamma$ from $p$ to $q$ is same as the distance from $N$ to $q$. In my recent <a href="#publications" class="text-blue-500 hover:text-blue-800">paper</a> (joint with Dr Somnath Basu) we have discussed the cut locus of a closed submanifold and described the relation between cut locus, Thom spaces and Morse-Bott functions. </p>
<p class="mt-4 leading-relaxed text-lg text-justify"> Currently, I am working on the cut locus of a quotient manifold and application to the classifying spaces. </p>
<p class="mt-4 leading-relaxed text-lg text-justify:"> </p>
<h2 class="mt-4 mb-4 text-gray-900 text-xl title-font font-medium" id="publications">Publications and Preprints</h2>
<ol class="pl-8 list-decimal">
<li class="text-lg"> <em>A connection between cut locus, Thom spaces and Morse-Bott functions</em> (joint with Dr Somnath Basu) <a href="ml-8 https://arxiv.org/abs/2011.02972" target="_blank" class="text-blue-500 hover:text-blue-800">ArXiv link</a>
<div class="mt-2 ml-4 border-l-2 border-indigo-500 hidden md:block xs:hidden">
<p class="pl-2 leading-relaxed text-base text-gray-500 text-justify"> <span class="text-gray-900">Abstract:</span> Associated to every closed, embedded submanifold $N$ in a connected Riemannian manifold $M$, there is the distance function $d_N$ which measures the distance of a point in $M$ from $N$. We analyze the square of this function and show that it is Morse-Bott on the complement of the cut locus $\mathrm{Cu}(N)$ of $N$, provided $M$ is complete. Moreover, the gradient flow lines provide a deformation retraction of $M-\mathrm{Cu}(N)$ to $N$. If $M$ is a closed manifold, then we prove that the Thom space of the normal bundle of $N$ is homeomorphic to $M/\mathrm{N}$. We also discuss several interesting results which are either applications of these or related observations regarding the theory of cut locus. These results include, but are not limited to, a computation of the local homology of singular matrices, a classification of the homotopy type of the cut locus of a homology sphere inside a sphere, a deformation of the indefinite unitary group $U(p,q)$ to $U(p)\times U(q)$ and a geometric deformation of $GL(n,\mathbb{R})$ to $O(n,\mathbb{R})$ which is different from the Gram-Schmidt retraction. </p>
</div>
</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- footer -->
<footer class="foot mt-auto border-t border-gray-200">
<div class=" container flex flex-col flex-wrap px-4 py-1 mx-auto md:items-center lg:items-start md:flex-row md:flex-nowrap">
<div class="justify-between w-full mt-4 text-center lg:flex">
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="https://mathscinet.ams.org/mathscinet/" target="_blank">MathSciNet</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://www.ams.org/open-math-notes" target="_blank">AMS open Math Notes</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://mtts.org.in/" target="_blank">MTTS</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="https://www.atmschools.org/" target="_blank">ATM School</a> </li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Useful Links
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="http://www.nbhm.dae.gov.in/" target="_blank">NBHM</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">About Us</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">Blogs</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800">Contact Us</a> </li>
</ul>
</div>
<div class="w-full px-4 lg:w-1/3 md:w-1/2">
<h2 class="mb-2 font-bold tracking-widest text-gray-900">
Social Networks
</h2>
<ul class="mb-8 space-y-2 text-sm list-none">
<li> <a class="text-gray-600 hover:text-gray-800" href="">Facebook</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Twitter</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Instagram</a> </li>
<li> <a class="text-gray-600 hover:text-gray-800" href="">Github</a> </li>
</ul>
</div>
</div>
</div>
<div class="flex justify-center">
<p class="text-base text-gray-400"> All rights reserved by @ <a class="text-gray-400 hover:text-gray-800" href="index.html">Sachchidanand</a> 2022 </p>
</div>
</footer>
</div>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
MathJax = {
tex: {
inlineMath: [
['$', '$'],
['\\(', '\\)']
],
displayMath: [
['$$', '$$'],
['\\[', '\\]']
]
},
svg: {
fontCache: 'global'
}
};
</script>- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices