Standard Horizontal Spacer Component

Pretty simple, just make the exact same functionality as the existing spacer component, only for horizontal space :slight_smile:

The existing spacer component does work both horizontally and vertically.

Have you tried to use that one?

Yes, and it doesn’t really function the way I intend, I guess I should be more specific.

Currently you can only drag adjust the vertical spacing of it, at least to my knowledge.

The horizontal size is not set with a number. In order to adjust the horizontal size you drag the separator bar on the container, just like you do for any other component:

Humm… must be at a weird zoom level or something, because I’m not able to drag the separator bar…

Regardless, I’d like horizontal space to be the same way the “Height” property works, both visually with the dragging, and also having the option to set it in the designer the same way.

Good luck with the feature request :slight_smile:

That’s not how Anvil works.
The width of the components are (almost) always set as the percentage of the size of their container because the pages are responsive and the width of each component changes when the size of the window changes.
Setting the width to a hard value would likely create an undesired result when the size of the window changes.

The vertical bars are in the container, not in the spacer or any other component. In order to see them you need to click on the container, not on the component.
Dragging is constrained to snap to a large grid. If you press ctrl while you drag, you make the snapping grid smaller.

Provided that you use containers like Flow Panel or XY Panel which specialise in setting width easily, you will be able to set both height and width of spacer.

That’s a good thought, but I can’t put the XYPanel in a ColumnPanel :frowning:

Why? Is it because of formatting problems with XY Panel?

By the way you can also using the padding property of CSS instead of spacers.

import anvil.js 

dom_node = anvil.js.get_dom_node(<your component>) 


dom_node.style.paddingLeft="50px" #change it to whatever value you want 

You can mention right padding with same syntax.

Also, I think it will be really great if Anvil can make padding a default property of a component. I doubt it will be much difficult. Many other properties like border radius can be similar added as well.

1 Like