Vertical slider required

Anvil Q&A
1

Apparently there is only a horizontal slider, but no vertical one…
That would be very welcome!

2

Maybe a vertical slider isn’t even required. You can just rotate your horizontal slider into a vertical slider.

You can do it by creating a CSS role. Anvil Docs | Roles

.anvil-role-vertical-slider {
  transform: rotate(90deg);
}
2 Likes
3

It is not clear to me how to apply this…

4

Your statement here does not make it easy to help you,unfortunately.

Please let us know what you tried, with code, and where the docs are unclear.

Try to reduce the guessing that folks have to do and you will get excellent assistance.

5

Looking at the help file, it appears that the CSS code should be set in an Asset. so I have done that in the standard-page.html asset. But nothing changes in the editor or in the slider custom component…

6

Adding and applying a role is a three step process:

  1. Add the styling to the Native Libraries section of your app (that’s like typing it into the head section of the HTML page). You could add straight to standard-page.html or to theme.css, but I like to keep those as is so I can update them easily if Anvil fixes bugs or adds features in them.

  2. Create the role. The docs in the help show a screenshot of doing this

  3. Apply the role to the component. You do that by clicking on the slider and scrolling in its properties pane until you see where you can apply a role

7
  1. I created the role ‘vertical-slider’, limited to component ‘Slider’.
    But in the design view of my Main form I get this error:
    Cannot nest “undefined.Slider” inside itself

So I cannot continue with step 3…

8

It’s likely you’ve done something off, but without seeing either sample code or a clone link, it’s hard to say what that might be. A clone link might be best, since the issue might be in code, or in the designer.

9

Here’s a clone link: Anvil | Login

10
  1. There is no head section in the HTML page. Should I add it?
11

Taking the issues one at a time:

Cannot nest “undefined.Slider” inside itself

You’ve created a form called Slider, and dragged an instance of the form onto itself. That error message it telling you you can’t do that. I don’t know what you were trying to accomplish with that, but you can’t have a form that contains itself. That would create an infinite recursion of forms.

Delete the nested Slider form in the Slider form and that message will go away.

Role Styling

You did not put the role styling into the standard-page.html correctly. The styling is CSS, which must go between <style> and </style> tags. In any case, it should really be removed from the html file and put into the Native Libraries section, e.g.:

<style>
.anvil-role-vertical-slider {
  transform: rotate(90deg);
}
</style>

However, role styling is only useful for applying to Anvil components.

Styling Custom HTML Forms

What you’re doing with the Slider form is using custom HTML to create a slider. You should be instead changing the styling in your custom HTML in your Slider form to rotate the slider. I can’t help you with making that work, because I’m rubbish at CSS.

2 Likes