Full Height Row Without Vertical Centering

About this forum
These forums have not been active for several years. They're available for search and reference, but a lot of this information is likely out of date.

For current information, try visiting our Knowledge Base.

Home / Support / Beaver Builder Plugin / Full Height Row Without Vertical Centering

This topic is: resolved
Viewing 30 posts - 1 through 30 (of 31 total)
  • Author
    Posts
  • #89075

    Doug Sisco
    Participant

    This may have been covered in another thread, if so please point me to it:

    How can I set a row to full height but have the content aligned to the top? It seems like poor functionality to have vertical centering when the row is set to ‘full-height’.

    #89220

    KC
    Participant

    Hey Doug Sisco,

    I see that you’ve marked this thread as resolved. Glad that you made it work. Enjoy BB and let us know if you need anything further. 🙂

    Thanks!

    KC

    #89334

    Robby McCullough
    Keymaster

    Hey Doug! Thanks for reaching out with your question. I believe we default to vertical centering, but you’re right, this isn’t as flexible as it could be.

    We’ll see what we can do. Also, if you have a minute, this would make a great feature request:

    https://wpbeaverbuilder.uservoice.com/

    #89401

    Robby McCullough
    Keymaster

    Okay Doug, I have an update. Happy to say this is something we’re working on! No ETA yet, but we’ll get it out as soon as possible.

    #92222

    Ray
    Participant

    Hi Robby,

    I’m currently working on a project that needs a text element a certain distance from the top of a FULL HEIGHT row. Centering the element vertically on the page is not appropriate. It needs to be a fixed distance regardless of page height.

    Is there something you can provide in the form of some custom CSS or other method? Just wondering if their is a workaround or do we need to wait for a future update for the permanent fix?

    If it’s only available via an update do you know how long this will be – just so I can have a rough idea on the timing in regards to my project – thanks.

    #92328

    Justin Busa
    Keymaster

    Hi Ray,

    This will be available in an update after the 1.7 release. For now, this CSS should do the trick…

    .fl-row-full-height.fl-row-align-center .fl-row-content-wrap {
    	align-items: center;
    	justify-content: center;
    	-webkit-align-items: center;
    	-webkit-box-align: center;
    	-webkit-box-pack: center;
    	-webkit-justify-content: center;
    	-ms-flex-align: center;
    	-ms-flex-pack: center;
    }

    To make that work you’ll want to give any rows that need it a class of fl-row-align-center in the row settings. Let me know if you have any questions about that.

    Justin

    #92329

    Justin Busa
    Keymaster

    Actually, I just goofed. That is the code to align them to the center. Change all instances of center to inherit and it should align top. Sorry for the confusion!

    Justin

    #92354

    Ray
    Participant

    Thanks heaps Justin – PERFECT 🙂

    #92516

    Justin Busa
    Keymaster

    You’re welcome! I’m glad it worked 🙂

    #99629

    Pablo
    Participant

    Hello,

    I am just trying to achieve the same thing with no result.

    The page is http://en.thecrazytravel.com/, and I want it in the last list at the bottom of the page, to get that list align vertically so no matter how wide is the screen the list or the photo are always centered.

    I added this to my custom css:

    
    .fl-row-full-height.fl-row-align-center .fl-row-content-wrap {
    	align-items: inherit;
    	justify-content: inherit;
    	-webkit-align-items: inherit;
    	-webkit-box-align: inherit;
    	-webkit-box-pack: inherit;
    	-webkit-justify-content: inherit;
    	-ms-flex-align: inherit;
    	-ms-flex-pack: inherit;
    }
    

    And I applied the class fl-row-align-center to the row.

    Thanks,
    Pablo

    #99630

    Dave
    Participant

    I’m also interested in following this…
    I’m having a hard time working out how to place content on a row that has an image as the background. Tweaking the borders and margins seems a fair bit hit and miss & would love to have a better understanding of it!
    I added this CSS, but to me it doesn’t seem to have any affect to me either…
    Cheers, Dave

    UPDATE2 -I take it all back, it works fine now – I had some padding in a column setting I was experimenting with, once I removed that my Heading appears exactly where I want it…
    Thanks so much – Dave

    UPDATE, I just re-read the thread and missed the part about adding the fl-row-align-center class, so I did that, and a heading I had placed on the column moved up a bit, but only a small part of the column height – By the way, I have ‘Height’ set to Full height – else things seem to be worse getting things aligned nicely!

    #99719

    Ben Carlo
    Keymaster

    Hey Pablo,

    The code Justin gave above only works when you have Full Height enabled, and if you want the items not to be centered vertically. For your case, you could try the code below instead. 🙂

    #fl-row-align-center .fl-col-content {
      align-items: center;
      justify-content: center;
      -webkit-align-items: center;
      -webkit-box-align: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-align: center;
      -ms-flex-pack: center;
    }

    Dave,

    Do you think you can share the URL to the page in question so we can take a look? 🙂

    Ben

    #99722

    Pablo
    Participant

    Thanks Ben, I realised later, that’s why I open the other post. :$

    It works, cheers!

    #99746

    Ben Carlo
    Keymaster

    Glad to hear it worked for you, Pablo! Enjoy! 🙂

    Ben

    #100192

    Pablo
    Participant

    Hello Ben,

    For some reason it doesn’t work in both rows, only in the first one. What should I do?

    If you check my homepage here: http://en.thecrazytravel.com/

    The last rows at the bottom, where you had the image and 3 icons on the right, those are vertically centered.

    But the next row with 3 icons and a girl cycling, those ones don’t get vertically centered. Both rows with the same class.

    Am I doing something wrong?

    #100235

    Ben Carlo
    Keymaster

    Hey Pablo,

    You’re placing it as a class, the code I gave you was for an ID. If you want to use it again, you might want to change them both to a class, since IDs can’t be used twice. Use the code below, then remove the fl-row-align-center ID from the first row, and make it a class instead.

    .fl-row-align-center .fl-col-content {
      align-items: center;
      justify-content: center;
      -webkit-align-items: center;
      -webkit-box-align: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-align: center;
      -ms-flex-pack: center;
    }

    Ben

    #100258

    Pablo
    Participant

    Thanks, that’s great. I didn’t realised.

    Could I do this same thing for aligning everything to the bottom for full height rows?

    I created a design where all pages start with a full height (full screen) image, and I always put an arrow at the bottom of it linking to the rest of the page. I set it up with a massive padding on top, but it would make more sense to do it this way, since that way I can make sure it always shows at the bottom no matter the screen. 🙂

    #100301

    Ben Carlo
    Keymaster

    Hey Pablo,

    You could try using the snippet below. 🙂

    .fl-row-align-bottom .fl-col-content {
      -webkit-align-items: flex-end; 
      align-items: flex-end; 
    }

    Ben

    #100308

    Pablo
    Participant

    It didn’t seem to work, I used it for the arrow here:

    http://en.thecrazytravel.com/maps/bicycle-touring-around-the-world/

    It got aligned in the middle.

    #100310

    Ben Carlo
    Keymaster

    Ah, sorry about that. This one should do it!

    .fl-row-align-bottom .fl-row-content-wrap {
      -webkit-align-items: flex-end; 
      align-items: flex-end; 
    }

    Ben

    #100316

    Pablo
    Participant

    It works, but now the arrow doesn’t seem to show up until I start to scroll. It was set to show up after 0.3 seconds sliding down.

    It is very strange because it only happens in the pages where I went and edit the padding (I already had a class for those rows and I wrote the CSS in the global settings of Beaver).

    So, in this page: http://en.thecrazytravel.com/media/photos/
    I went in and edited the padding, leaving it on 40px bottom padding and 20px top padding. Arrow don’t show up until I start to scroll down.

    In this page: http://en.thecrazytravel.com/gear/
    I have not edit it yet, the padding should be something like 700 tip padding and 20px bottom padding. And it works as expected.

    Weird.

    #100361

    Danny
    Keymaster

    Hi Pablo,

    I have visited both your pages and on the page where the arrow isn’t appear on screen. You appear to have set a margin-top of 700px and a margin-bottom of 20px. Can you remove this as it should be required and there is no similar CSS applied to the page where the arrows is appearing without any issue.

    Thanks,
    Danny

    #100469

    Pablo
    Participant

    The margin-top is 20px in that page.
    http://en.thecrazytravel.com/media/photos/
    https://drive.google.com/file/d/0BwyXmadE98SnWkNGQzQ3VWFMUG8/view?usp=sharing

    It is on the pages with 700px where the arrow shows up.

    #100530

    Pablo
    Participant

    I solved it adding a top padding of 300px to the arrow in all the pages. For some reason if there is no top padding (or at least with a “small” 20px padding), the arrow doesn’t show.

    #100620

    Ben Carlo
    Keymaster

    Hey Pablo,

    The animation starts when the module wrapper hits a certain point in the viewport, and that point is hardcoded. So even if the module is already visible on your screen, the animation didn’t start since it didn’t hit that certain point. The reason why it works if you add top margin/padding is because either of those add to the content area of the module.

    Hope this makes sense! 🙂

    Ben

    #100622

    Pablo
    Participant

    It does, thank you. 😉

    #100778

    Ben Carlo
    Keymaster

    Awesome, and no worries at all! Enjoy! 🙂

    Ben

    #110149

    Dave
    Participant

    Just checking is this feature in the latest BB 1.7.5 ?
    Thanks, Dave

    #110223

    Justin Busa
    Keymaster

    Hey Dave,

    This will be making it into the 1.8 update that we are currently working on finalizing. Stay tuned!

    Justin

    #110227

    Ben Carlo
    Keymaster

    Hey Dave,

    Sorry, a lot has been discussed on this thread. Which feature are you referring to? Also, feel free to check our Trello roadmap and see if it answers your question. 🙂
    https://trello.com/b/pqdibDqC/beaver-builder-roadmap

    Ben

Viewing 30 posts - 1 through 30 (of 31 total)

The forum ‘Beaver Builder Plugin’ is closed to new topics and replies.