Original subtitles

What's my car metre upgrade screen scroll

So that we can

More upgrades

I'm going to open up the menu here

What we want to use is

Under as a child and the Martin contain

What are childhood we want to use a

Scorpion

And let's put a scroll container

What's the first child and then let's make a great contain

A child of the school

Now that bridge container is going to shrink over to the side

And that's because

It's no longer

Being positioned in the same way

So we actually need to go down Bridge antenna

Container sizing and then click export

And that should

Make everything go into the centre

Like we expect

Now by duplicate

Upgrade card

You can see now

Dad

There is a scrollbar

On the right hand side

And I can just do book a couple more and as we add items the scrollbar appears now this looks a little bit awkward

Because we have this margin container in place

Subtitled by online-courses.club We compress knowledge for you!

And so we actually need to change the order of these things so

I'm going to put the scroll container above the margin container like so

And then select the Anchor presets with my scroll container selected

And said that too

4

Ok so now that brings it to the edges

We still want some padding

So let's put the margin container as a child

Scroll container

And then let's Drive the grid-container as a child at the margin container

Text an hour dinner oven reset

But that's ok

We just need to

So I can margin container

Just like so

And scroll down

And we want to select expand for the

For now that you should see is that

The scroll bar is now

Perfectly online

With the side of the window

And then our margin container

Is allowing us to have some padding around the Top

Down to the bottom of the wind

Alright so everything here is looking great

No of course we do need to style this but before we do that let's just open it

In order to do that we need to stop

Reading

These placeholder cards here so what I'm going to do as I'm simply just going to

Calming down both of these for Loops by highlighting them and then heating control care

And now I can't click this run current scene

And you can see now that

You can scroll with the mouse wheel

And everything

Great

Also noticed is that a back button

Is scrolling with it

And that's not something that we were

To happen

So let's make a couple of Ages

To resolve this back button scrolling

Let's do this

Let's copy this Martin container in paste

At the root of the menu here

That's going to create a lot of problems but that's ok

Read delete the great container in at 2nd March in containers

And then we'll just have our own Martin container here

With a bang

Why do we copy it because now we have all of the padding that's the same so that these things are

Find at the top rate

And then in a scroll container

Let's delete the back button from our scroll contain

And I make sure this is very important

Make sure to mark the new back but

As axis as unique name

And then move the margin container that contains the back button

Hello

Describing

Ok and make sure your Martin container looks like this in terms of its bounding rectangle

If it's full screen it will block

The employee of the rest of the

You are

St Helens run

This any casino or back button is fixed to the top left and we can scroll our lives

One thing we can do to improve the visuals here is go to the grid container

And let's make the visa operation the same as the HD

Console

16

Add that makes it look a lot more uniform

And the final thing to do is to style this scroll contain

So let's open up our theme by searching for the theme in the

File system

What are theme open

We need to override a style now the style we want to override is not

The scroll container

Because the score container is not the thing

That controls the styling on the bar

It's the V scrollbar

The vertical scrollbar

That we needed

So search for vs crowbar

Doubleclick to edit

And then now he's got all of the

No you'll notice that this

Suspiciously similar

2 hour

Slide

Right so what I'm going to do is I'm going to go to my age slider

And I'm going to copy

A lot of these

Styles

So first I'm going to copy the style box flat for the slide

Copy

Then go back to the bistro bar

I'm going to override the scroll

Proper

And then pissed

Now if I click away and then go back into the scenes or go to main menu then go back to many men

You see that has been updated

So that's good

Go back to our slider

Let's copy the grabber area here

So copy that Style

Go to the bistro bar

And then

Piste or override the grabber

And Peace that in there

And have you click back and click over

You should see the

The scroll bar has disappeared in that's fine

Because we're going to go back to Rhyl or no

Copy the grabber area highlight now

Go back to view scroll bar

And then

Override a Grabber highlight in pasted in there

Number for eagle

Further

Go ahead and make all of these Styles unique because we copy and paste with them right so we need to click

Drop down

Click make unique

On all of those that we've over it

And the reason that our scrollbar is not showing up is because we need to change this

Scroll

Style so

Again make sure that you have

Mark everything as unique if you haven't

Then you're going to inadvertently modify the styles that we copy

Which is going to affect our

Age slider

So when do marketers as unique click into the scroll and what we need to change here's the content

So

Let's remove the contents margins for the top

And the bottom so sisters 20

And then for left and right let's you something like

4 and 4

Have you clicked over the main menu and click the menu you'll end up with something like this as a very nice looking scrollbar

And if we

Run that seem we should be able to go out and grab it now

There is a different style when it's focused which we will address

Well let's go ahead and change that colour

Before we go any further so

The grabber highlight

What's click into the grabber highlight style and change this bgcolor

And I'm going to use the same yellow as the buttons in that is

Hex code fy

A&E

34

So I can have

A

And I'm going to add it to my swatches

Anna let's go back clicking this

Previous added button here

And we need to change it for the grabber as well so there's bgcolor

Change it to that same car

Ok so now click over collect back

Now we've got a nice

Yellow bar which is nice because that indicate

In our game in interactive UI element just like the buttons right

Get some now we need to change this crap rest

We're just going to use the same

The same style so override Greville press

And copy

The grabber or the grabber highlight and paste in there

And then make that unique

As well

So now let's run the scene you should be able to grab the grabbing

And a truly change size

But we can grab it and scroll

And a let's make sure the back button works

There we go

So now we have scrolling capabilities in our menu

So let's go ahead before we end this lesson

Open up your madam manuscript

And uncommon doors Lines by hidden control k

And then let's just for good measure

Run this again

And now we're not seeing a scrollbar because there's not enough content to school

Alright and then one final styling thing we should do if we should add a disabled state

4

This bar

So the other disabled state when you open a bar theme let's go back to button so the type

Bounce like a bunny

And we need a disabled Style

What I'm going to do as I'm going to copy the normal style here

Copy that

Override a disabled by clicking the plus

Put the drop down

Paste that style in there

Click the drop down again

Click making

Let's go into that disabled texture

And I'm actually going to use

Another text here

So I didn't create a button text

Specifically

But if we click the Edit region

In the submarine

Like snap mode pixel snap I'm going to select this sort of secondary panel

That we created

And I'm just going to

Move the margins so that

One pixel down from each side

And then I'm going to close down

And now it's run I met a man

Are disabled button should look like that

And then

We need to change the colour of that text as well

So

Let's open backup that theme

Go to the

Colour option

And we have this for

Disabled colour

What's going on over ride at Fantasy able to colour in the colour that I'm going to use for the disabled is 8B

9b

Before

And add that to my swatches

The game

Run that seem real

You can see that there's we have I disable the font colour here

Alright so Alameda menu is now in good shape