LET'S CONTINUE DOING A LITTLE BIT MORE styling on our results detail a component.
I want to mention very quickly that if you're on a device with a slightly smaller screen you might notice
that the content at the very bottom is kind of cut off.
And right now we cannot scroll vertically.
So we're gonna fix that up in just a moment.
But right now let's finish up with styling on our results detail.
All right.
So thinking about the results detail.
The first thing I want to do is that in a little bit of padding or margin on the left hand side of every
results detail component that's going to push this card right here off the left hand edge to something
like that right there.
Now would definitely be pretty nice so inside of my results detail I got to find my style sheet and
I'll add in a new section called container and I'll give it a margin left of 10 units I'll then be sure
to apply that to the route view inside of my component so style is styles dot container then save that.
And now we've got a little bit of margin on the left hand side.
You'll notice that the title right there is still pushed up all the way to the left.
The reason for that is that our title for each section is rendered inside of our results list.
So chances are we want to make sure that all the content inside of our app has kind of a even margin
on the left hand side.
In addition you might notice that the 10 units that we just added right here on margin left is not the
same as whatever margin we added into that search bar.
So I think that we should make sure that we get a very consistent edge going all the way down the screen
a very easy way to do this would be to go back over to our search screen component.
Remember the search screen component is responsible for rendering everything on here.
So instead of search screen we could add in some margin on the left and right hand side which would
give us a very consistent margin all the way down along the edge.
However that would really have a unintended result.
Let me show you what I mean.
I'm gonna go back to my results detail.
I'm going to find that container style we just added and I'm gonna comment on the margin left on container.
It's now back to where it was before then I'll go back to my search screen.
I'm going to find the parent view right here and I'm just going to pass a style in directly to it so
I can put a object literal inside there and I'll give the thing a margin left of ten.
Now like I just mentioned that should give us a very consistent edge.
Going down the left hand side that's not going to fix the search bar for right now.
But we'll come back and figure that part out in just a moment.
So going to save this and we're going to very quickly see that it kind of looks OK.
But like I said there is an unintended result when I start to scroll this list right here horizontally.
You'll notice that the image and all the text inside there starts to get cut off.
Thanks to that margin on the left hand side it's easier to see if I start to increase that margin on
the left hand side to maybe 30.
Now I've got 30 units right there.
And again as I start to scroll horizontally that card or that image in the text underneath it is just
entirely cut off by that margin we just added in 2010 that we've got some element that's growing horizontally
even though it would be really nice to solve all this kind of like sidebar issue and get some spacing
in there by adding in a margin on our most parent element.
Unfortunately it just doesn't quite work out because we're like I said just going to add up end up adding
in a bunch of spacing that's going to cut off whatever we're trying to scroll which really doesn't look
that great.
So unfortunately adding some top level margin side here is just not going to work out.
So we're going to have to go back to the other approach inside of our results detail going to find that
container element again an uncommon day margin left.
So essentially we're gonna have to go through all of our different components that show here and add
in some margin to each one individually.
Okay.
So going to save this once again with the container margin left of 10 and I'm back to that where now
I can see those elements scrolling very safely off the far left hand edge Yep.
So that's a little bit better.
So now we just need to make sure that we apply some very consistent margin left on all of these different
components.
I'm going to first open up my search bar component once again.
So here's our search bar and remember we had that background style and this one has a margin horizontal
so on the left and right of 15.
So in one place we've got 10 in another place we have 15.
And like I said we really just need to be consistent.
So I think we can stick with a margin of 15 across this entire left hand and right hand edge.
So back inside of results detail I'll change that margin left to 15 and now that's very consistent with
the search bar and now we can do the same thing with that title as well that we have inside of our results
list.
So here's our results list element.
There's the text element that's showing the cost effective bit pricier and big spender.
So I'll find the title style and add in a margin left of 15 here as well.
Okay.
So there we go.
Now we've got a very consistent edge on that left hand side so we can scroll through and I'd say that
looks pretty reasonable.
Let's go back over our results detail.
We saw a couple more styling things to take care of.
It's the next thing I think we should take care of is make sure that we just have a little bit of spacing
underneath each of these elements to kind of offset the next section.
We can add in some margin bottom to the container element inside of our results detail.
However that would result in this kind of scrolling section ending up being a little bit larger.
So chances are we instead want to open up our results list add in a new style where this wrapping view
element and apply some margin bottom to it instead so inside of results list I'll add in another container
I'll do some margin bottom of about 10 in this case and will apply that to the wrapping view.
So style is styles dot container we'll save that.
And now we've got some pretty good vertical spacing there.
Definitely a lot better.
I think maybe the last thing we need to take care of is to add in a little bit of text margin or margin
underneath this title right here to get a little bit of space against that heading and the stuff we're
scrolling through.
So I'll find the title right here and I'll do some margin bottom there as well.
I'll do.
How about just an additional five units to add that in get even better and now maybe the last thing
we have to do is add in a little bit of margin on the bottom of our image and just get a little bit
of offset against the title of the restaurant.
So back inside of results.
Detail here's our image I'll add in some margin bottom there as well.
And I'll once again just do five
get that looks good to me.
Okay.
So that's on ISIS.
And here is on Android.
So they both look pretty good but there's still two things we need to take care of.
First off if we've got a smaller size device.
Well we need to make sure that we can scroll all the way to the bottom of all these different lists.
And secondly you'll notice that right now we've still got that scroll bar showing on this list which
is a little bit distracting and we probably don't have to show it.
So let's take care of those two things inside the next video.