Topic: Full Size Images & Dynamic Height On Angular Flipping Card
Expected behavior
Option for image on flipping card to be dynamic and not be cut off by the .content section.
Actual behavior
When copying the code from here:
https://mdbootstrap.com/plugins/angular/flipping-cards/
Any image that is larger than the set pixel height overflows with overflow:hidden. This prevents the whole image form being seen and seemingly hidden when it runs over. If the image height is changed then the .content section of the card runs off the card height because the card height is fixed too.
Is there any way to display images on flipping cards in a way that they don't get cut off (so a dynamic height flipping card - not fixed as it is right now). Also any way to create a dynamic height flipping card?
Secondly is there a way in Angular to make all the cards equal height based on this dynamic nature? "d-flex align-items-stretch" is only listed in the jQuery section but I would like a similar effect in Angular. Are these available for use in Angular too or only jQuery?:
https://mdbootstrap.com/plugins/jquery/equal-height-columns/https://mdbootstrap.com/plugins/jquery/extended-cards/https://mdbootstrap.com/plugins/jquery/card-layout/
Resources (screenshots, code snippets etc.)
See links above.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 8.6.0
- Device: Surface
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: Yes
ewgiddings commented 5 years ago
In short, between my two posts on this thread:
1) How do I make everything full height and dynamic with flipping cards without adverse effects such as other content being pushed down the size of an invisible element?
ewgiddings commented 5 years ago
In addition to my second question here - is it possible to have two different heights for the front of the card and back of the card? Right now, with my fix to make it dynamic, if one is a bigger size than the other then it runs off the page. I have been trying CSS to get the cards to be dynamic but best I have gotten so far occurs in the invisible long side still taking up the space of the back of the card. See the image for a reference. By this, I mean the back of the card is long and even when it is not visible it takes up the space as if it were visible. How can I get it to not take up all that space until it is visible? How can I get these cards to be dynamic with their heights without adverse effects such as this? See in the image I have gotten it to be dynamic but the cards on top are still pushing down the other cards the length of the long back side.
Arkadiusz Idzikowski staff commented 5 years ago
Please take a look at this thread and let me know if that works for you. You can find there an example of flipping card with dynamic content: https://mdbootstrap.com/support/angular/flipping-card-height/
The
d-flexandalign-items-stretchare bootstrap classes and can be used in MDB Angular as well.We don't recommend to set different heights for front and back, because it can break flipping card styles and animation.
ewgiddings commented 5 years ago
Awesome! Thank you for linking that! Didn't see it when I was trying to search.