Help with the styling and the editor

[mghatiya]

Hi All,

I have tried to read up manuals, documentation, classes, tutorial videos and forum posts, but there are a few things I am not able to wrap my head around. Would appreciate if someone could help.

Styling issues:

1. In the individual elements I don’t see a way to specify x,y, w, h values in percentages.

2. When an element is invisible, and it shows up, I want it to come above existing elements (tool tip behaviour) instead of pushing the contents down. However, I am not being able to do so, especially when this tool tip is to come above a repeating group.

3. Similarly, I added an item to a floating group to experiment. Not only that element stopped showing, and now I was not even able to take that element out of the floating group. I had to ultimately create another element from scratch. What went wrong here?

4. There is a minimum width that I can specify to an element. However, I want that element to be reduced in size only when I don’t have sufficient screen in the space. Right now the moment I start reducing screen width, it reduces in size, even though there is sufficient space at that width.

5. The “alignment options” that show up for an element in “responsive” tab are not really honoured. Not sure what do they do. I put an element as “Centre aligned”, but it still shows up as left aligned in the screen.

6. Repeatable group put to “centre horizontally” in the page. But it doesn’t show in centre. It’s quite off.

I checked in the debugger. Attaching screenshot of how it shows in debugger. Some extra space is being considered in it for reasons unknown to me. Funny thing is it was working few minutes ago, and now it is not while I made no change to this RG. I did move some other elements around though.

In editor:

In preview:

Editor issues:

1. I would like to know if there is a way to add an element to a Repeatable Group easily. The way I know is to drag an element on top of the repeatable group. But that doesn’t work often. One needs to bring it at some exact spot. And even if it works, the moment I try to move around that element within the Repeatable group to fix its position, the element comes out of Repeatable Group and then I am not able to put it back again.

2. Sometimes I need Repeatable Group to be bit smaller, say I want to show a series of icons in it. Now playing with it becomes really difficult due to its size. Is there an option to zoom?

3. I want to sometimes hold random half done elements in some temp page. But Bubble won’t allow me to do that telling there are some errors. Is there a way I can tell that this page is to be ignored? That way I can keep some elements in it and Bubble would ignore errors in it?

4. Also, I don’t know whether I am looking at right place or not, but I am unable to locate simple documentation. e.g. In whole of the manual/documentation available on https://manual.bubble.io/ I couldn’t locate answers to simple questions like “What is a Floating Group, how to create it, how to add elements to it”. Where do I get answers to such questions?

Thanks,
Mukesh

[rmorgan]

Hi Mukesh!

I’m gonna let someone else jump in with the styling questions, as a lot of the work I’ve done in responsive mode has been trial and error. I can tell you I share some of your frustrations; I find responsive mode pretty finicky.

First, try the full reference for deeper explanations/documentation here. You can search for particular terms, or, while in the editor, you can hover over many items to see a link to the associated reference entry.

As far as moving items around while in repeating groups, I often use the arrow keys on my keyboard. Hold shift while tapping/holding the arrow keys to move faster. The object will always stay in its group when you move it this way. When dragging an object, you should see a red line or box when its target is inside a repeating group (this doesn’t seem to work 100% of the time, which is why I use the keyboard a lot).

I don’t think there’s a way to leave elements half-made and still deploy your site. I imagine this is a failsafe to keep your app functional for users. Take advantage of the preview feature to check your work along the way. You’ll find you don’t need to deploy as often.

There isn’t a way to zoom in and out of the editor, although that’s on my wishlist for sure. When sizing objects within a few pixels, I’ll often get close by dragging and then fine-tune by typing a width or height in the object inspector.

Hope this helps!

[mghatiya]

Thanks Morgan.

I do use keyboard to move elements within the RG, yes. But with keyboard it moves a lot on one keystroke itself. I don’t know how to make it move minimal.

How do you move elements out of RG? And the red line thing for moving element in, doesn’t always work as you said. How do you use keyboard to put an element inside RG?

Btw, I found a way to zoom. Not as nifty as other tools, but at least it is there.

[rmorgan]

Wow, I never would’ve looked for zoom in that menu. That’s going to be really helpful, thanks!

When I use the arrow keys to move an object, it moves one pixel at a time. If that’s not what’s happening in your case, perhaps it could be a bug? Or maybe (I can’t imagine why) it’s a platform/browser issue? I’m using Safari on a Mac.

As long as you’re dragging the element on top of the usable area inside a repeating group, it shouldn’t matter whether the red lines shows up or not. It’s just a lot harder to tell when the red lines don’t appear. I suppose you could add a border to the group to help delineate what area to drag to. The whole object you’re adding has to be inside the repeating group; no edges or corners can be outside it.

Moving elements outside of a repeating group is just the opposite; drag the item so that it’s outside (or even not entirely inside) the RG. As far as I know, you can only do this by dragging. Using the keyboard keeps the object inside whatever group it’s in.

Becca