October 22, 2018
Hot Topics:

ASP.NET Tip: Creating Scrollable Micro Windows

  • October 22, 2003
  • By Karl Moore
  • Send Email »
  • More Articles »

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 www.karlmoore.com.

# # #

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

By submitting your information, you agree that developer.com may send you developer offers via email, phone and text message, as well as email offers about other products and services that developer believes may be of interest to you. developer will process your information in accordance with the Quinstreet Privacy Policy.


Thanks for your registration, follow us on our social networks to keep up-to-date