Menu
I'm trying to build a web app but I've encountered a problem.
Most of the app's interfaces consist of lots of buttons and I've encountered a queer phenomenon whereby I can't click some of the buttons (there's no clicking animation and the onclick() doesn't run).
I've noticed that where there are multiple buttons stacked on top of each other, only the last line of buttons is clickable.
I have created a minimal, complete and verifiable example.
<html>
<body>
<div style="padding-top: 20%;" id="div1">
<button>
Button 1
</button><br />
<button>
Button 2
</button>
</div>
<script>
document.getElementById("div1").style.display = "initial";
</script>
</body>
</html>Further observations/notes:
When you go to select an element from the developer menu, you can't select the malfunctioning buttons.
I'm using Firefox. I get a similar issue with my app in Chrome but the buttons which misbehave are different to the ones that break in Firefox.
I'm trying to create a single-page web app by hiding and showing various <div> elements (different screens) by setting display: none; and display: initial; respectively. That's the reason for the <script>. Is there a better way I should be doing this?
488
display: initial; is equivalent to display: inline; in your case.
The padding-top is then applied to each line of content, making the second line cover the first line. It is easier to see if you add a background to the containing div.
#div1 {
padding-top: 15px;
display: initial;
background: #f00;
}<div id="div1">
<button>
Button 1
</button>
<br>
<button>
Button 2
</button>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
