Align Button Array Layout w/ Dropdown

Hi Kelly

I tried this out and I see what you mean. It's a fraction off being lined up along the bottom edge, almost as if the button were ever so slightly too small! No insight into this I'm afraid...only a possible alternative: do the buttons have to be buttons? There's a wealth of images that you can attach button-like functionality to by adding links to them.

We are trying to establish some design consistency across apps so we'd like to keep the buttons. It's such a small alignment issue so it's not critical. I was just curious if I had been doing something wrong or if there was a workaround. Thanks for your response! 

Have you tried messing with the size of the buttons or the position of the empty labels?  Have you tried using the side-by-side layout below the column layout and using that in lieu of the columns?  Is this anything that an unlabeled, empty, read-only text field (Appian white space) would help with?  Would placing it inside it's own unlabled sectionLayout help?

Using a side by side layout bottom aligned for the dropdown and button together should do the trick kellybilodeau but to preserve the integrity consider using a different sideBySideItem() per button (see example below).  If your column is locked to a specific width, with multiple buttons, you'll likely see some wrapping or overlap. 

Example:

a!columnsLayout(
  columns: {
    a!columnLayout(
      contents:{
        a!sideBySideLayout(
          alignVertical: "BOTTOM",
          items: {
            a!sideBySideItem(
              width: "MINIMIZE",
              item: a!dropdownField(
                label: "Select",
                placeholderLabel: "None"
              )
            ),
            a!sideBySideItem(
              width: "MINIMIZE",
              item: a!buttonArrayLayout(
                marginBelow: "NONE",
                align: "START",
                buttons: {
                  a!buttonWidget(
                    label: "Check Availability",
                    size: "SMALL",
                    style: "SECONDARY"
                  )
                }
              )
            ),
            a!sideBySideItem(
              width: "MINIMIZE",
              item: a!buttonArrayLayout(
                marginBelow: "NONE",
                align: "START",
                buttons: {
                  a!buttonWidget(
                    label: "Edit Selection",
                    size: "SMALL",
                    style: "SECONDARY"
                  )
                }
              )
            )
          }
        )
      }
    )
  }
)

@kellybilodeau I saw it in IE to have this behavior, what browser are using?

I tried some of these before posting and I just tried them again, here's what I've found:

"Have you tried messing with the size of the buttons or the position of the empty labels?"

SIZE - Still not quite aligned

 Small:      Standard:       Large: 

POSITIONS - I am not sure what you mean here, but the label on the button is not empty (Clear Filter) and the dropdown also has a label. I tried changing the position of the dropdown label and still no luck. I know it's hard to see in the images. Let me know if this is not what you meant.

Hidden: 

Justified: 

Adjacent: 

Above: 

"Have you tried using the side-by-side layout below the column layout and using that in lieu of the columns?"

Using side-by-side layout causes the buttons to overlap at some point. Each item is its own side by side item and the width is set to automatically distribute.

I also played with setting relative widths, which I got to work, only issue I see is that the items don't snap/reconfigure when you resize as they would if you used columns. When I used columns the buttons would move to the next line. So I would rather deal with the misaligned buttons than a squished layout.

side-by-side layout: 

columns: 

"Is this anything that an unlabeled, empty, read-only text field (Appian white space) would help with?"

Not sure if this is what you meant, but I don't see that having an impact:

"Would placing it inside it's own unlabled sectionLayout help?"

Now I have put the button layout inside a section layout, but still not aligned:

Thanks for your suggestions. I really appreciate it.

Chrome

After taking your code and adding additional a!columnLayout items for the other filters ( note: columns are NOT locked to a specific width):

I think the buttons just don't play nice inside a side by side layout. Would rather have the misalignment than overlapping.

Thank you!!