Align Button Array Layout w/ Dropdown

RE: Align Button Array Layout w/ Dropdown

kellybilodeau — Wed, 10 Apr 2019 17:27:58 GMT

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!!

RE: Align Button Array Layout w/ Dropdown

kellybilodeau — Wed, 10 Apr 2019 17:10:50 GMT

Chrome

RE: Align Button Array Layout w/ Dropdown

kellybilodeau — Wed, 10 Apr 2019 17:03:46 GMT

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.

RE: Align Button Array Layout w/ Dropdown

catalinp0001 — Wed, 10 Apr 2019 14:55:04 GMT

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

RE: Align Button Array Layout w/ Dropdown

Domen Jemec — Wed, 10 Apr 2019 06:56:43 GMT

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"
                  )
                }
              )
            )
          }
        )
      }
    )
  }
)

RE: Align Button Array Layout w/ Dropdown

davel001150 — Thu, 04 Apr 2019 18:29:03 GMT

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?

RE: Align Button Array Layout w/ Dropdown

kellybilodeau — Wed, 03 Apr 2019 15:39:07 GMT

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!

RE: Align Button Array Layout w/ Dropdown

Stewart Burchell — Wed, 03 Apr 2019 15:28:33 GMT

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.