Chess board is not responsive when parent element dimension changes

[Nandakumar-M]

Hi,

I have a three column layout for my page and use cm-chessboard in one of the columns. On resizing the columns, the board does not get resized.

When the entire window is resized the board's size is adjusted as expected.

Would be good if the responsiveness is based on the dimensions of the parent element specified when creating the board instead of window size.

I guess this can be accomplished using the Resize_Observer_API. This seems to be supported by all major browsers now in 2021.

Many thanks for making cm-chessboard. It is wonderful.

Regards, Nanda

[Nandakumar-M]

https://usefulangle.com/post/319/javascript-detect-element-resize

https://stackoverflow.com/questions/6492683/how-to-detect-divs-dimension-changed

[shaack]

Hi, thanks for the recommendation. If I find time soon I will have a look at it.

[Nandakumar-M]

Hi, thanks for the recommendation. If I find time soon I will have a look at it.

Have created a pull request. Please check.

45

[shaack]

Thanks for the pull request. It Looks very good and you also updated the documentation. Thanks.

[Nandakumar-M]

Hi @shaack , you have any timeline for next version release in NPM? Would be great if you can have this fix in next version. Thanks in advance.

[shaack]

@Nandakumar-M I just published the 3.12.7, it now contains your PR.

[shaack]

Note: The browser support for ResizeObserver was unfortunately not as high as expected. There were some failure reports in the chessmail forum after installation of the new cm-chessboard. So with version 3.12.13 I added the window.resize again optionally if the browser does not supports ResizeObserver.

[siramon]

ResizeObserver-Support can be seen here: https://caniuse.com/?search=ResizeObserver

I am not sure, based on the code changes, which of the interfaces are used. But some of them are not yet supported in Safari.

Thank you for the quickfix @shaack