Angular/ThreeJS - Video 155 fixing styles

hey everybody so yeah yesterday we uh well I want needed to make a p uh a place for me to take a picture uh for the thumbnail while I still have this cool H font um graphic on here I didn't want to uh you know by the when I make changes I end up losing all of that stuff so I taking a picture at the end probably wouldn't be as uh wouldn't get me as cool of a picture here but I'm not going to do much today um oh man I did not commit the last let me do that commit real quick addit video 1544 create font drop on component all we go now so basically we have this font dropped down all I want to do is do the Styles uh so basically this one doesn't look like everything else everybody else is this long I believe that's 400 long um so uh let me just do a quick inspect on that so we can double check that um yeah so let's see yeah 400 P pixels long so I think I played around a little bit with this uh the other day after the video and I think the best way to do that will be to set this component itself to a width of 400 so and I might have to change its uh its display type as well so basically this component if we go into the mesh manager is called what are you called keep going keep going okay I do let's see font list control font okay font list app font list so basically I want to set that font list to be 400 wide basically um and I'm going to give it a border just can see it so basically I'm going to give this a it's going to be a specificity of one because it's just the um data uh the HTML element type so um with is equal to 400 PX and then border is equal to one PX solid black let's see what we get adms show the edit form turn it into a text fild to see okay so it did not and I believe it's because this is not this the type of uh display type it is um so let's go to here um yeah see it's even going to tell us uh display see the by default it makes it a display of inline um um so if we say display block block yeah so that definitely works better so let's go ahead and do that real quick oh my goodness display blck contr C so we definitely won't keep the um border but I need it just so I can see what's going on um because the next step will be to make the internal um uh thing uh 400 I mean 100% um so uh so that's good I think that's working and so basically we want to take whatever the top piece of this is my phone is ringing I don't know if you can hear it I'll have to take care of that after this so I want to make this a width of 100% there we go so basically I want to take a map form fi and give it a width of 100% I do not believe they would it will have any conflicting Styles so we don't need much specif specificity so all right Daisy that's good enough Matt form build width is equal to 100% and we'll add our mess change that into a text so that's perfect okay so now all we need to do is get rid of the Border over here and that's that just double check that it works and guess I need to check that phone call um and yeah that's yeah this looks good uh the next video I think what I'm going to do is uh basically while this is happening I would like while the the the fonts are loading I want to um like do a um I want to show a loading like some loading text and then um and so we'll get that working next um so it'll basically always say loading because I'm not actually going to um listen for the update until after I get that working um let's see this is should be a pretty short video I hope uh let's see can never tell um let's see where are you 6 minutes and 50 seconds that's not too bad uh I'll probably have more videos like this for the next well probably from as long as I stay gamefully employed I'll probably have to do shorter videos but anyways happy coding everyone bye or bye

Channel: Marty Trujillo

Views: 9

Keywords:

Id: VBGAI7srF-M

Length: 7min 12sec (432 seconds)

Published: Thu Jul 04 2024