CODEWITHSUNDEEP
htmlcss
baao
baao

Reputation: 73251

Marvel Device buttons and input in screen not clickable

I'm trying to put a "dialboard" into this device's screen:

See here for a demo

<div class="marvel-device iphone6plus silver">
    <div class="top-bar"></div>
    <div class="sleep"></div>
    <div class="volume"></div>
    <div class="camera"></div>
    <div class="sensor"></div>
    <div class="speaker"></div>

    <div class="screen">
          <div class="inscreen">
                  <input type="text">
                  <button class="btn btn-success screen">sjdaklfjaslkjf</button>
          </div>
    </div>
    <div class="home"></div>
    <div class="bottom-bar"></div>
</div>

The css for the screen is as follows:

.marvel-device .screen {
    width: 100%;
    position: relative;
    height: 100%;
    color: white;
    z-index: 2;
    text-align: center;
    display: block;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 0 0 3px #111;
    box-shadow: 0 0 0 3px #111;
}

.inscreen {
  color: black;
  background: blue;
}

The problem is that the button inside the screen isn't clickable and the input field isn't focusable. Anyone an idea on how to make this work?

I've tried several things with z-Index and so on, but nothing seems to work

Upvotes: 0

Views: 111

Answers (2)

dowomenfart
dowomenfart

Reputation: 2803

Add z-index: 3 to .marvel-device .screen.

JSFIDDLE

.marvel-device .screen {
    width: 100%;
    position: relative;
    height: 100%;
    color: white;
    z-index: 3;
    text-align: center;
    display: block;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 0 0 3px #111;
    box-shadow: 0 0 0 3px #111;
}

The reason why you need to put z-index: 3 is because on .marvel-device.iphone6:after you put z-index: 2, So .marvel-device.iphone6:after is positioning on top of .marvel-device .screen.

Upvotes: 1

quoo
quoo

Reputation: 6307

This is a result of the :after psuedo element on the iphone6plus class of the wrapper. It's z-index is 2 and is interfering with clicks. I'm not quite clear what purpose this after element serves, but removing it or reducing the z-index fixes the issue. Alternatively, you could increase the z-index of the .screen element to a number greater than 2.

Upvotes: 1

Related Questions