While Bulma CSS can be an excellent choice for any project, it can have its own limitations. While the usefulness of Bulma might far outweigh its limitation(s), it can still get frustrating.
We discovered this simple solution while using Bulma for building a RETS application for a client. In this particular case we had to use the application from within WordPress. While there are lots of different ways of serving a RETS web application from inside WordPress, the simple yet effective approach we took is a topic of another post.
So coming back to the issue that we faced was this – we wanted to show a modal which has a Terms & Conditions text and wanted modal appear above navbar on just one particular page. As the application was working pretty fine while using vanilla Bulma, we didn’t want to use Bulma variables. The trade-off was obvious but we went the way we did just for one reason that the requirement wouldn’t repeat anywhere else on that website.
The modal was appearing behind the menu that sat on the navbar and when the user tried to click the window close button, more often than not it resulted in a menu option getting clicked.
A small solution that comprised of 2 steps resolved it for us:-
- We used a high enough
z-indexvalue on theclass="modal". - We wrote the value inline.
So, here is that little yet ‘enough’ solution.
<div class="modal" style="z-index:999999;">
We believe this was a better solution as compared to implementing Bulma variable in this particular scenario. We would be happy to hear your take on it.
