Q: I have a repeating group where the element, in this case the creator's name is just being lost. And I've been told that's formatting, it has to do with the responsive engine potentially. And I don't have a responsive repeating group. So I'm not sure how to do a responsive repeating group. And then the other thing is just having white space on the margin here. Not sure how to get rid of that, but those are my two things.
Okay, yeah. Let's dive right into them. Can we go back into the Bubble editor and just can I get an idea of if you open up the element tree that's it, just pop everything open, all of the cascading menus just so I get an idea of how things are stored. Okay. And then can you just click on the responsive tab for me? Okay, so the page is built in the Bubble new response engine. Does that is that correct?
It seems to be.
Okay, can you click on the main body of the page please?
Main body?
Yeah.
And then click on layout.
Okay. Yeah. So the new response engine requires quite a shift in thinking. Were you familiar with the old basically drag drop stuff sat on the page exactly where you put it? Are you coming from having used that before?
Yeah, I'm rebuilding it. So yeah, that's how I build it before.
New Responsive Engine
Okay. So in the new response engine, that container layout fixed is the closest you can get to basically the old response vengeance, which is like a blank canvas, you put the elements where you want, but it makes zero use of all of the great features in the new response engine for consistent layouts. So there's kind of a going from thinking like this to the real shift in how to approach laying out the document. But I can walk you through that and you'll begin to see how to achieve a similar design. But I would say using the new responsive engine, which is obviously the way to go, that's where Bubble are pushing, it is the default on new apps now. But yeah, it does require a bit of a shift in thinking. Should we go through that?
Sure.
So if you change the container layout, everything's going to jump around your page, but we'll kind of work through each bit and get it into the right position. So if you change the container layout to column okay, so the new response engine relies on basically rows and columns to lay out with either placing margins, padding or gaps between elements that's how you get the spacing. You can also, of course, like a line to left, centre and right. So if you click on Group A now so that's the body of your page or like the content container, the next one up and then change that to that has a repeating group; let's go column again for that now.
So columns when we want stuff stacked on top of each other row is when we want stuff next to each other.
And so now with group A, if you click the horizontal alignment centre.
It puts it back into the middle of the page where you had it before was your Post the Job button, was that below the repeating group before?
It was just right here.
Okay.
Rows and Columns
So in order to this is part of the shift in thinking stuff needs to be contained. Elements need to be contained in groups in order to control where they sit. So if you hold Shift and click on both Post the Job and Browse Freelancers and then right click on them with them both selected and then group in a row.
Now this row is called Group C. If you look on the Inspector panel with a dark grey box. If we change it to make this element fixed width and then change it to 100. If you tick the box for fixed width. And then write 100 into width and then we'll change the units to percent.
Then it's going to it will fill the width of its container. This is kind of another of the shifts in thinking is as your elements in the page cascade down, the groups are in groups. You want to keep it as simple as possible. I like using 100% width because that means that if I was to put like a pixel value in there, then that can really mess up when I'm trying to make it responsive and fit to mobile. But if I make it 100%, then I'm allowing the parents to control its overall size. I'm kind of delegating the width of the page to one element, the container that you've got called Group A. Is that making a bit of sense?
Yeah, it reminds me of when I was doing CSS and how complicated it can get.
Okay, so one of the advantages of the New Response Engine is that they have some sort of really overly complex JavaScript engine to render the pages the old way. With the new Response engine, it's basically all flexbox and CSS, which means that if you do want to add your own CSS to your Bubble app, it is simpler to do so than the old way. And it's using more of like your standard web tech in order to lay out the page.
So if we adjust the min height on this group too, I would change that to zero because you want the height dictated by the content. And then if you want a bit of spacing between that and your repeating group, that's where you'd use a bottom margin so you could put like a 30 in the bottom margin or something like that. Brilliant.
Okay.
And then last of all, just to get the spacing of your elements, if you scroll back up on the Inspector and then you click the container alignment and then you click the one on the far right, you'll get your header on the left and your button on the right. That's how it was, right?
Yes.
Okay, so we're now going to kind of take a similar approach to repeating group which is we kind of need to destroy it and then build each bit up how you want it laid out.
So if you click on your repeating group that's it. So when you create a repeating group, the default is the sales container is fixed and we should change that to column because everything stacked on top each other in the cell.
Okay. And then I think we need to do a similar thing to your group which is like your cell container. Change that to column. I would then change the width of that to 100% so it fills up the cell of your repeating group.
Okay. And then if you scroll down to the bottom of the Inspector, right the way down, I think it's slightly off the screen, you get the padding, you might need to just drag it up. This is where you might want to put like a 30 padding all the way around the edge so that your elements aren't right on the side of the cell.
That's it. And then if we click on an individual element that is where we can tell it to go into the centre.
Yeah, that's it. Okay. And if I may just show you a really handy trick which again uses standard CSS. If you click, if you're on your group containing a load of elements, you can apply a gap between elements. So if you click on where it says that in the apply gap between elements, if you could select the container group freelancer and then if you were to put like 16 in there. Or 10, it means that you don't have to apply margin to every element if you want a uniform bit of spacing, just real time saver.
So can we preview that and just see if it's made a difference to that header label in your cell? Okay, so shall we try and have a look at what's going on with this header then? Your group parents freelance creators name, if you wouldn't mind just clicking on that piece of text and let's try and work out what's going on. The first bit of text in your repeating group yes. Because that's the one that's not showing up.
Okay. Layout. So is this one page lay? Can we have a look at your appearance? Okay. Parent groups freelancer. Can we just check that the parent group has got a data source? If you click on the parent group no, sorry, group freelancer is the one that okay.
Yes. They set as current cell.
Okay. Let's go back to that first text element in the cell. And sometimes text won't appear if the height is slightly off. The Bubble thinks it can't fit it in. So let's go back let's go into the layout. And then if we make the element fixed with 100%, can we just try that on the front end? Just preview it? What you're facing is a little bit peculiar, but this is all part of the debugging process.
Can we use the debugger inspector and just hover over that? So on the front end, if you click inspect in the bottom right. And then bring your mouse over where that text should be, click on it. Yeah, click that.
Okay. The text is empty. Okay. So that's suggesting that it isn't present in your database.
Because that was one of the first things that I suspected when I let's see, how do I pull.
Up the if you go app data. There we go. It doesn't show all the fields. If you just click on the edit pencil for a row, it will then show you all the fields for that entry.
So which field is it that should be appearing in the top.
I don't think it's showing it. That's funny.
Okay, can we check on the front end just to see what fields you have put to display in the text? Sorry, I didn't mean frontend in the UI editor design.
It's Creator's name.
OK that's going to be ender user.
Yeah.
Okay.
What could be going on here? Is that were you logged in as one of your test users when you created those entries?
It's part of the sign up flow. I thought the idea is, Zoom takes up so much of a screen real estate, let's see, the idea is...
If you click stop on the debugger big blue button on the right yeah. Then you can navigate around it's.
Like, I don't have a login button. That might be part of it. It's not good.
We could just check, if you don't mind. If we go back into the app data tab on the back end and then go onto your freelancers, and then if you open up the editor panel.
It was created by that email.
Yeah. Okay. And then I'm sure it was there, but let's just double check if you could click cancel or save and then we go back to users. Does the account with that email have a username? Yes, it does. Okay.
Bubble Privacy Rules
Right. I might not be on it, but I'm fairly certain if we go into privacy, we're going to see what the issue is. Yeah. Okay.
So for user, this is the default privacy setting, which I think I'm getting a sense your app needs to have something different in place, which is that your simplest privacy settings in Bubble are the current user can access what the current user creates, but other users can't access what other users create.
But in a doing some sort of job marketplace, you actually need there to be a bit more of a crossover and shared access to different bits of data.
Let's try this. I might be spot on with it. If you wouldn't mind ticking in the everyone else box, if you tick Name, which is on the far right.
Because at the moment, if you tick the box to the right of it, that's for freelancers. If you tick the box to the.
Right I got to turn off my light settings.
Sure.
If you tick the box to the right just so we can test this particular value and then you can go through and you can work out if more data needs to be made public.
Freelancer or next to Name or both.
No, the box for Name is the far right box. If there's something obscuring on your screen, that's not the one, it's the far right. There's a third column.
This is my third column. What's this thing here?
There's a box to the right of name.
Yeah, that's it there? Yeah. Oh, wow.
This is not showing up for me. I don't know who to complain to, but I do not see boxes as you might be able to see through my computer. I am not seeing anything to click.
Okay, that might be Zoom, it might be a browser extension, but it's showing for me. How bizarre. Can we try refreshing that on the frontend? Because I think now that you've made the name field public, if we can go back to your repeating group. Yeah, there you go.
That is definitely a niche problem. But as you can see, I definitely do not have Bubble displaying correctly, so I don't know who to talk to. Oh, my God. Thank you very much.
Do we have a time to actually, we've eliminated the white space. You've killed two birds with one. Well, I mean, the white space is here. This requires the same sort of formatting as we just did, so it's a good thing recorded because I'm going to have to go through that over and over again for each page, it seems.
Is there a way to sort of like cascade, sort of do like a super styling that sort of gets inherited?
Not for your container layouts. If you haven't already, make sure your head is a reusable element. That would save you some time.
My number one advice to the new response engine is there's like 1% of scenarios when you're going to go with fixed everything else. Use column or rows, sometimes align to parents, but just go with column and rows and that's how you make the most of the changes they put in place with the new engine.
My header is definitely a reusable element. Let me check on whether or not it's got a column setting. How are you doing for time? That's all right.
We can take a quick look at this. That's fine.
I am so sorry.
I'm not going to rush off.
This could be a column, so I.
Would say it's a row, because the most common styling is items sat next to each other.
Right.
Okay.
And then if you want, like, a box on the left and the box on the right, that's when you use parent containers to add some paddling. And that's it.
Okay and then another little trick would be you might want to put left and right padding to 20, so that when the page shrinks all the way down, your text isn't right on the edge of the page.
So in all the apps that I build, I always have a left and right padding of 20 from the edge of the page or 30.
Sure.
How's your header and your buttons? How is that meant to be laid out? And we'll just quickly.
This is a good layout. I like this. I just need to make this hug the left margin.
So that's on that page, changing that page's layout from fixed column.
I do have to go through each page. I can't do it through the header.
No, but having your header set up in row is going to help you at some point.
Okay. This is the login page. So I need to completely change this anyway. But let's see. So this will be column potentially.
Yeah.
All right. So I can go from here and work on reformatting, all of this. But this is not what I intended for my login. Not at all. Okay.
Okay.
Cool.
That was fantastic.