Bubble's New Responsive Engine Tutorial 2021 -- Building a Messaging Interface

hey what's up you guys hope you're doing well so it's quite late where i am right now but i've been playing around with the new responsive engine for a while and i thought it would be cool to record a video in which i try to redesign some sort of interface and test out this new responsive engine and also learn about it in real time because i'm very much still figuring it out as well i've been playing around with it for quite some time now and i feel like i'm getting the hang of it but um well we'll see how i do and there's still a lot to learn i'm sure so if you see me doing something in this video that doesn't make sense that you think would make more sense to do in a different way please do let me know but what i wanted to to build in this video together is this interface right here this this messaging interface in part because building something like this previously using the old responsive system was incredibly difficult to do anything that required sort of a conditional screen height you could do it but it was very painful and often involved a lot of a lot of tricky code to do so let's get started let's see how we can build something like this using the new responsive engine i'm going to go into the editor the very first thing that i'm going to do i created this brand new page called messaging it's completely blank of course the first thing that we need to do is click on upgrade to responsive to the new system i'm going to be going through everything that is not um related to the new responsive engine really quickly so if you're brand new to bubble and you see me kind of racing through things if you're brand new to bubbles is probably not the best video for you to watch this is just exploring the new responsive engine anyways i have this blank page here and looking at this interface here here's how i'm thinking about it right now i have this row on top that is the header and inside of the header we have this logo on the left we have the this message title in the center here and these other two text elements on the right side and then underneath that header i have these two columns here so the column on the left has all of these conversations that scroll down the left side right and on the right side here whatever conversation is active we have the messages right in front of our face here and also i'm including in this column on the right we also have this this input and this send button as well so we'll include that in the right column and one of the things that i think is um is interesting about the new responsive engine is for me at least it's it's forcing i think it forces one to start planning out your interface a little bit more in advance like this and to start thinking about things in terms of rows and columns whereas before with the the previous responsive engine you could very quickly just drag and drop things onto the screen and kind of worry about how everything's going to fit together afterwards with this new responsive engine it does require a little bit more planning i think another thing that we'll get into this we'll get into everything after in a moment i promise but another thing that's that's interesting that i found about this new responsive engine is that i think it's much more flexible in terms of how you get to something that looks like this so there are probably a number of different approaches that one could take to build something like this i'll show you what i would do at least at this moment in time so we have this blank page here and let's start by let's start by changing the width of the page so i'm going to change it to 1280 pixels and i am going to set the container layout to be a column the reason for that is because i want essentially these i'm going to have two rows so the first row like we said is this header here and then i'm going to group these two columns together to make up the second row so columns are going to stack on top of each other this will make more sense in a second so the container layout for the page that is called messaging we've set to be a column and the first thing that i'm going to do is drag a group here across the page and this is going to be our header group so let's call this group header now inside of this group this is going to be a row so we're going to have some stuff on the left here the logo the title like we said and some some text elements and they're going to be spaced apart inside of a row so i'm going to set the container layout instead of fixed this is going to be set to row one thing that confused me too is this container layout this applies to how elements inside of this group inside of group header here how they are aligned inside of the group so this is not the actual group header in relation to the page it's the children of group header and how they behave inside of this group okay so let's let's first change the background color of this group so that we can see it a little bit better i know that it's in the real one it's white here but just while we're building everything out let's start changing the color okay so inside of this group header we have i'm just going to put one logo here for now so we'll just say a single image on the left we'll have this text element called messages and then we have these two text elements that i'm going to group together and they'll be aligned to the right hand side of the page so let's start dragging these these elements in i've got an image here and i did download at least something that had the letter q in it so we'll put that here we have another text element and notice how when i start dragging and releasing these elements notice how they kind of um they snap to one another and they're trying to fill up this entire row here and if there's no more space like if if i just kept copying and pasting this text element for example inside of this group notice how it eventually drops to that next line right and this group will get bigger and bigger and bigger so it's just trying to fill up this the space that it has here okay so let's change this to say messages and we'll center this make it a little bit bigger too and now inside of this group i'm going to have another group and this group here let's call this group right side i'm not the greatest at naming my elements on the best of days so i'm exhausted right now too so you'll probably see some poor naming choices for for groups but anyways um inside of here we'll put the download app and the logout text element so we'll say download app and because i haven't changed this group either this is all right now if i double click on group right side and i go to the layout you can see it's fixed which is why i can kind of drag everything around and this more so resembles the old system but we'll change that in a second because i don't actually want these this group to be fixed at all and this will say i think it just said log out so we'll say log out so we have everything that we need here and let's make this a little bit more pretty now so the first thing is i want this group right here group header to stretch all the way across the page so if i go into layout you can see right now that when i dragged it onto the page bubble automatically said make this fixed width and it set the width to 986 which is just what i dragged out onto the screen i don't actually want this to be fixed width so if i uncheck this and i say that the minimum width let's just change this because we don't really need a minimum width right now then you can see that this group header right here is just fitting to it's only taking up as much width as it needs to right if i were to for example if i were to cut this group out you can see that it actually shrinks down to whatever content it has here now because i've made this group header a row one of the things that i can do is i can align it in relation to its parent and one of the things we have here available to us is this horizontal stretch so i can make this group header stretch all the way across the page like this and remember before how we said that up here when we're dealing with the container layout which is a row and the container alignment what we're actually doing is we're dealing with the elements that are inside of group headers so the children elements here and we what i want to do is i want to determine how these are going to be aligned inside of group header all of these children right now you can see the container alignment is to the left and that makes sense all of these elements are kind of aligning to the left side of this group right but one of the options that we have is i can space them evenly so i think that is this one right here and now you can see that even though things aren't perfect we need to deal with that in a moment but you can see that there's an even amount of space between this element here and this element as well okay so now let's deal with these two right here first of all let's just change the font looks like these are smaller and a little and gray so let's make these maybe size 15. um let's not worry about the alignment right now because i want to see if we can just fix that with these layout options that we'll look at in a second but we'll change the font weight to 500. and maybe a little bit of a darker gray do the same here so these text elements too if i go to the layout here i'm actually the first thing i want to do i said is i want to change the actual this group right here group right side i don't want this to be fixed i'm going to change this to be a row as well okay and you can see the second that i do these text elements up here they jump up to the top and they go to the left side right because inside again if i click on this group right here we can see that i changed this to a row and the container alignment is to the left so all of the elements here will try to snap to the left and take up as much space as they need all right now let's see what we can do here so the first thing is i don't actually want this to be fixed with this log out text element it's set to fixed with right now and a lot of these um at least what i've found is i've gone through and done things with this new responsive engine is a lot of the time when you drag a element onto the page um the default settings if you're doing what i'm doing here are not what you'd want bubble makes a lot of the stuff just fixed width and very often in my case at least the way i'm approaching it you don't want it to be fixed with so i'm going to uncheck this um we'll do that and i'm going to uncheck this as well because i don't want either of these to be fixed with okay what i do want is i want to fit the width to the content here i want the text element to actually fit to the amount of text that we have right so i'm going to check this and we'll say fit to content and i'm going to do the same with log out here there we go so now we can see that these text elements are nicely fitted and why don't we do the same with this group right here so instead of you can see again if i click on group right side and we look at the layout settings you can see that right now it's taking up all this room because it's set to be a fixed width of 333 pixels which i don't want so if i uncheck this the default behavior let's get rid of this minimum width the default behavior is to stretch and try to take up as much room as it can but we don't want that either obviously i only want this group this group right side here to take up as much width as it actually needs so i'm going to also check fit width to content and now this is starting to look a little bit better but we still need to fix a few things so obviously first of all these these text elements are way too close to one another it'd be nice if they had a little bit of margin here and one of the things that we have available to us now and with this new responsive engine is this margin property so let's first of all give a little bit of breathing room between group right side here and the the edge of the page so with this group right side selected i'm going to scroll down to the bottom you can see that we have these margins right here so let's just say that we want the right margin to be i don't know 20 pixels and for log out here let's say that i want a left margin of 12 pixels so that we have a little bit of space now between them okay now the other thing that i want to do is i want to align this in the center if we go back here you can look it looks like these are perfectly aligned in the center it looks like there's quite a bit of margin between them too actually so let's increase the margin there and again there's probably like a number of different ways to to do this right make the group bigger and space them differently inside of here as a row but this works for now so let's just leave that let's make it give it even more okay now this group here you can see that right now the minimum height is set to 41. if i were to change this to let's say like 50 it increases in height a little bit right let's do that one more time right 41 to 50. what i want to do is i want to make this group stretch all the way vertically right and we can see right now that we have this vertical alignment property and so i'm going to say that instead of aligning to the top and having a minimum height of 50 pixels i'm going to say stretch all the way to the bottom actually why don't we do this instead of that i don't think that's the best way to do it why don't we do this we'll say that we want to align it in the center here and we don't really care about this minimum height so i'll get rid of that and now you can see that again the group automatically shrinks to the minimum height that it needs and now we have a perfectly centered group like this which is great it's exactly what we want let's do the same with this so if i click on messages here first of all i don't really care about this fixed width of 407 pixels so we will say don't be fixed with and this starts to expand which is great and then we'll say center vertically same with this image here now images are a little bit tricky i haven't really figured them out fully in this new system in terms of how resizing works videos also they look they look i need to do some more work there but one of the things that's interesting with this image here is i can say keep aspect ratio and i know from downloading this image that this image is is a square right so the width is the same as the height and now it looks it looks like a proper image like i downloaded which is great let's give it a little bit of margin from this left edge as well so i look looking at this group here i said 20 pixels from the from the right side let's do the same here we'll say 20 pixels from the left you can see that everything starts to shift over okay so i think that's good for now let's keep going let's change this back to let's see how we're doing here let's change this back to white and we'll give it a little bit of a border on the bottom okay i don't think this is perfectly centered and i maybe want to come back and play with that a little bit later but for now i think um let's move on and not worry about it too much right now okay so so far so good let's start dealing with the rest of this now like i said we have we have two columns that we need to deal with here so the first thing that i'm going to do is i'm going to take a group and let's just drag this group onto the screen here and this group is going to hold both columns so we can think about this group that's going to hold this left column and the right column together which are also going to obviously be groups but this first group that i just dragged onto the screen i'm going to go to layout and instead of making it fixed i'm going to give this a i'm also going to make this a row okay and for now let's drag a group in here we'll call this group left column to make it gray and i'm just going to copy and paste that and we'll say group right column okay and let's give this a little bit of a darker color so i obviously want this group to span the entire width of the page and the left column we can see looking here that this is going to be you know significantly less wide compared to the right column right the right column looks like it takes up maybe three quarters 75 of what the left column does around there anyways so if i go back to the editor first let's make this stretch all the way to the edge of the page so if i double click here and i go to layout let's call this group messaging container greatest name but that's okay we can see that this group messaging container is fixed width so let's uncheck that we won't worry about minimum width 2. get rid of that and this shrinks down and we're going to do the same thing that we did up here with this group i'm going to say that for group messaging container i want to stretch this to the i want to make it take up as much space as it can inside of its row so we'll stretch it all the way like that okay that looks good and let's say that we want this group right here or sorry this this column to have a minimum width of let's change this again to if if we look at what we want the container layout to be so how we want the children of this group to behave we're going to have a repeating group in here so there's just going to be things stacked on top of each other so i'll say that i want this to be a column we could actually probably just put a repeating group here we didn't even we wouldn't even need a group but i like grouping things together maybe i'll start doing that less with this new responsive system because we won't really need to as much before groups i mean they're nice for organization but you also really needed groups to deal with a lot of the responsive stuff whereas i think they'll be less necessary but we'll see as we go along here anyways this i'm going to say that i don't want this to be fixed with you can see instantly it tries to take up as much space as possible here so let's change the minimum width actually i want what we'll say is we want a maximum width here actually why don't we sorry let's actually go back and make this fixed width and let's just say that the width is going to be 400 pixels okay and for this group right here the right column we want this to also the children of this group are also going to be inside of a column they're just going to be kind of stacked on top of each other right so we have a repeating group here for all of the messages and then we're going to have this input on the bottom a group on on the bottom of these messages so i'll uncheck this and say that it's not fixed with and there we go now you can see that things are looking a little bit you know we'll deal with the repeating groups obviously in a second but we at least have that that layout that we want here it's starting to look like that at least okay so why don't we we deal with this left side first and another thing that i want to do here actually before we do that is i want um this is one of the coolest things in my opinion about this new responsive engine is before um it was such a pain to try to figure out how tall to make your elements for something like this i actually not so long ago built an entire repeating group with just an html element because to solve that one problem that because you wouldn't you didn't know what the user's viewport height would be so it was such a such a pain to do to try to make your elements expand to the proper height but we don't really need to to worry about that at least it's much less of a problem than it was in the older system so what we can do here is even though the page minimum height is 600 for this group right here if i right now that's it's we're saying fit height to content for this group and we also have a minimum height of 456. so watch what happens if i delete this minimum height we're going to see that group shrink up to try to fit its content which is what we've we've seen before what we did over here right now we're dealing with a column before we were dealing with with an actual row right so if i uncheck this then you can see that it it tries to take up as much vertical space as it can and i can do the same thing with these two groups here i can say don't worry about a minimum height or sorry actually we have this vertical alignment property here that i can change and i can make this row stretch vertically to take up as much height as possible let's do the same right here and before we do anything else why don't we actually just preview this to to see what it looks like and let's take debug mode off and look at that we have this full vertical height 100 of the viewport and um i mean this is this is amazing for for all of you guys who have been bubbling for a long time to just be able to do something like this this was a major challenge before um without a bunch without using a bunch of different hacks anyways um let's keep going so inside of here we're going to put a repeating group and one of the things that is quite different about the new responsive engine is how we actually deal with repeating groups which is also really cool so take a little water break there now this repeating group um let's i'm not going to make any i don't think i'm going to make anything fixed inside of this inside of this walk through and the more i play around with it the less i actually make things fixed i'm really curious to see how how other people play around with this because maybe i'm way off maybe it's more maybe it's more powerful to use a fixed layout at times but anyways let's keep going so i'm going to uncheck make this element fixed with and i want this repeating group to stretch horizontally to fill its container here okay i'm also not too concerned about a minimum height or minimum width for that matter but the minimum width shouldn't be affected anyways because this should be fixed with the container i mean inside of the cells container though this works the exact same as as as any other container layout right we're just dealing with what we want the layout of of this cell to be here and i don't want this to be fixed instead i'm going to set this to be let's set it to be a row and yeah i think that's what we want here yep okay let's try that let's see how we go okay and what we'll do here is i'll put a group inside of here and this group is also going to be a row so the children of this group now what i've liked to do with these repeating groups at least right now is to make them stretch vertically to fill the entire cell and then to give this group a little bit of margin to deal with the space in between different cells so i'm going to let's let's give this a background color so we can see so we'll say group conversation station container and i'm going to go to the layout and make this stretch all the way and what i'll do is we'll go down and we'll say um let's just give it a bottom margin of eight and a top margin of eight as well we'll center it oh no sorry we'll stretch it out and we won't make this fixed width either and one of the things that we can do now which is so cool in the appearance tab is i can for this repeating group i can uncheck set fixed number of rows here so right now we have four rows before we had to pick how many rows and columns we wanted but i can say that i don't want a fixed number of rows here and what we'll do now is we can also say that the layout of this how do we do this before we're saying fit height to content let's just uncheck this and now you can see that this repeating group is just going to kind of it'll be like a proper vertical scrolling one that just scrolls down as much as you need it to right and we won't worry about a min height or anything like that it doesn't really matter but so far so good all right sorry i had to pause there and take a little break take a little refresher one thing that i should say too is what i've done for these repeating groups again just so that we can focus entirely on the new responsive engine is i've gone into my database here and created a conversation type and a message type i've just created these types for the sake of being able to create some sort of dummy data so that we can actually see the repeating groups show up here so if we look into the database here you can see that i have a bunch of different messages here that are just totally blank entries in the database just so they'll show up so on the left here what we'll do is the type of content i'll set this to conversation we'll just do a search for all conversations and i'll do the same when we get to messages over here but let's start actually designing out the first cell of what we want this to look like so we're going to have an image here and then enough we're going to have the name of the person that we're speaking to a preview of the message down here and then the actual time or the date that it was sent so the way that i want to do this again is using a row here so let's go back here and we're going to set the layout to a row which is perfect it'll be a line the children of this group will be aligned to the left and let's start with an image okay so for this image let's make a static image that looks like this we'll give it a little bit of roundness um and let's make this a little bit bigger too um [Music] why don't we just say 60 by 60. for the vertical alignment we want it to be vertically aligned like this and let's give it a little bit of margin here as well so we'll say i don't know 16 pixels from the left okay now when i look at something like this we have the the name here and then the the time and they're they're on the same level too right they're in the same same row so why don't i put a group and group these two together and then we'll have the preview of the actual message outside of that group so we'll do a group like this and then inside of that group we'll do another group for the the name of the person and the message and then a text element underneath here as well okay and this text element will be for the the preview of the message of course so i'm going to double click on this group inside of this group what do i want i want these to actually be a column i think right so because we're going to have a group and then a text element underneath it so i'll say that the layout for this let's just say let's call this group conversation info so instead of making this fixed i'll make this a column okay and for this let's center it again vertically into its parent and we're not going to be worried about the fixed width here instead what we'll do is we'll give it a little bit of right margin this is what i mean again by like there's probably so many different ways to set this up right i'm not sure if this is the best way yet not sure at all still still figuring this out obviously as you can see um we'll give this a little bit of margin 16 16. and then in here what we'll do is i'll copy this text element i'll paste it in the group here this is going to be the name of the person this is going to be the preview of the conversation so let's just make this text look a little bit more accurate a little bit more like the original say this is going to be regular 15 it's going to be much darker and let's just copy and paste some worm ipsum um let's let's leave it and try to deal with that in a second and this will be the name user and inside of here we'll have one more text element let's actually let's go back so the the one thing i want to change about this group right here is the layout style because i want this group to actually be a row right because we're going to have two things on this two two elements on this line so i'll change this from fixed to row and now watch what happens if i copy and paste this because presumably because yeah right these both of these text elements are set to fixed width and there's right now the width is 181 pixels there's not enough space on this line for two text elements that are both 181 pixels to exist so one has to drop down to the next line and this group becomes bigger instead we'll uncheck this we'll uncheck this as well and what we'll say is we don't want this minimum width here we don't care about that and you can see now that this jumps up to the next line [Music] for this one we don't really we want this to stretch all the way actually no we don't what we do want is inside of this so why don't we get rid of this minimum width for this particular text element and what we do want is we want both of these text elements to fit to their container right so for this one right here i'm just going to say fit width to content so that the container actually shrinks down to only take up as much text as we need and i'll do the same for this fit with the content and why don't we change this right now so that this looks a little bit less ridiculous this is going to be the date let's say smaller it doesn't see this this text alignment right here doesn't really actually matter with how we're going to set it up so make this a little bit darker and what we'll do is for this group right here first of all i don't want it to be fixed with so if i go to this layout and i uncheck this and i don't really care about the minimum width um what we'll do is we'll stretch it all the way to the end of the group here and then inside of this group this is where we can start playing around with the container alignment here because this group right here let's just call this group name and date this group name and date this the container layout's a row right so we have these different layout options here and what i want is we'll use the same one that we used up here we use this space between i think i could also no yeah we're going to use that space between which moves this all the way over to the left this all the way over to the right and perfect that's what we want right let's also give this group a little bit of margin from the left or from the right edge of this image so we'll say 16 pixels oops i don't like that let's say that the minimum width of this is not 294. i think that's why it jumped down to the next line because it didn't have enough space there so if i get rid of that there we go okay and what we'll do here is again we're not going to worry about this fixed width we'll let that go um i think that you know like let's see it looks like there only has one line here right that i don't think actually two lines looks bad there but let's try to be consistent let's say we only want um two lines so i think what we have to do in this case is actually set a maximum height here let's set a maximum height of 24 and see what that does okay that actually worked perfectly so this text element should not get we'll just make this a fixed height of 24. this should not get any higher than that and what we'll do here is we'll stretch this out as far as we can too um one of the one of the weird things that i've noticed before with text elements where with this new responsive engine is before we used to have these properties for text elements that were cut off if the text gets longer shrink if they get shorter i wonder if that's still true with um see if i change this to fixed and i look at this text no maybe they're in a different place i i can't see them anywhere though so um that's kind of one thing that was that was confusing for me as i was going through this new responsive engine is before we used to cut off the vertical height of text or shrink it now it appears like the way that i just did it here was i set a fixed height so that anything like let's say that you know this message this is representing a message and in the interface that we're building out was super long we'd set the height to be fixed or at least a maximum height of 24 pixels here which would only allow for one line so that seems to be working and yeah i mean so far so good i think that works pretty well um let's change the background color of the group behind this repeating group or the parent let's call it because it's driving me a little crazy and there we go right and if i preview this let's get rid of debug mode again as well look at that that's pretty cool right that was this was like impossible not impossible but this was so hard to to do with the previous responsive engine so it's so so nice to see something like this great work bubble team very exciting stuff okay and now let's deal with this on the right hand side here so let's go look at our original model again i'm not going to worry about this up here i'm trying to make that work um okay so let's start by just getting the the two groups that we need here because again we have this repeating group for messages right whatever active conversation i have selected here i'm looking at the messages from that conversation and then we also have this input on the bottom it's not just an input there's there's an icon here i'm not going to worry about the icon right now but the input and then this send button as well so let's make this doesn't need to be so dark now this is i think actually yeah it is gray here though so we'll leave it gray and inside of here we'll put a repeating group and another group as well under the repeating group so this will call group input container repeating group this will be a repeating group for messages and let's just do the logic right now why not we're just doing a search for messages and all right let's deal with this now so for this repeating group what i want to do is i obviously want this to span the entire width of its container so let's say that the layout for this is uh this is the cells container layout but i don't want this to be fixed with so uncheck that i don't care about a minimum width and i'm going to use the same thing here so oops where did that go okay so you can see what happened there when i unchecked fixed width is it collapsed down because it there's no content in there right now so it's it's literally just there's there's it's not taking up any space but what i want to do is i want it to stretch all the way i want to force it to stretch all the way across across its row so we'll do that that looks good and why don't i do this let's try to position this at the bottom of the screen right now i think what i can do is i think if i just uncheck fit height to content what will happen is this will be pushed all the way down let's see if that does yeah exactly right so let's do that one more time if i uncheck fit height to content this is going to try to take up as this repeating group is going to try to take up as much height as it can here right now the minimum height is set to 286 pixels which is why it's it's showing up here but watch if i i'm guessing if i change this to zero then we'll have the same thing happen that happened when we changed the minimum width it collapsed down horizontally we'll have the same thing happen vertically and we do like that right but we'll say fit height to content we'll uncheck that and the reason it's not going all the way down right here is because we have this group here called input container let's make this a little bit darker for now actually let's just make it white and we want this of course to stretch all the way across the page as well so click on layout i'm going to change the container layout also to be a row but i'm not going to set a fixed width so we'll get rid of that and i'm going to force it to stretch all the way across its container and what i want to do here as well with this repeating group is um i want to why don't we just set a little bit of top margin here say 36 pixels so that the repeating group doesn't cut it's maybe a little bit too much just so that the messages don't go all the way into this input container here although maybe that wouldn't be the worst i don't know anyways that's you can do it or you you don't have to but that's what we can do with margin which is pretty cool now so let's change this repeating group to be a row the sorry the cells container layout inside of the repeating group so again the first cell here the layout for its children we want to be a row and i'm also going to say that i don't really care about having a fixed number of rows as well okay now let's grab just for the sake of time here i'm just going to copy and paste this group that we have here into this into this repeating group okay and let's get rid of that minimum height i don't really care about that for the row and there we go you can see that it shrinks down a little bit more which is just cool so let's take a look at the original here so we have a few things that we need to adjust first of all we don't actually need any of this stuff so let's take this out let's get rid of that group all we really need is the image and what i'm going to do is i'm just going to put a text element inside of a group here and we'll change the background color of the group so let's get rid of the background color actually now let's just make this a little bit darker sorry let's just leave it as white actually okay actually no sorry i know what we'll do um we'll make this no color and what i'll do here is we'll take a group put it inside of this group and now i'll just copy this or cut and paste this text element inside of this group here so we have that nice kind of background fill and of course as soon as i cut oh there's there's a group right here okay so we'll paste this text element that i just cut inside of this group and that didn't work out well it looks like this group is again a lot of these are just kind of the default settings you're getting used to them at least so presumably this group right here is fixed and i don't want that let's say that we want this to be a row and we don't want it to be fixed with and i don't care about the minimum width either okay good and now this text element is inside of this group right here so let's change the let's make this group white so that we can see things better first of all um [Music] that looks good and then let's change the width of this text element so i don't need this to be so big obviously in fact i just want this text element and the group as well this is also just one of the this was one of the things that you had to use some code for before is to get that dynamic horizontal width which we can do now natively with this new responsive engine which is really cool so i'm going to let's see go to layout here i'm going to uncheck this as fixed width for this text element and we'll delete the minimum width as well okay so this is now stretching all the way to the end because it's trying to take up as much room as possible the container for this text element if i say fit width to content which is what i want here then that container shrinks down to take up only as much room as it needs and i'm going to do the exact same thing with this parent group right here so we'll say no minimum width that's good but we'll say fit width to content just like that perfect and now inside of this text element here what i'll do is i'll give it a little bit of margin so let's say that um this group you can see right now the reason again that it's there's this little gap here is because of this minimum height if i were to change this to like 45 for example it drops down a little bit more but i don't want this to be to have a minimum height i want the height to just fit to the content so we'll get rid of this and now this group you can see is hugging the text element if with this text element selected what i'll do is let's get rid of the minimum height i don't really care about that what we'll do is we'll say that we would just want eight pixels of margin on each side now we have this container that's looking a little bit better let's style this group a little bit maybe give it some roundness and some borders and let's space it let's give a little bit of margin here for this image okay and i think that's looking a little bit better let's um [Music] let's preview this and just see how it looks yeah so far so good i think right we can scroll down just like that which is super cool uh let's we'll come back to this in a second but why don't we get the easier part down here set up which is the message container the input container rather so again as you guys can see and just this video has been going on for quite some time now too and it's getting super late here so i'm gonna skip a lot of like the the styling stuff here one thing that i will say um i don't think there's a way right now that i can see there's no obvious way um let's sorry i just realized that we this group is probably not entirely necessary let's just say fit with to content there anyways one thing that is not obvious to me with the repeating group is how to conditionally change this alignment here so obviously like the way that a typical messaging interface like this works is if i type something and click send here presumably this will show up on the right my message the latest one that i that i just showed and so what we would want with this new responsive engine is to conditionally align the message depending on who sent it right so if someone other than the current user sent it it would appear left aligned just like all of these are here but if the current user sent it then we would want it to be right aligned here the way that like if we look at the layout here you can see that the this is more the container layout actually so i don't i don't know if that would be the one that we'd be concerned about this is what we would want here the cells container layout and the container alignment here so let's actually see if i go to the conditional tab what we would want here is let's just say when now this wouldn't work because we would want to have access to whatever the current cell's message is uh let's just see for a second current user is logged in yeah there's no alignment or anything like that either that we have access to so um we could do this with css something like this we could force it again but i don't know if the bubble team is working on something that exposes those states that we can change the alignment of um and accomplish something like this but that would be a nice feature to have okay anyways we'll leave that for now and let's just deal with this input on the bottom here so i'll put uh let's deselect this let's first deal with this group input container so for the layout style here i do want this to be a row that's great and let's just put a multi-line input in here we'll get rid of all of the stylings that it just looks completely yeah good enough and then what else do we need we need just a send button here right let's just put a regular button in for now and we'll say send message okay so let's make this look a little bit better what we'll do is we obviously we want this input to take up most of the room here so we want uh let's see if we go to layout i'm not going to have this be fixed width again i do want to center this horizontally or sorry vertically inside of the row but we'll uncheck this and let it stretch all the way to fill up as much space as it can we'll get rid of this minimum width for a height when i set a height here yeah i might just set a height like a fixed height maybe i don't know 40. we'll give it a little bit of margin here on the left let's do 20 pixels there and then with this button here i would probably also give this a fixed width at a fixed height the original has like a text element in here so that would work or just a button that function that looks like a text so that would work too but i'd probably give this a fixed height so we'll and a fixed width for that matter too so let's say 100 is that enough i want this to come on one line i want you when i just change the text to say send send message don't need that and we'll change the height to be let's say also 40 pixels and we want to align it vertically inside of the row as well okay and that i think is looking pretty good right so i mean just being able to see how everything is vertically scrolling nicely and we're not like i'm at the bottom of the page here right i can't there's nothing stacked on top of each other and collapsing like we used to do before we can also we haven't looked at that in we haven't looked at this in this tutorial but um horizontally collapsing things we can do that now too which is super cool but even just being able to you know without some of the finer details here of like splitting up the left and right like we talked about but even just being able to do something like this where this input group is always on the bottom of the viewport height is super cool it's it's uh i mean we haven't really been able to do this without code before so um great job bubble team again i think this is going to be massive in terms of the the way that we build out bubble applications going forward so thank you for watching i think that's everything that i wanted to show you here um it's obviously not a perfect replica of this but close enough i mean the time part here that we've left off hopefully at this point it's easy how we would accomplish something like that um you might add that time here group these two together and set the layout to be a column anyways we won't go into that um but yeah i'm of course let me know if you have any suggestions or anything that you noticed here or if anything's confusing if you have questions about it too again like i said i'm still learning this stuff and figuring it out but i'll be happy to answer any questions that i'm able to answer and looking forward to seeing all of the cool stuff that everyone is going to build now going forward with this new responsive engine so take care you guys have a good night and see you all later bye

Channel: J|dev

Views: 3,713

Keywords: bubble.io, responsive design, new responsive engine, bubble tutorials, new responsive system, How to build an app on Bubble

Id: Z-1QxxBPLBg

Length: 61min 25sec (3685 seconds)

Published: Fri Nov 05 2021