Responsive Layout with Image Buttons

Webix JS
1

I am trying to build a simple chess board (8x8 rows and columns). When each cell is view: "template" everything lays out just fine and takes up all available screen space.

From there, I want to embed a chess piece graphic in the cell, and have the image auto-size to the cell-size in a responsive way. What is the optimal way to do this? Should I use a css class for the chess piece or a { view: "button", type: "image", image:"chess_piece.png"} ?

I want the image to be a child of the parent view so the image (chess piece) can be dragged to another cell.

In other words, I am making a chess game.

Thanks!

2

> I want to embed a chess piece graphic in the cell

The most convenient way is to use the ui.template with some CSS.

> the image (chess piece) can be dragged to another cell

First of all, please check this article. Using templates as chessboard cells, it’s possible to work directly with the html of items without extra logic/layout modifications.

As it’s a quite complex question, here’s the advanced sample of the custom DnD pattern:

http://webix.com/snippet/20d24ef9

3

Ah this is a great starting point. I should be able to take this example and run with it.

Thanks for the example, it will help me a lot.