Center cards in hand of Hearts

[Bids]

Hi,
is there a way of centering cards in the hand? I see that this is not done on Hearts, is this something I should not want? So far with what I have tried, I have only managed to let them appear in the center 1 by 1 below each other, but I just want the white space on both space to be equal while appearing all of them next to each other.
Bids

[Tisaac]

Search for flexbox on the web.

[Bids]

I have tried many things, but I doesn't work. Could you indicate where I should add the new CSS class? I added it now as a class for my "myhand". I found the flexbox before, but I thought it was not what I needed, but apparently I'm implementing it wrong. Thanks in advance!

Code: Select all

.hand {
  display: flex;
  align-items: center;
  justify-content: center;
}

<div id="myhand_wrap" class="whiteblock">
	<h3>{MY_HAND}</h3>
	<div id="myhand" class="hand">
	</div>
</div>

[Archduke]

I think you might need "flex-direction: row" if using flexbox.

Another possibility is to use inline-block:

Code: Select all

.hand {
  display: inline-block;
}
.centred {
  text-align: center;
}

<div id="myhand_wrap" class="whiteblock">
	<h3>{MY_HAND}</h3>
	<div class="centred">
		<div id="myhand" class="hand">
		</div>
	</div>
</div>

[Bids]

Hi Archduke,
Thanks a lot for your answer. Unfortunately it also didn't do the trick. I have the same resulted as I once had before: I see all cards centered but displayed one by one under each other. Somehow it reduces the width of 'myhand' to the width of one card, instead of the width of all cards next to each other.
Edit: by the way, the closest thing that I get to what I want is when I set margin-left and margin-right to 20%, maybe that can give someone some help on how this should be solved... It seems such an easy obvious thing.

[Victoria_La]

You have to set the with on the container to not have it shrink to size of cards. Do you have a link to game on studio?
I can play with css to see what is the problem,

[Bids]

Hi,
I think this is the link: https://studio.boardgamearena.com/gamep ... dscardgame
The working version of the game in studio is called 'bidscardgame'
Thanks a lot (also for the tutorial)!

[Victoria_La]

Ok so basically this is Stock component, which use absolute position of cards, so css layouts cannot be used here, so you cannot center cards inside it.
You can try to center the hand itself, however this component does not set properly the with of the container (hand), the only way to center it is it actually changes size with the number of cards, but it does not.
Assuming it would have had actually size that would have worked

Code: Select all

centered {
    display: flex;
    justify-content: center;
}

i.e. you would have to add this to see it work
.hand {
width: 600px;
}


Unless any Stock experts here correct me, I don't see how it can be done easily here.

You can also see it if you block positioning

Code: Select all

.hand > * {
    position: relative;
    top: unset !important;
    left: unset !important;
}

But if you do it - you also block the animation, which defeats the purpose of using stock.

If you want to have fancy layout just forget about the stock and place cards and do everything in js/css manually.

[Benoit314]

In my game they are automatically centered.
I'll check later in your game, but except defining a width for the direct parent, I don't think I do anything special.

[Bids]

Ok so basically this is Stock component, which use absolute position of cards, so css layouts cannot be used here, so you cannot center cards inside it.
You can try to center the hand itself, however this component does not set properly the with of the container (hand), the only way to center it is it actually changes size with the number of cards, but it does not.
Assuming it would have had actually size that would have worked

Code: Select all

centered {
    display: flex;
    justify-content: center;
}

i.e. you would have to add this to see it work
.hand {
width: 600px;
}


Unless any Stock experts here correct me, I don't see how it can be done easily here.

You can also see it if you block positioning

Code: Select all

.hand > * {
    position: relative;
    top: unset !important;
    left: unset !important;
}

But if you do it - you also block the animation, which defeats the purpose of using stock.

If you want to have fancy layout just forget about the stock and place cards and do everything in js/css manually.

Thanks a lot Victoria for looking into this! For me personally I don't find it a big issue that the cards are not centered, so I will keep it like this. I thought it would just have been a "nice to have" thing

In my game they are automatically centered.
I'll check later in your game, but except defining a width for the direct parent, I don't think I do anything special.

if you have used a stock, let me know how you did it!