Strange CSS position right:0 issue

Question

I have the following code that works for the most part. However not always. I have fiddled with it quite a lot to try get it working with no avail. the issue seems to be intermittent however it definitely reproducible.

What this code tries to do is reposition the .menu div to the right or left of the item depending on where in the viewport it is. If the item's right edge is past the halfway mark it changes the side of the .menu div.

However, after re-positioning the window a few times and selecting an item that is on the right side it seems that sometimes the CSS doesn't work immediately and it positions the element on the left.

Is my code doing something wrong or has someone else seen this issue before? Does anyone know how to fix it? You can see, by the console values, that right is greater than the width, however, the element is still positioned wrong.

I also checked with an alert() and it's definitely going into the if at the right point...

 $(document).ready(function() { $(document).on("click", ".item", function(event) { var widthCenter = window.innerWidth / 2; var rightPos = $(this)[0].getBoundingClientRect().right; console.log("width center:", widthCenter); console.log("right", rightPos); if (rightPos > widthCenter) $(this).children(".menu").css("right", "0", "!important"); else $(this).children(".menu").css("left", "0", "!important"); var showingMenu = false; if ($(this).children(".menu").is(':visible')) showingMenu = true; $(".menu").hide(); if (showingMenu) $(this).children(".menu").hide(); else $(this).children(".menu").show(); }); }); 

 .container1 { display: flex; flex-direction: row; flex-wrap: wrap; border-width: 1px; border-style: solid; } .item { position: relative; width: 60px; height: 40px; border-width: 1px; border-style: solid; margin: 20px; } .menu { display: none; position: absolute; width: 100px; height: 100px; background-color: blue; top: 100%; margin: 0; padding: 0; z-index: 100; border-width: 1px; border-style: solid; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container1"> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> </div> 

Answer 1

You're not removing the css, so after a couple of show/close/resize/show iterations, it has both left:0!important and right:0!important so (I guess) it picks one as the most important, probably the first that was applied.

You can get around this by adding/removing classes rather than manipulating the css directly (it's reasier to remove a class):

add some css:

.left { left:0!important }
.right { right:0!important }

and toggle the classes:

    if (rightPos > widthCenter)
      $(this).children(".menu").addClass("right").removeClass("left");
    else
      $(this).children(".menu").addClass("left").removeClass("right");

 $(document).ready(function() { $(document).on("click", ".item", function(event) { var widthCenter = window.innerWidth / 2; var rightPos = $(this)[0].getBoundingClientRect().right; console.log("width center:", widthCenter); console.log("right", rightPos); if (rightPos > widthCenter) $(this).children(".menu").addClass("right").removeClass("left"); else $(this).children(".menu").addClass("left").removeClass("right"); var showingMenu = false; if ($(this).children(".menu").is(':visible')) showingMenu = true; $(".menu").hide(); if (showingMenu) $(this).children(".menu").hide(); else $(this).children(".menu").show(); }); }); 

 .container1 { display: flex; flex-direction: row; flex-wrap: wrap; border-width: 1px; border-style: solid; } .item { position: relative; width: 60px; height: 40px; border-width: 1px; border-style: solid; margin: 20px; } .menu { display: none; position: absolute; width: 100px; height: 100px; background-color: blue; top: 100%; margin: 0; padding: 0; z-index: 100; border-width: 1px; border-style: solid; } .left { left:0!important } .right { right:0!important } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container1"> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> <span class="item">item<div class="menu"></div></span> </div>