Component positioning?

I’m not very skilled with CSS so this might be a silly question, but I’ll ask it anyway :slight_smile:

How can I control a component’s (say, a Button) position dynamically from server side? For example, if I have a window with a chessboard like in the table example in the manual, and I’d like to put a Button representing a rook in the H1 square. In the server side state I have each pieces’ coordinates (eg. x=0, y=7 for the rook in H1). Layout-wise I’d have a VerticalLayout as the Window’s layout, and the table and the pieces are added to it.

What CSS magic do I need to get the Buttons positioned correctly on the chessboard?

How about using GridLayout? Or upcoming (5.4?) CoordinateLayout…

GridLayout won’t work if I want to use a image as a backgound for the pieces. CoordinateLayout would be the correct solution though.

Anyway I solved it 5.3 way by creating a few class names I add to the buttons. One adds “position: absolute”, and the rest specify the coordinate → pixel offset mappings. A little kludgy I guess, but it works.

Hmm, I’m not following: why is GridLayout out of the question? Do you want to have a background for the GridLayout that represents the checkered board, or what was the problem?

Because I can’t see a reason not to use GridLayout here. Your solution is not so much of a kludge, but maybe a bit heavy to maintain (e.g. your piece size changes, and you have to rewrite all coordinates in your CSS).

The chessboard case was just an example, I’m not actually using a static image, so I can’t specify a background in CSS.

As you pointed out my solution is a bit fragile, but it’s adequate for the purpose.

Henri, maybe you have a screenshot of what you want to achieve, so we have a better understanding.