'flexible width with overlaping divs on blazor with CSS and bootstrap

I have a hand of cards on my UI and I want to allow fitting more cards than actually fit on the div, by letting them overlap if necessary.

My cards are linked to an array using blazor, like this:

<div class="PlayersHand d-flex flex-row justify-content-center">
    @foreach(var card in Client.Game.Me.CardsInHand)
    {
        <CardViewer Card=card IsHandCard=true />
    }
</div>

My cards get arranged properly. But when there are too many the overflow kicks in with hidden, or scrollbar or whatever is set. I don't want that to happen. I want my cards to overlap as much as necessary, to fit in the space.

This would be the expected behavior:

enter image description here

cssbootstrap-4blazor


Solution 1:[1]

I did not try suggestion from Neptotech because, as pointed by Astrid in the comments in the main question, there was a solution based on grid that was way less verbose, that's just it :

.PlayersHand {
    margin-right: auto;
    margin-left: auto;
    justify-content: center;
    display: grid;
    width:100%;
    grid-template-columns: repeat(auto-fit, minmax(10px, max-content));
}

The grid-template thing is the core thing I needed.

Solution 2:[2]

Check the below snippet

:root {
  /*Variables,remove needed*/
  --bg-one: #973999;
  --bg-two: #f8598b;
  --bg-three: #f7bf00;
  --bg-panel: #ebebeb;
  --color-text: #999;
  --distance: 4rem;
  --height: 150px; /*OR Auto*/
  --width: 100px; /*OR Auto*/
}

body {
  /*You may remove this rule*/
  background-image: linear-gradient(
    to bottom right,
    var(--bg-one),
    var(--bg-two),
    var(--bg-three)
  );
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin: 0;
}

.cards {
  display: flex; /*MAIN*/
}

.card {
  z-index: 1; /*MAIN*/
  background: var(--bg-panel); /*MAIN*/
  height: var(--height);
  max-width: var(--width);

  /*Styles(You may remove)*/
  border-radius: 1rem;
  padding: 2rem;
  box-shadow: 4px 4px 12px 2px rgba(0, 0, 0, 0.6);
}
.card p {
  /*You may remove this rule*/
  color: var(--color-text);
}

.card:not(:first-child) {
  margin-left: calc(var(--distance) * -1); /*MAIN*/
}
<div class="cards">
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
  <div class="card">

    <p>This is an article and this has some content.</p>
  </div>
</div>

Idea from here

I have edited the code from the above link,I don't know blazor but I think this will help you,I have commented most of my code.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 javirs
Solution 2 Neptotech -vishnu

Related Questions