Debugging the Responsive engine & Privacy Rules in Bubble

Introduction to Bubble Coaching Sessions

Hi everyone, this video features one of our free 15-minute Bubble coaching sessions, available to all our members at PlanetNoCode.com. In this session, we troubleshoot why a text element isn't visible on the front end. In the process, we worked to update the page to the new responsive engine, moving from fixed to rows and columns, and examine Bubble's data privacy rules. You can book your 15 minutes of Bubble coaching at PlanetNoCode.com.

Identifying the Issue

I have a repeating group where the element, in this case, the creator's name, is just being lost. I've been told that's formatting. It has to do with the responsive engine potentially. I don't have a responsive repeating group, so I'm not sure how to do a responsive repeating group. 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.

Diving into the Bubble Editor

Okay, yeah, let's dive right into them. Can we go back into the Bubble editor? If you open up the element tree, that's it. Just pop everything open with 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 new response engine. Does that mean that correct? It seems to be.

Understanding the New Responsive Engine

Okay, can you click on the main body of the page, please? New 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, it's 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 built it before.

Shifting from Fixed Layout to Responsive Design

Okay, so in the new responsive engine, that container layout fixed is the closest you can get to basically the old response engine, which is like a blank canvas, you put the elements where you want, but it makes basically zero use of all of the great features in the new response engine for consistent layouts. So there is there's kind of a going from thinking like this to there's a 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 you using the new response engine, which is obviously the way to go. That's where Bubble were pushing it is the default on new apps now. But yeah, it doesn't require a bit of a shift in thinking. Should we go through that?

Implementing Rows and Columns

Sure. So if you change the container, let 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 layouts to column. Okay, so the new response engine relies on basically rows and columns to layout with either placing margins padding or gap between gaps between elements. That's how you get the spacing. You can also of course like align to the left center and right.

Adjusting Group Layouts

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. Yeah, and then horizontal. Yeah, and then change that to so that has a repeating group. Let's just 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 a group A, if you click the horizontal alignment center, it puts it back into the middle of the page where you had it before.

Organizing Elements in Groups

And was your post the job button was that below the repeating group before? It was just right, right here. Okay, so in order to this is part of the shift and thinking stuff needs to be contained in 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 with the both selected. Yeah, and then group in a row.

Setting Element Widths

Okay, now in the so this this row is called group C. If you look on the inspector panel, the dark gray box, if we change it to make this element fixed with and then change it to 100. If you take 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 ships in thinking is as your like elements in the page cascade down the groups have been groups. You want to keep it as simple as possible.

Using Percentage Widths for Responsiveness

I like using the 100% width because that means that if I was to put like a pixel value in there, then that can really mess up with when I'm trying to make it responsive and fit to mobile. But if I make it 100% then I'm allowing the parent to control its overall size and I'm kind of debt delegating the width of the page to one elements the container that you've got called group a start making a bit of sense.

Comparing to CSS

Yeah, I mean, it's it's it's reminds me of my when I was doing CSS and and how complicated it can get.

Understanding the New Responsive Engine's Advantages

Okay, so so one of the advantages of the new response engine is that it they had some sort of really I think overly complex JavaScript engine to render the pages the old way with the new response. It's basically all flex box 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.

Adjusting Element Heights and Margins

So if we adjust the the min height on this group, too. So I'd remove I would change that to zero because you want the height dictated by the content. Just put zero in that. Yep. And and then if you want a bit of space in 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.

Aligning Elements within Containers

Okay. And then last of all, it just to get the spacing of your elements, if you scroll back up on the inspector, and then you click the container alignment in the in the yeah, 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.

Restructuring the Repeating Group

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, the actual Yep, that's it. Okay, so when you create a repeating group, the default is the cells contain it fixed is fixed. And we should change that to column because everything's stacked on top of each other in the cell.

Configuring Cell Containers

