[00:00:01] Hi welcome back to the reactor in the sky. We started on the right for the smiles and this guy. We're going to try and finish it. It might be separated into two more guys just so you're aware. But let's start off by kind of replicating this here. So first thing when you didn't see it first thing I notice is that this is all the way of life in our Canavati here and in the middle kind of. So let's go ahead and we have to do is basically give them the correct wins here. So I'm going ahead inspect mode here quick on newsletter title. It's like it's 132 two pixels wide and it's about 120 pixels away which turns out to be 260. So having that 260 pixels there and then this width of these inputs are 760 so it's just 260 and 760. So it's going to go here. And let's first well let's go into our sign in the dioceses us and we are forming their own label and inputs and this is being applied to all the forms in the application. So what do is copy this dev here. And then I want to provide a name for this forum in the class names can say Quast name is equal to newsletter for or let's call it I use Futter form and then we can just reference that in our code here so I'm going to keep this in this file as for now I must say had the newsletter form and then we can Pacer's and you can change that with the input to 760 you just said. [00:02:00][119.2]
[00:02:01] And of course the weights of the labels to use 260 like I just said that should give us more of the effect that we're looking for. Now you'll notice that the titles immediately on top. And that's because the max width of our form is still 620 pixels. So we have to do is actually saying our form here that the what we can actually just change the max width of the four to six twenty nine pixels are the main way my back that way is basically just going to fill up based on the values we have. So it was 129 and signed up and 500 for our input. So that's going to be 629 so it's going to fill it up just right here on the first one. This one is 260 and the width is 760 so it's going to go a little bit over but that's okay because the minimum one is six 29 and can go higher. So that's all that's working. Now let's check this here. It's looking pretty nice. So next thing our change that says newsletter title and this is body and this is also pretty big. Textarea instead of an input. So in Reebok's form I just search the simple form example that we looked up before and there there's this notice option and it's actually a form so textarea. So right here it is that textarea. So all we have to do is instead of saying we want to pass a textarea. So what I want to do is go into a newsletter and instead of calling this our render input what we should do is just get rid of this function entirely but let's start by moving the labels back. [00:03:43][102.2]
[00:03:44] So let's cut the labels out and let's put them about their fields. And what we did in a signing form and put them in their own device. So I'm going to put a dev here and then I only give this a class name let's say text or let's say I use letter form underscore underscore title. So I'd throw those in there and then I want to copy these ones aren't going to them out like that and I want to give this a class name of the newsletter form underscore under spell body. Now we need to fix this code because it won't compile so for HDMI for we need to change this to just a title and then for the tax let's put newsletter title and then let's go to our next field and let's do the same thing let's say each team off offer body and the text needs to say Okay now what I want to do is read factory render input function and actually just get rid of it because we need to make this a textarea so we can do that pretty easily. First I want to cancel button in its own dev here and then I want to see a sign and I see us. We don't actually need like a lot of the stuff. So really the more grittiest Heidi any of this junk we just need the wait because that's what we're changing right. So just leave those in and that's looking good. Now with that in the margins. So I'm not sure why this is doing that I'm going to get rid of this case I'm going to give this a what was it. [00:06:07][143.0]
[00:06:08] So we just need to succeed. Plus 760. So about 10 20 or can even say with his 100 percent. Because these are still going to be a wave of 216 760. So that should be good. Not sure that's working right now but we can deal with that in a second. So back in here I just want to I want to refactor these components here so I don't want it to render any input on each one and each one of these textfield I'm going to get rid of the input entirely from interbreeding input with me. So just cut out the entire imperfection and on the first one I just want to pass on an error function and then just have a return this is going to be input and then assign it instead of Sinkfield that while we want to say field number but we need a passing field in the function like that. Now same thing for here except for we wanted to view textarea splits the field and then with changed just to text they get actually get. Let's go back to the end of the page. Yeah we're getting our textarea and it looks kind of garbage. So let's fix it by going and you're saying that's your size. And without a comma here and just say textarea we could also while we don't want to do that we want you to let's see you want to add it as a link to input because we want to tell the same. But let's say textarea The here as well. So it inherits these. Looking nice. [00:08:06][118.6]
[00:08:07] Now the margins for these so first thing I want to get rid of is this ability to make it grow because we want that just to be fixed height. We'll see how these three 365 pixels high solutes good work textarea us just say we want to apply this to all the forms of pressure will to fight the are or let's just say while we can apply it let's just apply it to let's just put it toward say textarea and say hey is what the minimum is what was it again 3 5 3 5 pixels let's say. I think it's resizable resizes done. FREE RIGHT NOW. Check back and yeah you can't resize it. It's the same idea. And yet things are looking nice in the margin now for this. Let's go to our design here it looks like it's 20 pixels and this one is about 40 pixels so all we have to do is reference these are for body in form title Annahar form down here so I'm just going to say newsletter form underscore underscore title and newsletter phloem underscore underscore body and then I just want to say I'm the title margin top is 41 pixels on this one margin topic is 21 pixels 20 pixels 20 pixels. So check it out. It's going to appear. Yeah it's pretty dandy. Next thing I want to do is get this body label near the newsletter titles so we can probably do that using using some what they call flex box. So on the news. Or we can do. Let's see. Yeah we could use flex box maybe a challenge label applied on the dev here. Let's say you display flaks and say oh that works immediately. [00:10:55][168.2]
[00:10:57] Alright I guess I know a lot about Firefox. I'm not that great but I know enough so that works now. It looks like the titles are really all the way to the top. They might be centered so of their design looks like you can see that Ashlie line in the Top End lines up with the box. So we want them to see exactly where they are. Yeah. So yeah that's it for that. Look at the app we have going on here. Can't really won't. Obviously we need to fix the cancel and save bands but let's see that in the next guy catching the next guy. We will fix the cans and save bundles Commissioner Cole Stice. Good gig coming. I'm just going to say started styling more with say style. The newsletter form okay I'll catch the next guy where we will finish up the styles for this component. I'll see you then. [00:10:57][0.0]
[651.1]