CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
SeventhWarhawk
SeventhWarhawk

Reputation: 1323

How to have a cards size adjust based on the content placed within it?

Currently I have a collapsible, that once clicked brings down a card. Within this card I have a paragraph tag containing a set of elements. However, as it stands, the card is one set size. I would like, if possible, to have the width of the card adjust according to the size taken up by the paragraph tag and all the elements within it. Therefore, it will prevent any of the elements within the paragraph tag from going onto a second line. Instead the card will simply increase/decrease in width accordingly.

Here is my HTML containing the card:

<div class="collapse" id="@target">
      <div class="card card-body w-25 p-3 collapsible cardCollapsible" id="@dataLine.Split(Model.CategoryList.delimiterChar)[1]">
            <p class="paragraphStyling">
                <input type="checkbox" id="itemCheck" /> @dataLineItem.Split(Model.CategoryList.delimiterChar)[0] <button class="btn"><i class="fas fa-trash tertiaryDeleteIcon"></i></button> <button class="btn"><i class="fas fa-edit tertiaryEditIcon"></i></button>
            </p>
      </div>
</div>

And here is the CSS I have so far for the card itself:

.cardCollapsible 
{
    margin-top: 20px;
}

I would like to keep the card centered within the page, so ultimately the card will adjust in width to both the left and right side.

Upvotes: 1

Views: 7724

Answers (1)

SeventhWarhawk
SeventhWarhawk

Reputation: 1323

I managed to get this working by a very simple and most likely very obvious fix. I simply needed to remove the 'w-25' out of the class definition of the card itself.

And within the CSS for the card i used width: auto, this adjusts the cards width dynamically.

Find below the CSS used to center the paragraph content of the card as well as expand its size dynamically;

.cardCollapsible {
    margin-top: 20px;
    width: auto;
    height: 100px;
    display: table;
}

.paragraphStyling {
    text-align: center;
    vertical-align: middle;
    display: table-cell;
}

Hopefully this helps anyone looking to do the same!

Upvotes: 1

Related Questions