CODEWITHSUNDEEP
htmlcss
SwirX
SwirX

Reputation: 23

The click area of a button is slightly offset after changing its position

So I have a button to play/pause the current playing song. First when I was just testing it, it was working fine. But after changing its position the clickable area got a little offset. I've tried to make the button's height and width a little bigger, added padding, and checked in the inspect page but it didn't seem offset. So here's the HTML:

.playbar {
  background: transparent;
  color: var(--secondarycolor);
  border-radius: 2px;
  border: none;
  position: absolute;
  width: 50vw;
  height: 75px;
  top: 1vh;
  z-index: 1;
}

.playbar>* {
  position: relative;
  background: transparent;
  border: none;
}

.title-name {
  bottom: 2vh;
}

.author-name {
  bottom: 3vh;
}

.duration {
  bottom: 15vh;
  left: 10vw
}

.ppbtn {
  color: var(--secondarycolor);
  font-size: 22px;
  text-align: center;
  left: 22.5vw;
  bottom: 8vh;
  width: 35px;
  height: 35px;
}

.play-forward {
  color: var(--secondarycolor);
  font-size: 22px;
  text-align: center;
  bottom: 8vh;
  left: 22.5vw;
  width: 35px;
  height: 35px;
}

.play-back {
  color: var(--secondarycolor);
  font-size: 22px;
  text-align: center;
  bottom: 8vh;
  left: 22.5vw;
  width: 35px;
  height: 35px;
}
<!-- PlayingInfo -->
<div class="playbar">
  <!-- <img src="" alt=""class="album-img"> -->
  <p class="title-name">placeholder</p>
  <p class="author-name">placeholder</p>
  <audio class='currentplaying' src=""></audio>
  <button class="play-back"><ion-icon name="play-back-outline"></ion-icon></button>
  <button class="ppbtn"><ion-icon name="pause-outline"></ion-icon></button><!--This is the button that have this issue-->
  <button class="play-forward"><ion-icon name="play-forward-outline"></ion-icon></button>
  <p class="duration">0:00</p>
</div>

This is how it was positioned before:


.playbar{
    background: #353535;
    color: var(--secondarycolor);
    border-radius: 2px;
    border: none;
    position: absolute;
    width: 99vw;
    height: 100px;
    z-index: 1;
}
.playbar > *{
    position: relative;
    background: transparent;
    border: none;
}
.title-name{
    bottom: 2vh;
}
.author-name{
    bottom: 3vh;
}
.duration{
    bottom: 15vh;
    left: 10vw
}
.ppbtn{
    color: var(--secondarycolor);
    font-size: 22px;
    text-align: center;
    left: 50vw;
    width: 35px;
    height: 35px;
    cursor: pointer;
}
.play-forward{
    color: var(--secondarycolor);
    font-size: 22px;
    text-align: center;
    left: 50vw;
    width: 35px;
    height: 35px;
}
.play-back{
    color: var(--secondarycolor);
    font-size: 22px;
    text-align: center;
    left: 50vw;
    width: 35px;
    height: 35px;
}

Upvotes: 0

Views: 414

Answers (1)

fnostro
fnostro

Reputation: 4591

Maybe this will help.

I wrapped the buttons inside a new flex div.button-bar so you can position the .button-bar independently from the <button>s.

The clickable areas of the buttons are highlighted in gray with gray border for visibility purposes.

The individual button class names are no longer in use but I left them in as you might still want to override the individual buttons.

:root{
  --secondarycolor: #F00;
}
.playbar {
  background: transparent;
  color: var(--secondarycolor);
  border-radius: 2px;
  border: none;
  position: absolute;
  width: 50vw;
  height: 75px;
  top: 1vh;
  z-index: 1;
}

.playbar>* {
  position: relative;
  background: transparent;
  border: none;
}

.title-name {
  bottom: 2vh;
}

.author-name {
  bottom: 3vh;
}

.duration {
  bottom: 15vh;
  left: 10vw
}

.button-bar {
  display: flex;
  flex-wrap: nowrap;
  bottom: 8vh;
  left: 22.5vw;
}

.button-bar>button {
  font-size: 22px;
  color: var(--secondarycolor);
  padding: 8px;

  background-color: #ddd;
  border: 1px solid #ccc;
}
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

<!-- PlayingInfo -->
<div class="playbar">
  <!-- <img src="" alt=""class="album-img"> -->
  <p class="title-name">placeholder</p>
  <p class="author-name">placeholder</p>
  <audio class='currentplaying' src=""></audio>
  <div class="button-bar">
    <button class="play-back"><ion-icon name="play-back-outline" class="stretched-link"></ion-icon></button>
    <button class="ppbtn"><ion-icon name="pause-outline"></ion-icon></button>
    <!--This is the button that have this issue-->
    <button class="play-forward"><ion-icon name="play-forward-outline"></ion-icon></button>
  </div>
  <p class="duration">0:00</p>
</div>

Upvotes: 1

Related Questions