Suggestion: #dragged-pieces shadow element should not affect layout

[cdata]

This suggestion may not make sense as I may not fully understand the role of the element. Currently, the #dragged-pieces element in the shadow root takes up a square's worth of space below the visible chessboard. This element is never visible AFAICT (it appears to be used as a holding container for temporary pieces affixed to the cursor while dragging), so it isn't immediately obvious why it needs to take up space in the layout. Would it be okay to change it so that it does not take up space?

[justinfagnani]

I've never seen that element take up layout space, but it does seem like there are some missing styles for it. It'd be very fine to make it not take up space, even better to remove it I think. If the dragged piece is position absolute, then it shouldn't be necessary. OTOH, this is some code that was ported from upstream, and since piece rendering is pluggable, maybe it's safer this way.

[vesper8]

running into this issue as well and have a working (hacky) solution for getting rid of the container. Was not able to target it with any css. I tried using the /deep/ selector which should have worked but for some reason didn't

/* should work, but doesn't */
body /deep/ #dragged-pieces {
	display: none !important;
}

/* would work if dragged-pieces was assigned a part */
chess-board::part(dragged-pieces) { display: none !important; }

My solution is described here: https://github.com/justinfagnani/chessboard-element/issues/13

[sam-19]

You can access the dragged pieces component and modify its styles like this:

// const board = the chessboard as Element
board.shadowRoot.querySelector('#dragged-pieces').setAttribute('style', 'display:none')

But I agree with the above, it should probably be easier and even better if one could get rid of it altogether.

[vesper8]

Right that's what I'm doing too.. except that the dragged-pieces is not immediately available in my case so I have to add this modification in a settimeout of 0 seconds for it to work

In any case however, I noticed that if I remove the dragged pieces, or change it to display:none, or change the position to absolute.. if I do any of these things.. while it no longer takes up space.. it breaks the drag-n-drop completely and I can no longer drag pieces.

Have you found a way of liberating the space that dragged-pieces takes without breaking the drag-n-drop?

[sam-19]

Sort of. The height of the element holding the dragged pieces is one square's height. So I have a component placed below the chessboard with position: relative and I have a ResizeObserver on the chessboard; whenever the size changes, I update the top style of the component to match -1/8*chessboardWidth (this places the component right below the chessboard). I wrap the chessboard in an element with overflow: hidden and also set the height manually to match the width + my components height. This has the downside that any pieces dragged outside the board become invisible (because of the wrapping element's overflow: hidden) but it gives me some extra control over the layout.

[vesper8]

Hrmm.. interesting approach.

I also just solved it by doing something similar. I store the width of one of the squares and then add assign that number to negative margin-top to my button bar which I want to sit flush with the bottom of the board. It works.. and I end up with the same problem as you just described where if you drag the piece outside of the board it becomes invisible

[sam-19]

Just FYI, now that I started thinking about this, I went into my project's node_modules folder and changed the lines in the lib/chessboard-element.js corresponding to https://github.com/justinfagnani/chessboard-element/blob/1bc7004ea98359cbca9a1039dfd6dc842e0d27e3/src/lib/chessboard-element.ts#L487-L495 to

      <div
        id="dragged-pieces"
        style=${styleMap({
            width: `0px`,
            height: `0px`,
            overflow: `visible`,
        })}
      >
        ${this._renderDraggedPiece()}
      </div>

This has completely hidden the dragged-pieces element while still keeping them visible when dragged. A modification like this will of course be overwritten if a new version is released on NPM, but it's a temporary fix at least. If @justinfagnani would be okay with this approach, I could make it into a pull request.

Update: This change has allowed me to get rid of all overflow: hidden properties and made layout design so much easier. Recommended.

[Torom]

Hey, I just wanted to say that I also encountered the problem and would be very happy if it could be fixed. Thanks a lot for your good work.