Adding text strings to a piece on a gameboard

[catwillow]

https://developer.mozilla.org/en-US/doc ... S/position
yes absolute or relative position should do the trick.

The browser F12 developer has an inspect element function and is great for dabbling with css and styling requirements. As well as seeing how your dojo.place functions worked.
Don't forget to a do a hard page reset (Cntrl-F5) after any css changes.

For top and left to work, the element should also have

Code: Select all

position: absolute

defined inside the CSS class

I tried that and unfortunately it did not work. With this:

Code: Select all

var jstpl_token='<div style="position: absolute; top: ${t}px; left: ${l}px;" class="token tokencolor_${color}" id="token_${x_y}">${text}</div>';



 dojo.place( this.format_block( 'jstpl_token', {
                    x_y: x+'_'+y,
                    color: this.gamedatas.players[ player ].color,
                    t: 10,
                    l: 80,
                    text: 123,
                } ) , 'tokens' );

The numbers did nothing.

I was able to position it correctly using this:

Code: Select all

var jstpl_token='<div style="position: absolute; text-align: center; line-height: 60px; top: ${t}px; left: ${l}px;" class="token tokencolor_${color}" id="token_${x_y}">${text}</div>';

But I'd like to know why it didn't work to put them in the template, and how to move the text freely.

[RicardoRix]

There is kinda 2 main different things happening.

1. Actually adding things to the webpage.
2. The things you add actually working as intended.

It sounds like you're doing 1) correctly.
So it's just an html / css understanding to get the elements you've added to work correctly. There are websites to help you with that like css-tricks, w3schools and the like. I use the F12 developer console a lot to mess around with styling and getting a dynamic response to me trying different things.
There can come a time when it's just a single piece of information that is the key to the understanding. I think this situation here is how the 'position' css property can effect the div elements. Parents and child elements can effect each other too.

This looks like a good read:
https://developer.mozilla.org/en-US/doc ... ositioning