Okay. And then I think we need to do a similar thing to your group, which is like your cell container. Yep. So 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 to padding, you might just drag it up. Yeah. And so 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.

Centering Elements within Cells

That's it. And then if we click on an individual element, that is where we can tell it to go into the center. Yeah, that's it. Okay. And if I may just show you a really handy trick, which again, uses like standard CSS. If you have a, 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 a gap between elements that no, sorry, the, if you could select the container, group freelancer, and then, yeah, and then if you were to put like 16 in there, or 10, it means that you don't have to apply a margin to every element if you want a uniform bit of spacing, just real time saver.

Previewing Changes and Debugging

So can we preview that and just see if it's made a difference to that header label in your cell. Okay. So let's show it shall we try and have a look at what's going on with this header then your group parents freelance creator's name. If you wouldn't mind just clicking on that piece of text, and let's try and work out what's going on. You're the first bit of text in your repeating group. Yes, because that's the one that's not showing up.

Checking Element Visibility Settings

Okay, now so is visible on page load. Can we have a look at your appearance. Okay, parent groups, free answer. 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 it's labeled as. Okay, yeah, so they set his current cell. Okay. Let's go back to that first tap text element in the cell. And sometimes text won't appear if the height is slightly off it Bubble things that can't fit in. So let's go back, let's go on to layout. And then if we make the element fixed with 100%.

Using the Debugger to Identify Issues

Okay, can we just try that on the front end, just preview it as 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 and click on it. Yeah, click that. Okay, the text is empty. Okay, so that's suggesting that it isn't present in your database.

Examining Database Entries

So could you go ahead. Because that was one of the first things that I suspected when I let's see, how do I pull up the. So if you go app data. So that was a. And that doesn't show all the fields. You can if you just click on the edit pencil for a row, it will then show you all the fields for that entry. Yeah. So which field is it that should be appearing in the top? I don't think it's showing it. That's funny.

Checking Field Display Settings

So it's okay. Can we check on the front end just to see what field you have put to display in the text? Sorry, in the in the UI, I didn't mean finance in the UI that design get creators name creators name. Okay, so that's going to be under user. Yeah.

Investigating User Data and Sign-up Process

Okay, what could be going on here is that are you actually 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 it 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, what did I use? I don't have a login button that that might be part of it. Okay. I said my processes is not good.

Verifying User Data in the Database

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 on to your freelancers. And then if you open up the editor panel. So it's created by that email. Yep. Okay. And then I'm sure it was there. But let's just double check if we go 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.

Examining Privacy Settings

Okay, right. This might not be on it, but I'm very certain if we go on to 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 like your simplest privacy settings in Bubble are the current user can access what the current user creates, but the other users can't access what other users create. But in a more like a game, you're doing like 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.

Adjusting Privacy Rules

So the let's try this, this might 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, it's that's that's the one if you take the box to the right of it. That's that's the freelancers. If you take the box to the right, I got to turn off my my light settings. Sure. Yeah. If you take 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.

Resolving Display Issues

So so name on the freelancer next to name or both. It's the box for name is the far right box. Yeah. I don't know if there's something obscuring on your screen. That's that's not the one. It's the far right. There's a third column 123. This is my third column. What's this thing here? That there's, 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 as you might be able to see through my computer, I am not seeing anything to collect. 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 front end? Because I think now that you've made the name feel public, if we can go back to your repeating group. Yeah, there you go.

Addressing White Space Issues

That is definitely a niche 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. Do we have a time to to actually be eliminated the white space you've killed two birds with one. Well, I mean, the white space is here. I guess, I guess 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.

Tips for Consistent Styling

It seems is there a way to sort of like cascade, sort of do like a super, a super styling that sort of gets inherited. Not for your container layouts. If you haven't already, make sure your headers are a reusable element that will save you some time. Just my number one advice for 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 economy rows. And that's how you make the most of the changes they put in place with the new engine.

Reviewing Header Layout