When on phone, #iron-router-progress.spinner:before covers half of the .navbar-toggle button

[SylvainBigonneau]

I couldn't get my head around why it was quite hard for me to press my bootstrap's .navbar-toggle button with my big thumb on my phone... turns out, the iron-router-progress spinner covers a big part of it, even when it is not shown.

This is likely due to the z-index property of the spinner, which is set to 10000 (while the navbar is at 1030). But I tried setting the navbar-toggle button's z-index to 10001 and it didn't help... I am not the most gifted when it comes to CSS.

I would understand (and apologize) if this is considered a non-issue, considering that it involves an unrelated package : bootstrap3. Though since bootstrap is a very commonly used one, I figured it might be interesting to make sure the two modules go hand in hand more nicely, for example by making the spinner cover the button only when it is shown?

[Multiply]

If you're not using the spinner at all, go for:

IronRouterProgress.configure({
    spinner : false
});

I suggest adjusting iron-router-progress' CSS, over Bootstrap's, if you really want this. If you position bootstrap over the spinner, you won't be wanting the spinner anyway, am I right?

Either way, you might get better results, simply lowering both #iron-router-progress and #iron-router-progress.spinner's z-indexes

[SylvainBigonneau]

Actually I found a useful CSS property:

#iron-router-progress.spinner:before {
    pointer-events:none;
}

It makes the spinner clickable through.

[Multiply]

It's actually well supported in many browsers. I'll add that in a few moments, if possible. :)

[SylvainBigonneau]

Yes plus, in my case at least, it was only an issue when the site was on a phone display, and mobile browsers have decent enough css compatibility. Thanks for the quick response. :)

[Multiply]

No problem, and thanks for the smart solution!

It possibly should be put on for the progress-bar as well, but it's less annoying, I assume.