Microsoft & .NET.NETASP.NET Tip: Creating Scrollable Micro Windows

ASP.NET Tip: Creating Scrollable Micro Windows content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Imagine that you’re displaying a large table of results on your page. Wouldn’t it be nice to show the table inside a neat scrollable micro window, rather than serving up one big messy page?

It’s completely possible, and it requires only the smallest of changes.

Here’s a quick sample that demonstrates the technique. It uses a div tag and relevant sizing and overflow attributes to define the micro window. Nested between the opening and closing <div> tags is the content we want to encapsulate (in this case, the HTML from our data grid).

<div style="width:100%; height:200; overflow:auto;">
  <asp:datagrid id=MyDataGrid runat=server />

To add this effect, open your project in Visual Studio .NET and enter HTML view in the ASPX page that you want to change. Make your alterations, using this sample as a template, and then switch back to Design view. You’ll notice the designer automatically recognizes the tags and displays your DataGrid (or other controls) inside a micro window of the size you specified. It’s perfect!

Figure: An example of the easy “micro window” in play

About the Author

Karl Moore (MCSD, MVP) is an experience author living in Yorkshire, England. He is author of numerous technology books, including the new Ultimate VB .NET and ASP.NET Code Book (ISBN 1-59059-106-2, $49.99), plus regularly features at industry conferences and on BBC radio. Moore also runs his own creative consultancy, White Cliff Computing Ltd. Visit his official Web site at

# # #

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Latest Posts

Related Stories