Comments (8)
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.
from chessboard-element.
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: #13
from chessboard-element.
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.
from chessboard-element.
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?
from chessboard-element.
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.
from chessboard-element.
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
from chessboard-element.
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 overflow: hidden
properties and made layout design so much easier. Recommended.
from chessboard-element.
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.
from chessboard-element.
Related Issues (20)
- Autocompletion TypeScript / React HOT 1
- add click-to-move as alternative to drag-and-drop HOT 4
- Uncaught TypeError: Cannot read property 'removeEventListener' of null HOT 2
- how come the contents of the node_modules folder once installed differs from this repository's files? HOT 2
- why is there always an inexplicable bottom margin under the board? HOT 1
- Chrome Warnings about Non-passive Event Listener
- exception in rendering board when loading a new fen HOT 3
- Event detail typings HOT 1
- No undo and redo for moves HOT 1
- draggable-pieces property works differently then in documents
- Issue with flexbox HOT 1
- Usage in React Typescript HOT 2
- Blocking Right click moves.
- Uncaught (in promise) TypeError: Cannot read properties of chessboard-element.js:495 how can i use in svelte?
- race condition and other oddities when using with Vite / Vue 3 HOT 3
- custom elements json HOT 1
- The highlight example breaks
- orientation with react
- 404 Error on document link
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chessboard-element.