Why is there a grey box floating in the upper-left corner of my image and why is code only resizing the grey box and not the image itself?

I'm embedding some javascript into my Showit website. It is a drag and drop feature to portray a collage/mood board effect. The code is working great, but I'm having trouble resizing the images.

There is a grey box in the upper left corner of the image that is taking on any code changes. For example, right now the width/height is set to 0px, so the grey box is a tiny dot. If I increase it to 50px, it gets larger but the image stays the same size.

I'm assuming there needs to be some parent code adjustments but I'm still fresh with javascript. I'm sharing links below to hopefully help.

Thanks so much in advance!

Here's a link to the code in action https://denofdreamers.w3spaces.com/saved-from-Tryit-2022-01-15.html

And here is a link to the code so far https://www.codepile.net/pile/bOVJbwOm

Solution 1:

The issue you mentioned happens because you set the width and height of the frame to 0px. I disabled the classes used via jquery.ui to place a frame on the <img> element and added a border on the <img> element.

$(function() {
  $( "#draggable1" ).draggable();
  $( "#draggable2" ).draggable();
  $( "#draggable3" ).draggable();
});

* {
  margin: 0px;
  padding: 0px;
}

.container {
  display: flex;
  flex-wrap: no-wrap;
}

.draggableImage{
  padding: 5px;
  border: 5px solid #EEE;
  width: 50%;
}

.draggableContainer{
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="container">
  <div id="draggable1" class="draggableContainer">
    <p>
      <img class="draggableImage" src="https://static.showit.co/file/sJcRsatKTmC2WnNTV_hJVA/118367/screen_shot_2022-01-15_at_12_07_17_pm.png">
    </p>
  </div>

  <div id="draggable2" class="draggableContainer">
    <p>
      <img class="draggableImage" src="https://static.showit.co/file/_rojEJb2QBytWaRmzMySCg/118367/screen_shot_2022-01-15_at_12_06_58_pm.png">
    </p>
  </div>
  
  <div id="draggable3" class="draggableContainer">
    <p>
      <img class="draggableImage" src="https://static.showit.co/file/_rojEJb2QBytWaRmzMySCg/118367/screen_shot_2022-01-15_at_12_06_58_pm.png">
    </p>
  </div>
</div>

Why is there a grey box floating in the upper-left corner of my image and why is code only resizing the grey box and not the image itself?

Solution 1:

Related

Recent Posts