I’m having trouble with the dropdown width. Although the “full_width_row” property is false, it stretches to full width. If I change the text align to “center” (instead of full) the width of the underline shrinks to where I want it but the upside down triangle remains on the far right (which seems like a bug).
Here’s align=“full”:
Here’s align=“center”:
Hrm, that doesn’t look right. Can you give us (perhaps by PM) a “copy this app” link for an app that displays this issue?
The behaviour you describe with center and right is indeed a bug in Material Design. We’ve fixed that and it’ll be live for new Material Design apps sometime in the next 48 hours.
For existing Material Design apps, you can make a quick change to theme.css in Assets:
.anvil-dropdown:before {
needs to change to:
.anvil-dropdown form:before {
Normally, components don’t take the full page up, there’s a margin around them to make the app more columnated. full_width_row allows components within a ColumnPanel to fill the entire screen.
full alignment for DropDowns means the text and underline of the DropDown fills the entire width of the DropDown component. Contrast this with center alignment, which makes the text and underline be as wide as the widest element of items, regardless of how big the DropDown component is.
https://anvil.works/build#clone:P5D7V4OGAR7U55XG=M76K6X5655YA2QGNMRZES6L3
Another solution would be to put the DrownDown in a FlowPanel.
FlowPanels allow components to be ‘whatever size they want to be’ whereas ColumnPanels constrain them to fill the column they’re in. Of course, you can put the FlowPanel inside a ColumnPanel if you want to align it with other components.
For existing Material Design apps, you can make a quick change to
theme.cssin Assets:
Shaun, for those of us with existing Material Design apps, should we rely on posts such as above to maintain our theme.css? Or should we from time to time simply create a new app, get theme.css from the new app, and then incorporate it into our existing app?
@PeterJ that’s the downside of having completely customisable themes. We can’t automatically merge updates with a theme that may have a user’s customisations in it.
So if you find a styling issue in a relatively old app, chances are it’s been fixed - see if you can reproduce it in a new app and check the Forums for a solution.
A system of theme versioning might make this easier, although if you customise your theme you would still need to merge your custom version with the latest official version.
Gotcha, thanks Shaun.
