Hello, last video, we work well within the table of St. Louis to the teachers, we have the teacher here and this is the teacher clause. But actually before I go to the next page, I just wanted to do something related to the user interface. actually try to avoid as much as you can, as a scrolling. As you can see this scrolling will not make the page looks like good try to avoid this white space. So actually in this video, I will just make some refined for this table. So initially as you can see this has grown is because of the table component height is much more than the Bennett Collection.
This is a better Collection. This is the table this is why we have zis and inside the table itself, it looks is a little bit horizontal which needs to be reduced. So What I can do, I will try to increase the Bennett collection here the appearance component of the table height that would be much greater than the table and I will be reducing gender column. Teacher ID a little bit to that this horizontal will gone. So this is Ferris do these two changes after that we will move to the next part. So to increase the height of suspended collection, this is a collection.
Okay, we sit only the width. So you will find here so height as well. We can say for example, the height is 550 pixels. Let's have a look in it. And in the table I said the teacher ID we can reduce it a little bit instead of 100. We get 80 and gender as well make it 80 maybe teacher ID can be 70.
So now we reduced down to 50 Bexar so this was Refresh and see how this will looks like. Let's see as you can now see the scroll is gone. This is who looks much better than making any scrolling, we will move to the next one which is here as you can see this teacher clauses not in the top. So, the width here needs to be increased. So we need to align for this to table to the top to make the alignment to the top. here this is the button group layout you will find here today in V aligned This is by default minute we can make it in the top okay.
Plus we can increase the table width because as you can see Bennett collection which is much greater than much because then the table width so The table with for the second feature classes we can go to society to study 50 we can make it maybe 550 so this now refresh the page Okay, it is now both aligned to the top. But here is current because of the Bennett collection. Hi it is listens a table height so let us increase the Bennett collection height as well. So we can take the same height here and see the other bundle collection. Here Here I can see now both table or okay or Sasame Without any scrolling, this is what looks much better than you have a scrolling. So try while you develop your page and you'd sign to avoid any scrolling as much.
As much as you can try to avoid a lot of white space, you try to fill the void space this page is looks nicer than the previous one. So, hopefully this gives you an idea how you can make a small enhancement in the UI component. So see you next video.