I’m not able to re-size/align a button with a another button. Here’s a screenshot:
As you can see, the Upload button, which is a File Uploader component, is not as wide as the Save button above it. I’ve tried setting the width property of the Upload button, but I can only make it smaller, not wider.
Any suggestions?
Here’s an example app that has some buttons and a FileLoader aligned nicely:
https://anvil.works/ide#clone:AN2NTZ4LFMR22G6H=ZXA7UY4XHO7ICHKXTJ7B2LQW
You can precisely control the width of buttons by putting them in ColumnPanels and setting the align attribute to full (it’s under Text in the Properties window). This makes them fill the entire cell of the ColumnPanel they’re in; then you can adjust the ColumnPanel such that the two buttons line up.
You can create the same effect for FileLoaders by adding the following CSS rule to theme.css in the Assets:
.anvil-role-primary-color.file-loader>label {
width: 100%;
}
This will affect all FileLoaders, so if you want to apply it to some FileLoaders and not others, you’ll need to create a custom Role and apply the new CSS rule to the anvil-role-foo.file-loader>label selector (assuming your role is named foo). You will also need to add this selector to the other two rules that use .anvil-role-primary-color.file-loader>label. In my example app, I’ve done this for a Role called upload-wide, so the selector is .anvil-role-upload-wide.file-loader>label.
(These screenshots might make that a bit clearer…)
Thanks Shaun! That did the trick!
