Home > English > Developing Windows 8 – Adding a ListView to your settings charm and overcoming dual vertical scrollbars

Developing Windows 8 – Adding a ListView to your settings charm and overcoming dual vertical scrollbars

Here is another tip that I ran into recently when trying to get a ListView setup properly in a setting page. When I was coding for the ListView I came across the following screenshot:

Here is the sample CSS that I used to configure the ListView:

#listview1 {
    height: 100%;
    width: 100%;
}

Clearly this isn’t acceptable and we need to find a way to fix this.

It turns out that the solution is quite simple. It is easier to see this problem when developing traditional web applications but the same applies here. The height of the ListView was actually taller than the visual area that we were viewing and this is the reason for the second vertical scrollbar.

If we modified our CSS to use the following markup:

#listview1 {
    height: calc(100vh - 155px);
    width: 100%;
}

Our screenshot would then look like the following:

We are using a new feature of CSS3, the Calc function. One thing to note is that I am adjusting for the height of my header in the settings pane. You may have a different style or header altogether so be conscious as to how your adjust your height.

Hope this helps…

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: