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
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?
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.