CODEWITHSUNDEEP
htmltwitter-bootstrap-3
user2471214
user2471214

Reputation: 749

buttons inside carousel-inner not clickable

I am using this bootstrap3 template and I have noticed that any button inside the carousel of the first sliding block like:

<a class="btn btn-success btn-lg" href="#" title="">Sign up now!</a>

is not clickable unless you click on a small area in the button which is on the left border. I am not sure what's happening here, the Event Listeners are registered correctly from the code and can't really find the issue. Maybe is some weird styling bug?

Any help much appreciated!

Upvotes: 3

Views: 2445

Answers (2)

Devin B.
Devin B.

Reputation: 453

For me, it was because for my div.carousel-item selector I had z-index of -1. Removed this line and buttons started working fine.

Upvotes: 0

Dan
Dan

Reputation: 9488

The button is being covered by the <ol class="carousel-indicators"> as you can see here:

Button being covered by HTML element

Only the left portion, which is not covered by that element is clickable. To fix this edit your CSS, change the width on #carousel-example-generic1 .carousel-indicators from 30% to 10%.

Upvotes: 3

Related Questions