-
Notifications
You must be signed in to change notification settings - Fork 14
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Suggestion: #dragged-pieces shadow element should not affect layout #8
Comments
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. |
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
My solution is described here: #13 |
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. |
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? |
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 |
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 |
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 chessboard-element/src/lib/chessboard-element.ts Lines 487 to 495 in 1bc7004
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 |
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. |
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?The text was updated successfully, but these errors were encountered: