I’m trying to do the first tutorial, which is a Form Builder.
I’m on Step 5, and the input components are not landing where I drag them. For example, I try to drag a text box next to the Prompt name, but the text box lands at the bottom of the form, or in the blue strip at the top.
I had similar problems in earlier Steps, but somehow they stopped happening after a few tries. Why might something not land where I think I’m dragging it?
Welcome to the Forum!
When you drag an widget onto a Form, the IDE will display where it “plans” to land the new widget. Before letting go, drag your widget around, and see the various places that light up. This should remove a lot of surprise about where items end up.
That said, this is a widely-recognized soft spot in the IDE. You’re far from alone.
I often have difficulty getting things to land where I want them on the first try. Sometimes I have to be very precise. Sometimes the IDE will simply not drop them where I want them, and I have to drop them alongside where I want them, and then drag the neighboring elements around to get the final arrangement. I use “Undo” a lot.
There is an outstanding request to allow elements to be dragged around inside the Form Outline drop-down, instead. Feel free to “like” that request, or any others that you feel will improve the developer experience. In effect, that’s your “vote” on the request, and Anvil does pay attention to those votes.
Thanks for your sympathetic reply. While I’m dragging the element around, I see a green box, which I imagine is meant to show me where it’s going to land. But when I let go, it lands somewhere else.
Here’s an example. I grab a TextBox from the Toolbox and drag it over to the Feedback Form. See where the green box is?
But when I release the mouse, the TextBox lands at the top of the form in the blue title bar. Or sometimes it lands at the bottom of the form. It’s like there’s no room on the right side of the form.
I notice that, though the field labels are on the left, the boxes containing them extend all the way to the right. Could that be the problem? I don’t see where I can resize the boxes.
P.S. I made more than one screenshot to illustrate what I’m talking about, but new users are only allowed to share one screenshot at a time. sigh
I should say that I’m using Firefox for Windows. Does the IDE work better on another browser?
Generally, it works the same on all supported browsers, including Firefox.
Dropping behavior will depend on what kind of container you’re dropping into.
For example, if it’s a LinearPanel, which arranges all items into a vertical line of full-width widgets, then each new item will become a new full-width widget.
If you’re dropping into a FlowPanel, then widgets are packed left-to-right, with a small amount of padding between them.
Check out the Documentation for more in-depth options, but in general, you can usually get what you want by selecting the right kind of container – the one which lays out its contents the way you want – and dropping it onto the Form first. Then drop other widgets inside those containers.
How do I change the panel type? This is weird for me, because I’m just following instructions in the tutorial. It doesn’t seem like I should have backed myself into a corner…
When I drag in the same sort of situation as that tutorial, it’s not the green outline that’s important, it’s the blue lines that show where the component will drop:
I am currently finding Chrome on Linux is better than Firefox for IDE forms, though this does change from time to time. I find myself flitting between them every few months.
Might just be a Linux peculiarity, though.
And the Feature Request @p.colbert referred to might be this one of mine :
Please like it - you never know …
That’s the one! Editing an outline gives you precision you can’t get anywhere else.
I’ve even built some more complex forms programmatically. I started to build a local app that created the YAML files, but managed to corrupt a couple of projects when pushing the changes, so I kind of gave up on that.
It’s real risky to edit a form’s .yaml file with just a plain text editor, that’s for sure. Indentation’s critical.
Ideally, one should use a dedicated YAML editor. That would at least preserve the structure. Even then, the YAML schema isn’t public, so it’s still easy to enter garbage without knowing it.
I am a PyCharm junkie.
I clone all my apps to my computer, and in the very rare cases I need to edit the yaml, the PyCharm yaml editor is very helpful. It will tell you if there are indentation problems, and at the bottom you see where you are:
This is going off topic a bit, but since Anvil added the github feature, I can’t see a way to download the app now?
Am I just being blind? Or do we have to upload to github first then pull locally?
Ignore me. It’s in the three-dots menu!
@jshaffstall : Unfortunately I don’t see any blue lines. I have tried Firefox, Edge, and Chrome for Windows. What are you using?
Well, I started over and now I see the blue lines. Not sure what I did wrong the first time. Maybe I didn’t use a Card as instructed in the tutorial…
Chrome for Windows here, so I’m not sure what the difference was. Glad you’re seeing them now, at least!
Hi All,
Just to say, we’re aware of this at Anvil HQ, we’re working on it, and we have some updates on the way. Watch this space!
Ryan
Great to hear! After I started over, I got all the way through Tutorial #1 in an hour or two, which was quite gratifying.
Bonus question: it seems I needed to put a “card” in the interface before I overlaid the input prompt and text-entry box. What is this “card”?
