Flipcontent SilkUI change height for single element

Flipcontent SilkUI change height for single element

  

We've used flipcontent in a number of places, with standard css from SilkUi.

I'm now trying to use the flipcontent in a place where it can only be about 2em. However, my css understanding of nested elements etc isn't good enough to overwrite the min-height: 80px.

This min-height is found in the following class:

.CardFlip .CardFlip__frontContainer,
.CardFlip .CardFlip__backContainer {
    left: 0;
    min-height: 80px;
    top: 0;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
}

If I put a containter inside of the front and backcard with a class min-height = 0, it makes that container smaller but not the card. If I put the flipcard inside a box with min-height = 0, it overwrites my class I think.

Solution

Hi Rob,

I'm not entirely sure what you want to achieve - do you want to override the min-height of the CardFlip class? You can enclose the element inside a Container with a specific class, say "SmallCardFlip", then override the standard CSS by:

.SmallCardFlip .CardFlip .CardFlip__frontContainer,
.SmallCardFlip .CardFlip .CardFlip__backContainer {
  min-height: 2em;
}

or something to that effect (I didn't test it).

Solution

Thank you very much, I tried 

.SmallCardFlip .CardFlip__frontContainer,
.SmallCardFlip .CardFlip__backContainer {
  min-height: 2em;
}

and

.SmallCardFlip .CardFlip,
.SmallCardFlip .CardFlip {
  min-height: 2em;
}

But your solution worked perfectly, thank you very much!

CSS always selects the most specific one. Your first is less specific than the original one because .CardFlip__frontContainer is contained in both .SmallCardFlip and .CardFlip, but .CardFlip is closer than .SmallCardFlip, and your second one defines min-height for .CardFlip only, and it would be inherited by .CardFlip__frontContainer if it didn't have a definition for min-height itself (but it does).

Anyway, glad I could be of help. Happy coding!