why is there always an inexplicable bottom margin under the board?

[vesper8]

I'm trying to align a button bar to sit flush underneath the chess board and this is extremely difficult it seems. For some reason there is always a margin/padding at the bottom of the board and this does not seem to be controlled by any css.. it seems to be taken up by the canvas. I can't figure out how to get rid of that padding so it's very difficult to align anything flush with the bottom of the board

@justinfagnani any idea what's causing this and how to work around it?

[vesper8]

ok I figured it out.. it's the #dragged-pieces div which is taking up space

I see there's already an issue opened about it too #8

I couldn't for the life of me figure out how to target this element since it does not have an assigned part so you can not target it like you can target other parts such as this:

chess-board::part(white) { background-color: white; }

It would be nice if you could add an option to disable this container completely.. or at the very least add a part to it so one could do this

chess-board::part(dragged-pieces) { display:none; }

I was able to remove it finally but only thanks to a pretty hacky approach:

  mounted() {
    this.getShadowRoot = (elem, selector) => elem.querySelector(selector).shadowRoot;

    this.chessBoard = this.getShadowRoot(document, 'chess-board');

    this.removedDraggedPieces();
  },

  methods: {
    removedDraggedPieces() {
      if (this.chessBoard.querySelector('#dragged-pieces')) {
        this.chessBoard.querySelector('#dragged-pieces').remove();
      } else {
        setTimeout(() => {
          this.removedDraggedPieces();
        }, 0);
      }
    },
  },

Had to this because the the dragged-pieces is not immediately available once the chessboard is rendered

The above works but it would be nice if there was an easier way of having the #dragged-pieces not take up any space as it does now