Page 1 of 2
Center cards in hand of Hearts
Posted: 22 November 2020, 15:20
by 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
Re: Center cards in hand of Hearts
Posted: 22 November 2020, 15:52
by Tisaac
Search for flexbox on the web.
Re: Center cards in hand of Hearts
Posted: 22 November 2020, 16:19
by 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>
Re: Center cards in hand of Hearts
Posted: 22 November 2020, 18:52
by 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>
Re: Center cards in hand of Hearts
Posted: 22 November 2020, 19:42
by 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.
Re: Center cards in hand of Hearts
Posted: 22 November 2020, 20:35
by 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,
Re: Center cards in hand of Hearts
Posted: 22 November 2020, 21:24
by 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)!
Re: Center cards in hand of Hearts
Posted: 23 November 2020, 00:36
by 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.
Re: Center cards in hand of Hearts
Posted: 23 November 2020, 13:50
by 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.
Re: Center cards in hand of Hearts
Posted: 23 November 2020, 18:11
by Bids
Victoria_La wrote: ↑23 November 2020, 00:36
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
Benoit314 wrote: ↑23 November 2020, 13:50
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!