CODEWITHSUNDEEP
javascripthtmlcsspositiondisplay
Ryan Callahan
Ryan Callahan

Reputation: 115

CSS add div to dom positioned relative to parent without other content jumping

I'm trying to make a short pop up in my web app for when a user clicks on a code to copy it. The trouble I'm having is trying to figure out to make it not shift everything in the parent div.

The gif below is what currently happens after all my attempts and googling of trying to solve this problem. What I'm trying to get to happen is have that copied message bubble just appear to the top right of the span with the room code.

current interaction

This fiddle is a stripped down version of the interaction. I've tried all the different display and positionings and I'm not really sure where to go from here. Thanks in advance to everyone.

https://jsfiddle.net/k6ey1duc/36/

.container {
  background-color: #008afa;
  width: fit-content;
  margin: auto;
  padding: 20px
}

.text {
  display: inline;
}

.pop-up {
  display: none;
  background-color: #fe0c0d;
}

#show-hide {
  display: block;
  margin: auto;
}
<body>
  <script>
    $(document).ready(function() {

      var x = false;
      $('#show-hide').on('click', function() {
        if (!x) {
          $("#pop-up").css({
            "backgroundColor": "#fe0c0d",
            "display": "inline"
          });
          x = true;
        } else {
          $("#pop-up").hide();
          x = false;
        }
      });


    });

  </script>
  <div class='container'>
    <p class='text'>
      Hello there! <span>Here is a span.</span>
    </p>
    <div id='pop-up' class='pop-up'>
      Here is a pop-up
    </div>
    <button id='show-hide'>
      Click for pop up
    </button>
  </div>
</body>

Upvotes: 0

Views: 187

Answers (2)

saulmaldonado
saulmaldonado

Reputation: 756

Adding position: absolute; to .pop-up will prevent the container from making any space for the element which is what you are trying to prevent. Additionally, adding position: relative; to .container will give you freedom to position .pop-up anywhere relative to the container.

Another solution is replacing the display: none; display: inline; with visibility: visible; visibility: hidden;. The main difference between these two is that display will remove the entire element from the layout whereas visibility will only hide the element but retain the elements space. This will solve the resizing container problem but will not give you the advantages of stacking and positioning that position: absolute does.

.container {
  position: relative;
  background-color: #008afa;
  width: fit-content;
  margin: auto;
  padding: 20px
}

.pop-up {
  position: absolute;
  display: none;
  background-color: #fe0c0d;
}

Upvotes: 1

Gnanavel
Gnanavel

Reputation: 665

Use position:relative and postion:absolute.

.container {
    background-color: #008afa;
    width: fit-content;
    margin: auto;
    padding: 20px;
    position: relative;
}
.pop-up {
    display: none;
    background-color: #fe0c0d;
    position: absolute;
    left:100%;
    width:inherit;
}

Upvotes: 1

Related Questions