• State Not Answered
  • +2 person also asked this people also asked this
  • Replies 8 replies
  • Subscribers 12 subscribers
  • Views 7225 views
  • Users 0 members are here
Related Discussions
Home » Discussions » User Interface

Align Button Array Layout w/ Dropdown

kellybilodeau

I have an interface that has filters and buttons at the top. I cannot seem to get the buttons and dropdowns to vertically align. They are just slightly off even though the button array layout has marginBelow set to NONE.

I've read the button array layout documentation: https://docs.appian.com/suite/help/19.1/Button_Array_Layout.html

The last section, Button with no margin below, you can see that the text box and button are vertically aligned perfectly. BUT they stick both in a side by side layout. I have tried this with my interface and although placing the button in a side by side layout does align it correctly, it loses the integrity of the column layout and then the buttons overlap:

Above, CLEAR FILTERS is now in a side by side layout and is aligned with dropdowns (EDIT SELECTION is not in side by side and is therefore not aligned), but the buttons overlap.

It seems like there is this whitespace on the top and bottom of the button, but not on the dropdown:

Thanks in advance for any insight!

  Discussion posts and replies are publicly visible

Parents
  • 0
    Appian Employee

    Using a side by side layout bottom aligned for the dropdown and button together should do the trick  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"
                  )
                }
              )
            )
          }
        )
      }
    )
  }
)

  • 0 in reply to Domen Jemec

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

Reply Children
No Data

© 2024 Appian. All rights reserved.