Muzzleeeehso
Muzzleeeehso

Reputation: 13

Positioned element moves down on-click?

I have an absolute positioned div and a button that toggles a transform on-click using jQuery. However, the div moves down when the button is clicked which I do not want it to do, and I can't seem to find what's causing it, because this previously worked fine where the positioned element did not move when being toggled.

The problem can be solved by removing the top and left CSS properties, but then the div won't display where I'd like it to.

View the example on JSFiddle.

$('table').hide();
$('button').click(function() {
  $(this).siblings('table').toggle('show');
});
// TOGGLE ICON TRANSITION
$(function() {
  var icon = $('.dd-arrow');
  var button = $('.view-products');
  button.on('click', function() {
    $(this).closest('div').find('.dd-arrow').toggleClass('active').css('display', 'block');
    $(this).siblings('img').fadeToggle('fast');
  });
});
.prices {
  position: relative;
  display: inline-block;
}

.prices .dd-arrow {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all .5s ease-in-out 0s;
}

.prices .dd-arrow img {
  width: 20px;
}

.prices .dd-arrow.active {
  transform: rotate(360deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="prices">
  <button class="view-products" onclick="swapText()">View Products:</button>
  <div class="dd-arrow"><img src="img/drop-down-arrow.svg" /></div>
  <table>
    <th>number</th>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

Upvotes: 0

Views: 2311

Answers (2)

dekts
dekts

Reputation: 820

Please check if it is useful. thanks.

$('table').hide();
$('button').click(function () {
  $(this).siblings('table').toggle('show');
});
// TOGGLE ICON TRANSITION
$(function () {
  var icon = $('.dd-arrow');
  var button = $('.view-products');
  button.on('click', function () {
    $(this).closest('div').find('.dd-arrow').toggleClass('active').css('display', 'block');
    $(this).siblings('img').fadeToggle('fast');
  });
});
    .prices {
        position: relative;
        display: inline-block;

        .dd-arrow {
            position: absolute;
            top: 0%;
            left: 0%;
            margin-left: 130px;
            margin-top: 30px;
            transition: all .5s ease-in-out 0s;
            img {
                width: 50px;
            }
        }
        .dd-arrow.active {
            transform: rotate(360deg);
        }

}
<div class="prices">
  <button class="view-products" onclick="swapText()">View Products:</button>
  <div class="dd-arrow"><img src="https://cdn.pixabay.com/photo/2017/04/06/16/57/auto-2208807_960_720.png"/></div>            
  <table>
    <th>number</th>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
</div>

Upvotes: 1

abraham63
abraham63

Reputation: 443

there is some informations : You place your div with percentage. So it's percentage of the parent div. In your cas the parent div is <div class="prices">. The problem is that this div size increase when you click on the button due to the table show. So the height is bigger and 50% is lower in the page than in the beginning.

There is a working solution :

    .prices {
    position: relative;
    display: inline-block;

    .dd-arrow {
        position: absolute;
        left: 50%;
        transition: all .5s ease-in-out 0s;
        img {
            width: 20px;
        }
    }
    .dd-arrow.active {
        transform: rotate(360deg);
    }

}

Upvotes: 0

Related Questions