search

forrestkirby / flipcard-element

A custom element for the YOOtheme Pro Page Builder to display a panel with a flipcard animation.
https://herzog-dupont.de/yootheme-pro-custom-elements
GNU General Public License v3.0
9 stars 2 forks source link

Vertical Alignment - Feature Request #17

Open ibweb opened 3 years ago

ibweb commented 3 years ago

Would it be possible to add an option for Vertical Alignment for the content on the FlipCard items?

By default, all content is aligned to the top which makes sense. However, our goal is if we have three FlipCard items next to each other (i.e. 3 column) with slightly varying length and have them matched height, we would like to have an option to align the content vertically to the middle instead of top.

Let me know if there's any possibility for this.

forrestkirby commented 3 years ago

Hi ibweb,

did you already take a look at #4? Does that suits you needs?

Kind regards Thomas

ibweb commented 3 years ago

@forrestkirby I apologize as I missed that item. Thanks for pointing it out so graciously. While #4 would likely get the visual functionality we are looking for, we need the ability to set this per flipcard element. Meaning on a single website, we may have some flipcards needing top alignment and others requiring middle vertical alignment. As a result, we'd prefer it be a dropdown selection item within the element itself (similar to Yootheme Pro's other elements that allow for vertical alignment changes).

forrestkirby commented 3 years ago

Thanks for making this clear. And the setting would be the same for both – the flipcard front and the back? Or do you see any need to set it differently for the front than for the back?

ibweb commented 3 years ago

@forrestkirby I think in 90% of cases it would be the same on both sides. However, I could see how having the independent options would be valuable for us and other designers if it's realistic from a programming perspective.

forrestkirby commented 3 years ago

I was thinking about this and came to the conclusion that I still haven’t completely understood how exactly the desired outcome should look like, so I created some mockups. In all of these layouts, there is a row with three columns and the option Match height has been checked. Is any of these matching what you had in mind?

ibweb commented 3 years ago

@forrestkirby Option 2 is definitely what we had in mind as the option that you can toggle to for "Middle" instead of Top. This is what we were hoping for. Option 1 is also very intriguing, and I could see it could be useful in some pretty unique scenarios as well. I don't suppose you have an easy/practical way to make both of them as additional options, correct?

forrestkirby commented 3 years ago

Option 1 can be achieved if you set the vertical alignment of the first column to Middle.

Here’s a sample layout.

Option 2 will probably require an additional container to work which might impose issues with the layout or styling. I will take a look at it, but can’t make any promise.

ibweb commented 3 years ago

That makes sense how to produce option 1, thank you for the explanation. Option 2 is definitely what we had in mind, and I recognize that will be a lot harder. Let me know what you come up with and if you think it will be realistic. Thanks for looking into this!

grabit commented 3 years ago

This feature is really interesting.

We have cards with a huge photo on the front and we want to center the back in the middle as all the content in placed in the el-card-back div we can't use vertical-along: middle for it.

ibweb commented 1 year ago

@forrestkirby did you up discovering a solution on this one?