[SOLVED] Automatic Div Height ?

[Badguizmo]

Hello everyone.

It is me again for another beginer question

I am creating a card game.
My tpl file contains some divs which represent my board, the opponent board, ... :

Code: Select all

<div id="opponentBoard" class="grid-container-center">
            <div id="opponentBoard1" class="player-rift grid-border"></div>
            <div id="opponentBoard2" class="player-rift grid-border"></div>
            <div id="opponentBoard3" class="player-rift grid-border"></div>
            <div id="opponentBoard4" class="player-rift grid-border"></div>
            <div id="opponentBoard5" class="player-rift grid-border"></div>
            <div id="opponentBoard6Empty" class="player-rift grid-container-guild-owned"></div>
            <div id="opponentBoard7Empty" class="player-rift grid-container-guild-owned"></div>
        </div>

The CSS class are :

Code: Select all

.grid-container-center {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    width: 1225px;
    justify-items: center;
    position: relative;
    grid-auto-rows: minmax(125px, auto);
}
.player-rift {
    position: relative;
    float: left;
    width: 168px;
    height: 0px;
    margin: 0px;
    grid-auto-rows: minmax(125px, auto);
}
(.grid border only for graphical testing purpose)

I am adding cards on JS with dojo to the differents divs :

Code: Select all

template : var jstpl_elemental='<div class="card-elemental card-normal card_${guildId}_${cardValue}" id="card_${cardId}"></div>';
dojo.place(this.format_block('jstpl_elemental', {
                guildId: GuildId,
                cardValue: cardValue,
                cardId: card_Id
            }), 'opponentBoard2','last');

I have tried multiple ways but I can't manage to make my div to adapt their height to the child.

Is it possible to have done automatically (doesn't work for me at the moment) or does it have to be done manually (which I started to do) ?

(I have also the same question to have the cards to be centered inside the divs ... I have to use "slideToObjectPos" with an offset.)

Thank you for reading (and helping )

[Tisaac]

Just remove the height :0px, why would you put that in the first place ??

[Badguizmo]

Hello Tissac.

Good question

But commenting it doesn't seems to change anything ...

I will dig more.

[Tisaac]

Hello Tissac.

Good question

But commenting it doesn't seems to change anything ...

I will dig more.

What's the game name on the studio ?

[Badguizmo]

Riftforce.

You should have the access now (RO, tell me if you want RW).

[fafa-fr]

But commenting it doesn't seems to change anything ...

Just to make sure, did you do a hard-refresh of your browser (Ctrl-F5 or Ctrl-Shift-R) to be sure your new css was used?

[Badguizmo]

Hello fafa.

Yes, hard refresh, reloading everything from game page and also an express stop then express start to be sure ...

I surely made something wrong, but what ?

[chriskang]

@Badguizmo the main reason why your parent div doesn't grow with the content is because your child div (the card) has a "position: absolute" in the .card-guild CSS class.
When an element has an absolute position it is removed from the page flow and is considered to have 0 size.
Please read this :
https://developer.mozilla.org/en-US/doc ... S/position

[Tisaac]

@Badguizmo the main reason why your parent div doesn't grow with the content is because your child div (the card) has a "position: absolute" in the .card-guild CSS class.
When an element has an absolute position it is removed from the page flow and is considered to have 0 size.
Please read this :
https://developer.mozilla.org/en-US/doc ... S/position

Yeah I was suspecting that but there were no position absolute in the css he first posted here

[Badguizmo]

arf .....
so much to learn
(And I forgot to put the css class for the card in the question )
Thank you all

I will check/correct that tonight and update the topic

EDIT : ok it was the position.
Thank you again