Placement and Styling of components with a label

General Q&A
1

Is there a way to position components differently when next to one another?

For example, I have two columns. Column one contains a drop down and column two contains a button. When there is no label on the drop down, the button and drop down are positioned perfectly. (the button does not extend down fully to the bottom of the drop down, but that is not as big of a concern.) See in the picture below.

Screen Shot 2021-01-27 at 3.58.51 PM
Screen Shot 2021-01-27 at 3.58.51 PM923×70 3.89 KB

However, if there is a label on the drop down, the button seems to be inline with the top of the component which is now a label.

Screen Shot 2021-01-27 at 3.54.11 PM
Screen Shot 2021-01-27 at 3.54.11 PM927×94 4.65 KB

This doesn’t break any functionality, however, it does disrupt the UX. Especially when they are side by side like our use case. Is there a way to fix this?

2

Hi Alex

The below use/workaround of an empty HTML component with a fixed height should provide the expected UX

   <columns>
        <column>
           <object-dropdown query="some_query" bind="some_var" label="Some label" empty-message="Your items will appear here" required="false" /> 
        </column>
        <column>
            <html show-fullscreen-button="false" height="20"/>
            <button label="Some Button" on-press="$:someFunction()" validate="false" style="solid" />
        </column>
    </columns>

All credit to @jwyrick for the original implementation of the empty html component for padding. You can see his post here

1 Like
3

Awesome. Thanks @tielman and @jwyrick ! Also, I’m assuming this is a temp fix? Thanks again!

4

Yes, we are working on component alignment and consistency

1 Like