1 00:00:00,870 --> 00:00:04,960 In the last video we started putting together an HMO document for this little model example. 2 00:00:04,980 --> 00:00:06,180 So let's keep working on it. 3 00:00:06,180 --> 00:00:11,910 Right now I'm gonna flip back over to my HMO document and down inside of the body I'm going to place 4 00:00:11,910 --> 00:00:17,430 a new div above the sidebar please make sure you make it above the sidebar and I'm going to give it 5 00:00:17,460 --> 00:00:23,880 a class of motile as you might guess this is going to serve as the modal element that should be obscuring 6 00:00:23,880 --> 00:00:27,630 the sidebar and the content inside of this div. 7 00:00:27,630 --> 00:00:35,310 I'm going to place a div with a class of modal Dasch body and inside of that inner inner div I'll give 8 00:00:35,310 --> 00:00:40,970 it an H one with some text like I am a modal like so. 9 00:00:41,430 --> 00:00:43,130 Now why are we using two divs here. 10 00:00:43,230 --> 00:00:49,470 Well the outer div right here is meant to serve as the kind of gray background that's going to obscure 11 00:00:49,470 --> 00:00:56,430 all the content behind it the inner div with modal Dasch body is meant to represent this element right 12 00:00:56,430 --> 00:00:56,700 here. 13 00:00:56,700 --> 00:01:01,340 So the actual kind of white window of sorts that's going to show some content inside of it. 14 00:01:01,350 --> 00:01:05,640 So usually we put these models together with the two separate elements one for the background one for 15 00:01:05,640 --> 00:01:07,830 the foreground so to speak. 16 00:01:07,830 --> 00:01:14,790 Now if we save that HMO document now and then refresh our page no we don't really see a whole lot going 17 00:01:14,790 --> 00:01:15,140 on. 18 00:01:15,150 --> 00:01:18,720 You'll notice that we now see I am some content shifted down. 19 00:01:18,810 --> 00:01:23,400 The reason we don't see our content that says I'm a modal is that it's been obscured behind the sidebar 20 00:01:23,400 --> 00:01:24,150 right now. 21 00:01:24,300 --> 00:01:28,370 So we really need to add in some more CSSA before this is going to make any sense. 22 00:01:28,470 --> 00:01:30,560 Let's look back over. 23 00:01:31,110 --> 00:01:37,570 All right inside of my style tag I'm going to add on some selectors for modal and modal dash body. 24 00:01:37,610 --> 00:01:41,290 I'm going to start off first with modal so going to say modal. 25 00:01:41,550 --> 00:01:46,190 I'm going to give this a height of 100 percent or with of 100 percent. 26 00:01:46,410 --> 00:01:55,950 I'll give it a position of fixed a background color of gray and then a left of zero a top of zero. 27 00:01:55,990 --> 00:02:00,450 Now I think that should be just about it for the background and we'll add in just a little bit for the 28 00:02:00,450 --> 00:02:02,120 modal body as well. 29 00:02:02,160 --> 00:02:06,660 I'm going to put the modal body selector above the modal just because it's going to make looking at 30 00:02:06,660 --> 00:02:09,620 some the CSSA in just a moment a little bit easier for us. 31 00:02:10,020 --> 00:02:10,850 So I'll say up here. 32 00:02:10,870 --> 00:02:16,610 Motile Dasch body will have a background color of white. 33 00:02:16,830 --> 00:02:17,950 I'll give it a margin. 34 00:02:17,990 --> 00:02:23,450 Auto which is going to center this window on the screen horizontally that is not vertically. 35 00:02:23,670 --> 00:02:28,320 Well give it a height of 30 percent and a width of 30 percent. 36 00:02:28,320 --> 00:02:31,790 Now some of these rules in the long run are not going to work out super well for motile. 37 00:02:31,800 --> 00:02:35,040 I'm just trying to get a example here on the window or inside of a browser. 38 00:02:35,040 --> 00:02:37,520 Very quickly so I'm going to save this again. 39 00:02:37,710 --> 00:02:38,880 Flip back over. 40 00:02:38,910 --> 00:02:39,270 All right. 41 00:02:39,270 --> 00:02:40,880 Now that looks a little bit better. 42 00:02:40,920 --> 00:02:42,650 There's just one little issue. 43 00:02:42,780 --> 00:02:43,920 I see the Modahl on screen. 44 00:02:43,920 --> 00:02:46,460 So here's the kind of white content center window. 45 00:02:46,560 --> 00:02:50,970 I see the gray background but you'll notice the issue here is that we've got the green. 46 00:02:50,970 --> 00:02:54,330 I am a sidebar still on the left hand side. 47 00:02:54,420 --> 00:02:59,790 So ideally we would get the side bar behind the motile and I shouldn't even really say idealy that's 48 00:02:59,790 --> 00:03:01,470 just plain how it should work. 49 00:03:01,500 --> 00:03:04,480 The sidebar should not be displayed on top of the motile. 50 00:03:04,590 --> 00:03:09,700 So we need to figure out what is going on here and how we can fix this issue well to fix this issue. 51 00:03:09,750 --> 00:03:17,250 We can use a feature called z index a z index is essentially a CSSA rule that's going to control what 52 00:03:17,310 --> 00:03:24,300 element gets rendered on top of another element we assign z index properties integer values anywhere 53 00:03:24,300 --> 00:03:26,920 from negative values all the way to positive values. 54 00:03:27,920 --> 00:03:33,590 The higher a element or Seamew the higher z index value that an element has makes it more likely or 55 00:03:33,590 --> 00:03:36,640 higher priority to be displayed on the top of the screen. 56 00:03:36,650 --> 00:03:42,740 So right now if we give our model a z index of 10 it will be displayed on top of the sidebar which by 57 00:03:42,740 --> 00:03:46,280 default has a z index of 0 or technically undefined. 58 00:03:46,280 --> 00:03:47,630 In this case. 59 00:03:47,780 --> 00:03:53,480 So to fix this up I'm going to go back over find my modal class right here and I'll give it a Z dash 60 00:03:53,510 --> 00:03:55,000 index of 10. 61 00:03:55,070 --> 00:03:56,430 Like so. 62 00:03:56,450 --> 00:03:58,860 So now this has a higher z index. 63 00:03:58,870 --> 00:04:00,120 They on our Sidebar. 64 00:04:00,280 --> 00:04:03,280 So our motile should be displayed on top. 65 00:04:03,550 --> 00:04:06,670 So I'm going to save that I'll flip back over again or refresh. 66 00:04:06,670 --> 00:04:08,980 And now we see that the sidebar goes away. 67 00:04:08,980 --> 00:04:10,490 It doesn't technically go away. 68 00:04:10,510 --> 00:04:12,050 It's still in the background. 69 00:04:12,070 --> 00:04:16,810 It's just that our gray background right here is visible on top of the sidebar. 70 00:04:17,260 --> 00:04:17,500 OK. 71 00:04:17,510 --> 00:04:22,300 So this looks like it's working out pretty well but I'm going to throw a little bit of a wrench into 72 00:04:22,300 --> 00:04:23,140 this plan right here. 73 00:04:23,170 --> 00:04:23,550 OK. 74 00:04:23,590 --> 00:04:31,360 You got through a little problem in remember when ever we show content with react. 75 00:04:31,420 --> 00:04:37,720 We are always showing all of our components inside of a single div like so and so I want you to imagine 76 00:04:37,720 --> 00:04:42,550 that maybe at some point in time we put together a modal component which is exactly what we really want 77 00:04:42,550 --> 00:04:45,700 to do for this daily screen or that delete page. 78 00:04:45,700 --> 00:04:51,460 So remember this Modal right here is always going to be deeply nested inside of our application. 79 00:04:51,460 --> 00:04:58,270 We might have a tremendous amount of H-G mail or a tremendous amount of GSX with a ton of styling as 80 00:04:58,270 --> 00:05:00,550 parents to that modal component. 81 00:05:00,910 --> 00:05:06,520 So this motile right here is going to be wrapped by maybe two or three divs inside of stream delete 82 00:05:06,850 --> 00:05:08,670 maybe another div inside the app. 83 00:05:08,710 --> 00:05:14,140 Another day with the idea of root right here and every one of those divs can have some amount of styling 84 00:05:14,200 --> 00:05:15,630 being applied to it. 85 00:05:15,640 --> 00:05:17,960 So I just want you to keep that in mind for one second. 86 00:05:18,010 --> 00:05:21,690 When I threw a little wrench into our current example. 87 00:05:22,750 --> 00:05:23,070 All right. 88 00:05:23,070 --> 00:05:28,600 I'm going to go back over to my editor and I'm going to wrap my modal element right here with a new 89 00:05:28,600 --> 00:05:29,540 div. 90 00:05:33,500 --> 00:05:40,670 I'm going to give that div a class of positioned and then I'll add in a selector for it right here positioned 91 00:05:40,760 --> 00:05:46,590 like so now I'm going to give positioned to very specific rules. 92 00:05:46,630 --> 00:05:52,280 I'm going to say position is relative and I'm going to give it a z index of 0. 93 00:05:52,330 --> 00:05:56,170 Like so Zangana saved this. 94 00:05:56,190 --> 00:05:59,280 We're going to flip back or the browser and we're going to see what happens. 95 00:05:59,280 --> 00:06:04,710 So when I refreshed the page we're back to the original case where I see I am a sidebar appearing on 96 00:06:04,710 --> 00:06:06,720 the left hand side of the screen. 97 00:06:06,720 --> 00:06:08,160 So why is that. 98 00:06:08,190 --> 00:06:15,450 You'll notice that we still have motile right here with a z index of 10 which is far greater than our 99 00:06:15,600 --> 00:06:18,780 sidebar which has a z index of essentially undefined. 100 00:06:19,050 --> 00:06:25,020 So there is something about adding in positioned with a position of relative and z index of 0 that through 101 00:06:25,020 --> 00:06:26,850 the styling off entirely. 102 00:06:26,850 --> 00:06:34,360 So let's take a look at a diagram and understand why we're now seeing the sidebar on top. 103 00:06:34,390 --> 00:06:36,150 So here we go right here. 104 00:06:36,700 --> 00:06:39,230 So we now have our body element at the very top. 105 00:06:39,280 --> 00:06:43,660 We still have the sidebar with the z index essentially of undefined on just going put 0 on there for 106 00:06:43,660 --> 00:06:44,980 the sake of discussion. 107 00:06:45,070 --> 00:06:49,420 We now have something called the positioned element right here that has that position of relative Z 108 00:06:49,450 --> 00:06:50,370 next of 0. 109 00:06:50,440 --> 00:06:53,470 And as a child 2 it is our motile with a z index of 10. 110 00:06:53,710 --> 00:06:55,180 So here's the issue. 111 00:06:55,180 --> 00:07:02,080 Whenever we place a div with a position of relative and a z index of some defined value even if it's 112 00:07:02,080 --> 00:07:02,650 zero. 113 00:07:02,740 --> 00:07:05,770 So we have some assigned value for z index. 114 00:07:05,770 --> 00:07:08,930 It creates something called a stacking context. 115 00:07:08,950 --> 00:07:13,730 There are many different ways to create a stacking context with success. 116 00:07:14,200 --> 00:07:19,110 We can create a new stacking context by using a position of relative and a z index of 0. 117 00:07:19,120 --> 00:07:21,900 But that's just one of many ways of doing this. 118 00:07:22,030 --> 00:07:28,180 When we create a stacking context it essentially creates a new way of comparing different sibling elements 119 00:07:28,360 --> 00:07:32,900 that have assigned z index values that might want to be rendered on top of each other. 120 00:07:33,040 --> 00:07:39,080 Essentially when we create this stacking context right here we no longer compare sidebars z index with 121 00:07:39,080 --> 00:07:40,770 a modals z index. 122 00:07:40,930 --> 00:07:47,020 Instead we compare these sidebars the index with the root element that has the stacking context that 123 00:07:47,020 --> 00:07:48,550 contains the motile. 124 00:07:48,610 --> 00:07:55,120 So now it is the sidebar with a z index of undefined against the positioned element with a z index of 125 00:07:55,120 --> 00:07:55,840 zero. 126 00:07:55,900 --> 00:08:01,600 And in this case sidebar wins effectively there is the indexes are the same but the sidebar element 127 00:08:01,690 --> 00:08:03,440 occurs later. 128 00:08:03,460 --> 00:08:07,490 See how we have positioned right here and then sidebar is written out. 129 00:08:07,490 --> 00:08:14,350 There is an element listed later on inside of the body element if these indexes are the same then whichever 130 00:08:14,350 --> 00:08:18,280 element occurs later or second will be displayed on top of the other. 131 00:08:18,280 --> 00:08:23,260 So that's why the sidebar is now being displayed on top because we are creating this new stacking context. 132 00:08:23,260 --> 00:08:29,510 And so we are now comparing the sidebar against positioned all right and so we end up with this bad 133 00:08:29,510 --> 00:08:30,550 example right here. 134 00:08:30,740 --> 00:08:32,540 So how would we fix this. 135 00:08:32,750 --> 00:08:36,280 Well before we even think about fixing it you might say to me. 136 00:08:36,320 --> 00:08:36,650 All right. 137 00:08:36,650 --> 00:08:38,790 Well Stephen this seems like a really silly example. 138 00:08:38,900 --> 00:08:42,210 But we have to do is take out this div with class positioned right. 139 00:08:42,230 --> 00:08:47,890 That seems like a real simple example or maybe we should change the z index a position right here. 140 00:08:47,970 --> 00:08:49,740 Now we could change it to like 99. 141 00:08:49,790 --> 00:08:52,970 And now that's going to definitely beat out the sidebar. 142 00:08:53,000 --> 00:08:57,020 So if I save this now and refresh we're back to the original good case. 143 00:08:57,230 --> 00:08:58,590 Well here's the issue. 144 00:08:58,880 --> 00:09:04,500 Remember I've now made a pretty big deal saying that when we have a re-act application we've got all 145 00:09:04,500 --> 00:09:07,970 of these different divs all these different elements all these different components. 146 00:09:08,030 --> 00:09:11,310 And our model might be deeply nested inside there. 147 00:09:11,360 --> 00:09:17,300 And so this is a kind of contrived example of how a application might look that you are going to work 148 00:09:17,300 --> 00:09:22,910 on some day you might work on an application that already has hundreds of components inside of it and 149 00:09:22,910 --> 00:09:26,340 you might have a super deeply nested component structure. 150 00:09:26,560 --> 00:09:31,280 And so it's not always going to be quite so easy for you to just say oh yeah I just need to like change 151 00:09:31,280 --> 00:09:37,310 some parents DSS because this might be CSSA that has been super finely tuned and if you change it you 152 00:09:37,310 --> 00:09:39,190 might break the entire application. 153 00:09:39,410 --> 00:09:44,390 So it's not always a good solution to just say oh yeah just delete that div right there and you'll be 154 00:09:44,390 --> 00:09:48,170 good to go or to change the z index on it and you'll be good to go. 155 00:09:48,230 --> 00:09:53,660 It's incredibly likely that if you're adding a motile into some existing application you might end up 156 00:09:53,660 --> 00:09:57,670 having to break the entire layout and rewrite all the CSSA for the project. 157 00:09:57,770 --> 00:10:01,120 At least the layout us to get a modal working. 158 00:10:01,310 --> 00:10:05,040 So just saying oh yeah I'm going to change the styling or the z index on this position. 159 00:10:05,060 --> 00:10:08,590 Elmet right here or delete it entirely is not a good solution. 160 00:10:08,630 --> 00:10:10,210 It's not a solution at all. 161 00:10:11,090 --> 00:10:12,940 So again how are we going to do this. 162 00:10:13,160 --> 00:10:17,370 Well essentially we're going to use a little bit of a cheat. 163 00:10:17,840 --> 00:10:23,420 Here's what we're going to do rather than showing our model as a child of positions. 164 00:10:23,480 --> 00:10:27,710 We're going to instead show the modal as a child of the body. 165 00:10:27,710 --> 00:10:31,310 Now you might look at this and still think Stephen way that goes against what you were just saying two 166 00:10:31,310 --> 00:10:32,150 seconds ago. 167 00:10:32,330 --> 00:10:33,110 Well not quite. 168 00:10:33,100 --> 00:10:37,820 Remember when we look at this diagram right here of how we have to put re-act applications together 169 00:10:38,120 --> 00:10:42,560 we had said that if the stream delete wants to show a modal the modal component will be rendered down 170 00:10:42,560 --> 00:10:43,110 here. 171 00:10:43,250 --> 00:10:49,190 So I'm essentially saying rather than follow the normal rules of re-act where we nest all of our components 172 00:10:49,280 --> 00:10:55,370 underneath each other we should try to kind of like break or bend this rule a little bit and that's 173 00:10:55,370 --> 00:10:59,560 exactly what we're going to do by using this portable thing with portal's. 174 00:10:59,660 --> 00:11:04,670 We don't have to stick with this type of component hierarchy where everything is a child of this div 175 00:11:04,670 --> 00:11:05,810 with the ID of root. 176 00:11:06,140 --> 00:11:12,710 Instead when we use a portal we can essentially say OK stream delete We want you to render a modal component 177 00:11:12,980 --> 00:11:16,650 but we don't want to have you render a modal as a direct child. 178 00:11:16,880 --> 00:11:24,770 Instead try to render the model component but make it a child of some other element in our HMO hierarchy 179 00:11:24,860 --> 00:11:29,420 such as the body element way back up here. 180 00:11:29,540 --> 00:11:31,930 So that's the core purpose of a portal. 181 00:11:31,970 --> 00:11:36,320 A portal allows us to render some element not as a direct child. 182 00:11:36,440 --> 00:11:42,560 We can instead render that element or that component as a child of some other element inside our HDL 183 00:11:42,560 --> 00:11:43,280 structure. 184 00:11:43,280 --> 00:11:47,310 Most commonly the body why would we want to do this at all. 185 00:11:47,420 --> 00:11:52,580 Well we would do this to get around all this rules of stacking contexts or trying to show a modal or 186 00:11:52,580 --> 00:11:54,810 CSSA issues or stuff like that. 187 00:11:54,860 --> 00:11:56,370 There are many different scenarios. 188 00:11:56,420 --> 00:12:01,250 Modals are just one of them but it's the easiest one to show where we might want to render some element 189 00:12:01,240 --> 00:12:06,980 or some component as a child of some other element inside of our application as opposed to just a direct 190 00:12:06,980 --> 00:12:09,550 child of some given component. 191 00:12:09,560 --> 00:12:15,270 So now if we render the modal as a direct child of the body we can set any z index on it that we want. 192 00:12:15,380 --> 00:12:20,870 We will not run into that same stacking context issue that we saw a second ago and will be totally fine 193 00:12:20,930 --> 00:12:26,430 and the modal will show up correctly and not conflict with any other element inside of application. 194 00:12:26,480 --> 00:12:31,400 And so if we go back here to this HTL example the Senshi we would imagine still leaving position there 195 00:12:31,580 --> 00:12:36,620 and leaving whatever other content position had you know maybe position had a bunch of text inside it 196 00:12:36,650 --> 00:12:37,850 or something like that. 197 00:12:38,000 --> 00:12:45,360 And we're going to instead just take our div with class modal and make it a direct child of the body 198 00:12:45,450 --> 00:12:46,390 like so. 199 00:12:46,390 --> 00:12:52,040 So now if I save this we can go back over and we're back to good operation as we saw before. 200 00:12:52,350 --> 00:12:52,620 OK. 201 00:12:52,650 --> 00:12:53,910 That's that's pretty much it. 202 00:12:53,940 --> 00:12:56,760 That's why we make use of portal's. 203 00:12:56,820 --> 00:13:00,500 Now the one part I left out here is telling you how we use a portal. 204 00:13:00,510 --> 00:13:02,180 So let's take a quick pause right here. 205 00:13:02,190 --> 00:13:07,410 When we come back in in the next section I'll show you how we create a portal and render something into 206 00:13:07,410 --> 00:13:07,750 it. 207 00:13:07,860 --> 00:13:10,650 So quick break in I'll see you in just a minute.