Button Text Alignment

Beta
#1

I experimented with a column and button to replicate the ‘equal height columns’ layout from Michael.

  1. Add empty section
  2. Make it one column
  3. Drop in a button
  4. Turn on column flex box (can we have this by default please)
  5. Make the column horizontal stretch, so the button goes wide
  6. Use text alignment
  7. Sometimes it works
  8. Eventually it stops working
  9. I tried making a repeatable set of steps, but there’s something I can’t figure out breaking the UI

Eventually no matter whether you use flex controls or text alignment the button becomes unresponsive.

#2

I will try to recreate this now.

Remember, all buttons in X or X Pro have display: block; css. So it comes with 100% width and it inherit this from parent element (column). If you switch it to display: inline-block; with Custom css (customize):

$el {
  display: inline-block !important;
}

it will have width: auto; and will stretch by text width. Aligning it to center in default column layout (table-cell) can be done by adding margin: auto; so it will looks like this:

$el {
  display: inline-block !important;
  margin: auto !important;
}

to align element to middle in default column layout (not flexbox) can be done with Marginless Columns Option (not available right now) with vertical-align: middle; css in column customize options (css):

$el {
  vertical-align: middle !important;
}
#3

making column horizontal strech not making button goes wide in my case…

#4

Howdy @theotcspace,

Thanks for writing in and for testing things out! I’m not sure I’m quite following what your desired goal is here. You say the text alignment eventually stops working? Is there any way you could provide a quick video of what you’re trying to do?

One thing to remember is that the Button Element uses flexbox to position the content within itself. The content within the button is “placed” to a particular spot (i.e. Start, Center, End, et cetera) and then from that placement, it can be aligned. And text alignment will only be visible if you have wrapping text. For example, this button is text aligned left, but it appears “centered” because its flexbox positioning is Center / Center:

This is because the text is not long enough to wrap, so you won’t see any sort of text alignment. However, if I increase the amount of text, you will see that it now appears to be aligned to the left:

The text is now long enough to wrap, so even though it’s placed Center / Center with flexbox, it is filling all space and wrapping, allowing text alignment to visually take effect.

@Georgich, thanks for popping in to help out! Just wanted to clarify that all v2 Buttons in X and Pro use inline-flex as their display. And there is no need for using the classic row / columns and their “Marginless Column” options now, as with the new row you can define gaps directly on the row and make them 0px to be “marginless,” and then using the new flexbox controls on the Column you can easily center things vertically or position things just about wherever you want.

Hopefully that helps!

#5

Hi,

I’ve now got Beta 2 and a section/row/column/button where the column vertical alignment settings doesn’t respond for me.

In Columns 1 & 2, the vertical alignment flex box settings have no effect. I tried to align the contents of the column to the bottom/end and can’t achieve it. I’ve tried this in Safari and Chrome.

Secondly: Trying to select any element on the page takes so many clicks, this beta is unusable. On Safari and Chrome, one click almost never activates the element you want. Multiple clicks are needed to get the editor to respond.

#6

Hi @theotcspace,

Are you seeing any errors in the javascript console? I’ve tried reproducing the layout described in your text annotations and they’re working correctly for me. It could be that an error is blocking certain changes from taking place.

As for the multiple clicks issue, it is because the blue observer outline is not showing on the correct element? Like you have to move it around a bit for the right one to highlight? Just wanted to make sure since this is something we’ve confirmed in Safari.

#8

Chrome: On load

#9

Here’s a video:

#10

Or maybe this link: https://vimeo.com/350790389/63460a3580

#11

Thanks for the video! That definitely helps. It looks like the “multiple clicks” issue is caused by a delay of the observer appearing. It doesn’t honor the click until after the blue (or green) highlight border appears. I don’t know what’s slowing that down at the moment, but I’ll see what we can do about it. If I can’t speed up the border appearing, perhaps the click could be honored immediately.

I don’t think that JS error (TypeError) is relevant. Looks like it might be coming from another plugin.

I’m also still not able to reproduce “Align Vertical” having no effect. Would this happen to be a live site I could log in and take a look at? I’m wondering if there’s some combination of things adding up to create the problem. If this is possible, could you add credentials in a secure note? Thanks!

#12

It’s a dev site so feel free to play around. The video came from a section on the home page. Bill.

#13

Thanks Bill! Just wanted to confirm I’ve seen this and the credentials are working for me. I’ve not had a chance to take a closer look today, but I’ll post an update as soon as I can.

#14

Hi Bill,

Sorry for the delay getting back to you here. I’ve tried to reproduce your look on a test page (see secure note) since I couldn’t find an existing one. It looks like you might have the Row’s alignment to end and there are heights on the columns.

Everything seems to be working as intended. When you turn Flexbox Layout on for columns, this only applies to the elements inside the column itself. Sometimes they might not do anything if the column isn’t tall enough since they mostly determine how to align when there is free space available.

I added another section below on that page showing some columns centered in the row without needing to enable the Flexbox Layout on the Column itself.

Let me know if this makes sense, or if there’s something I’m missing. Thanks!

P.S. I’ve confirmed that clicking issue to be a performance issue in Safari - looking into it.

#15

ok - now I get it. I was using padding to make the columns bigger, but then I used a min-height and it all started working. Woot!

#16

Ok great! Thanks for confirming. Glad to hear that’s working for you :slight_smile: