RC3 - buttons overlapping on mobile in flexbox

Beta
#1

Hi I updated a test site from beta 7 to RC3 and got the following overlapping buttons on mobile view

^Hmmm uploading the screenshot misses the ‘important’ bit. edit: reloaded an edited version of the screenshot

login details below

#2

Hi Scot,

We actually did this on purpose (in RC1 I believe) to ensure that if you set 50% + 50% column sizes that it doesn’t automatically push the columns onto a new row when the content is too large. See the screenshot below:

The highlighted area represents the column dimensions which are not allowed to exceed 50%. That said, the buttons are designed to not overflow the column as much as possible. The real issue here is that the email address is so long and it doesn’t break.

For example:

That is what happens when you add this CSS to the secondary button text: word-break: break-all. Now it can flow downwards and respect the 50% dimension again. That’s probably not what you want to do though.

The easiest thing would be making it 100% at the XS breakpoint. You could also add Row element CSS to override the column layout when it gets down to around 450px like this:

@media (max-width: 450px) {
  .e30-20 .x-col {
    flex-basis: 100%!important; 
  }
}

Or if you really want that 50/50 look You could hide the email at lower screen sizes by using something like this in the button’s element CSS:

@media (max-width: 450px) {
    $el .x-anchor-text-secondary {
        display:none!important;
    }
}

Hopefully that helps give you some ideas on how to solve this.

#3

Ahh ok, that makes sense… although ironically it was the pushing to a new row was exactly what I wanted

I’ll set the columns to one rather than two for the screen sizes

Thanks for the help

#4

Sounds good! Yeah, I know - it’s handy in some situations to just let it wrap like that. Was checking with some notes I had from a conversation with Kory and realized this would also do it:

$el .x-col {
  min-width: auto;
  min-height: auto;
}

Put that in the Row’s Element CSS and it will start wrapping again. We just decided that the native behavior should be predictable in that the column sizes always match your Row’s Layout configuration.

#5

Hey @scotbaston,

Just saw this thread. If I’m understanding what you’re wanting to do, you wish for the buttons to respond to their own line once there is no more space for them, correct? You should be able to do this without any sort of custom CSS. I tried the links you provided above, but cannot seem to access them. If you use explicit widths on your column layouts, you will need to make sure to break it manually at a specific breakpoint to 100% so that they can fill up all space. Alternately, if you want the columns to “auto-respond” to the content of the buttons and break when they need to, you can do this:

Placing the buttons in a nested Row with 2 Columns, with a custom value of auto set as the Layout for each breakpoint. That will ensure that the buttons line up in a row as long as they can, but as soon as they would start to collide into one another:

Additionally, you can get a 50 / 50 look by checking the Grow checkbox on the nested row to ensure that your Columns fill all available space in addition to making the Button’s width 100%. This will give you:

And then since they’re “auto-responding” using the Layout technique mentioned above, they will still do this whenever they run out of room:

Hopefully this helps to clear things up. If I’m not directly addressing the problem or missed anything, please let me know and I’ll be happy to continue chiming in to help you out in achieving the look you want.

#6

@alexander & @kory, Much Thanks to you both…

Some really good suggestions in your answers and I’ll have a play to see what suits my needs best. The daft thing is I was not even aware of the auto option in the Layout. That could be really useful

@kory, the reason you couldn’t log in was that was a staging area that no longer exists (been doing some server clean up) but I’ll probably be re-instating the staging version for RC4+

Thanks again, really appreciate the detailed responses

#7

You’re most welcome Scot! Hope you were able to find a good path forward here. Let us know if you had any other questions.