Button weirdly not clickable

Question

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?

It's because of the initial style being added. Is there a reason for wanting that? — ComputerLocus
– ComputerLocus, Commented Jul 4, 2019 at 13:29
yes, @ComputerLocus is right. This behavior is because of the style. — Alok Mali
– Alok Mali, Commented Jul 4, 2019 at 13:32
It is because of display inline (initial will default to inline for the display property) in combination with the top padding. — Mark Baijens
– Mark Baijens, Commented Jul 4, 2019 at 13:32
@KoshVery initial set display to inline and not to default browser — Temani Afif
– Temani Afif, Commented Jul 4, 2019 at 13:54
@KoshVery It does not set to the browser/element default value but the specification default value which is inline for the display property. — Mark Baijens
– Mark Baijens, Commented Jul 4, 2019 at 13:55

Bali Balo · Accepted Answer · 2019-07-04 14:04:29Z

8

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>

edited Jul 4, 2019 at 14:04

answered Jul 4, 2019 at 13:40

Bali Balo

3,4181 gold badge20 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Temani Afif Over a year ago

it's no really related to box decoration but to the fact that the height of linebox is only defined by line-height and everything else (padding,border,margin, etc) will simply overflow

Issa Chanzi Over a year ago

I thought the padding was applied to the whole <div> element. How do I make it work that way?

Bali Balo Over a year ago

@TemaniAfif Yes, my bad, I will remove that part of the answer.

Temani Afif Over a year ago

@IssaChanzi any display other than inline (initial)

Bali Balo Over a year ago

@IssaChanzi there are a few ways, the simplest being to use display: inline-block; instead.

Uzair Nadeem · Accepted Answer · 2019-07-04 13:47:09Z

<html> <body> <div style="padding-top: 20%;"> <button> Button 1 </button><br /> <button> Button 2 </button> </div> </body> </html>

Collectives™ on Stack Overflow

Button weirdly not clickable

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related