Dealing with intrinsic width and height for a modeless window

[CMCDragonkai]

I have a modeless window that is draggable and resizable.

I used react-draggable for the draggability and this re-resizable for the resizing.

The difference between a modal and modeless window is that the modeless window doesn't block interaction with the background UI.

So I create an component structure like this:

<Draggable>
  <DraggableDiv>
    <Resizable>
      <div>
      </div>
    </Resizable>
  </DraggableDiv>
</Draggable>

The DraggableDiv has this css:

  position: fixed;
  height: max-content;
  width: max-content;
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

This is intended so the modeless window stays in the middle of the viewport and is also launched in the middle of the viewport. At the same time in order to be modeless, we need its width and height to be based on intrinsic width and height, so that the width/height of the draggable window is actually sized to its contents.

The Resizable component now gets to set the width and height according to javascript.

The problem is that when dragging the Resizable component. Whether left & right or up & down, it doesn't just drag the relevant border. It actually resizes the entire width or height respectively.

Is there a way to ensure that the DraggableDiv retains intrinsic width and height so we get a proper modeless window allowing background UI interaction, while still only getting resizing functionality that doesn't resize the entire height and width at the same time?

[ashiquemohammed]

@CMCDragonkai Did you come up with any solution for this , Stuck on the same road ?

[CMCDragonkai]

This is super old and no longer maintained, abandon ship!