Flexi content height

  • Resolved James Monroe

    (@jhmonroe)


    4 months ago

    Flexi content height will not adapt to content?

    Example: I placed a query loop block inside a series of flexi content items.

    I set height to 50% vh since some of my pull quotes are long and some are short.

    They get cut off and there is no way to show the overflow.

    Previously I did this with gutenslider (which has been abandoned), but it could have either

    1. adaptive height (but this would jump around)
    2. fixed height and their block editor controls set a minimum height. not a height. so it would stretch when necessary.

    This might help the flexi slider be more flexible! 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Noruzzaman

    (@noruzzaman)

    3 months, 3 weeks ago

    Hi @jhmonroe,
    Thanks for pointing this out. I have just added an auto height option for Flexi Content in new version 1.0.8. Now you don’t need to set a fixed height. if you enable auto height, each slide will adapt dynamically based on its content. That means long pull quotes or variable content won’t get cut off anymore, and every slide will expand according to what’s inside it. You can try switching to Auto Height in the block settings, and it should give you the flexibility you were looking for.

    Thanks
    Noruzzaman

    Thread Starter James Monroe

    (@jhmonroe)

    3 months, 3 weeks ago

    Hey! That’s not the height issue I’m talking about if you read my post closely. It’s not about the container adapting to the content. It’s about the height of the container in the page layout…

    — I tried auto height: Auto height isn’t ideal because it will jump around on the page and make the layout look crazy. It causes the nav controls to jump around as well even when vertical align is set to middle. Did you try this? Auto height also messes up the padding/margins compared to last version it seems.

    — Having a third option for minimum height would allow someone to achieve similar to auto height results with better control over the layout than the current implementation of auto height

    • This reply was modified 3 months, 3 weeks ago by James Monroe.
    • This reply was modified 3 months, 3 weeks ago by James Monroe.
    • This reply was modified 3 months, 3 weeks ago by James Monroe.
    Plugin Author Noruzzaman

    (@noruzzaman)

    3 months, 2 weeks ago

    Hi @jhmonroe
    Thanks a lot for the detailed feedback and suggestion! You’re absolutely right having a minimum height option provides much better layout control compared to auto height. I have now added a minimum height setting to the blocks so you can achieve a more stable layout while still getting the flexibility you need. Appreciate you pointing this out! Please Updated it 1.0.9 Version

    Best,
    Noruzzaman

    • This reply was modified 3 months, 2 weeks ago by Noruzzaman.
    Thread Starter James Monroe

    (@jhmonroe)

    3 months, 2 weeks ago

    Hey! I’m testing and the minimum height change has some broken some other things that worked great before! 🙂

    • if i try to set min height to vh units, it only accept 100-1000, so you can’t set anything smaller than 100vh (i was only able to override it by changing to 50vh in the code editor instead of the visual editor). for example, when you previously has it set to height (not min height) I was able to set it to 50vh on desktop view so the slider would always take up that much space on my homepage. % now only accepts 100. px accepts 100–1000 only. people designing responsive/fluid sites will want flexibility with units like VH, rem, % etc.
    • the auto height option still has the bug that it top-aligns the flexi items and will not honor the vertical-align of middle or bottom. this of course means that the content and navigation jumps up and down making the slider very difficult to look at and use:

    settings in backend: https://www.dropbox.com/scl/fi/lufd0gf1fxhkcx8g9j7ly/Screenshot-2025-09-25-at-11.08.46-PM.png?rlkey=dz8dhl6cc9y3s2j8uzdxo8j57&dl=0

    video of frontend: https://www.dropbox.com/scl/fi/8ricol938d59up5hr2cml/Screen-Recording-2025-09-25-at-11.09.12-PM.mov?rlkey=xo0pphsyy80611mavi4jm9avz&dl=0

    let me know if you need any other help testing — you really have a great plugin once these bugs are worked out!

    • This reply was modified 3 months, 2 weeks ago by James Monroe.
    • This reply was modified 3 months, 2 weeks ago by James Monroe.
    Plugin Author Noruzzaman

    (@noruzzaman)

    3 months, 2 weeks ago

    Hi @jhmonroe

    Thanks a lot for pointing this out. You were absolutely right. The unit ranges were too restricted. I have fixed this issue so now you can use smaller values and full flexibility with vh, %, rem, px etc. Please update to version 1.0.10 where the fix is included.

    And auto height option, you are correct, when autoHeight is enabled in Swiper, the slide height adapts to the content, so vertical alignment (top / middle / bottom) would not really apply. That is normal Swiper behavior. To make this clearer, I have updated the condition: when autoHeight is active, it works as adapt height and the vertical-align control is disabled (since it has no effect). As you suggested earlier, using min-height ensures the navigation doesn’t jump anymore, so that issue should now be resolved. Please check the 1.0.10 version and let me know if you have any further suggestions I will be happy to improve it.

    Best
    Noruzzaman

    Thread Starter James Monroe

    (@jhmonroe)

    2 months, 4 weeks ago

    Hey! Testing this out today and here are my settings:

    • 30% vh (I also tried 50% vh to give more breathing room, but am leaving it tight to show)
    • vertical align: middle

    And the result:

    Auto-height approach: I still think you could find a way to make auto-height be set to the tallest item and allow vertical-align middle so that the items and nav arrows don’t jump around.

    As it is, the auto-height option is not useful if it jumps all over the place (and if the person has their mouse arrow in one spot, they keep having to move around to find the click target). It would ONLY be useful to someone who, for instance, uploads images that are all the exact same height.

    Plugin Author Noruzzaman

    (@noruzzaman)

    2 months, 3 weeks ago

    Hi @jhmonroe

    Right now I have set the height option so that Fixed height mode uses the tallest slide to set a uniform height, and vertical align is kept to middle. As a result, the nav arrows are not jumping around. You should always use Fixed height. In adapt height, there is an issue where the nav arrows jump. Actually, if in adapt height I also set a uniform height based on the tallest slide, which Fixed height already does then that setting is not needed.

    Adapt height should only be used by those who need the height to change based on their content. And regular users should always use Fixed height mode. I think you have understood this. Thanks

    Best
    Noruzzaman

Viewing 7 replies - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.