Using a Scrollable Div To Show Multiline Data in ASP.NET

Displaying Read Only Page with Literals and Scrollable Div

by Les Smith

How do I get a Div to Scroll?  I need to show a page of read only data and want the page to look clean, not using ReadOnly TextBox Controls.  In ASP.Net, we sometimes get so caught up in using ASP.NET Server Controls that we forget the power of basic HTML which takes much less time to render that complex controls.  Also, within the ASP.NET controls are some that are simpler and take less resources to render than others, all the while performing the same thing.

In this article and the short code snippets, I will show that it is better to use Literal Controls than Labels.  I use the Label control to label the fields, but because I do not need to bold, change the font or style, I use the Literal control for display of the data.  In essence, the Literal control is a more "Light Weight" control and is sufficient for the way that I am using it.  Figure 1 shows the way that I designed the controls that will be used in Figure 3 below:  There are two table rows of data.  Each row employs a Label control to label the data.  In the first row, the data is displayed in a Literal control because I do not need any formatting of the data.

In the second row, I again use a Label to name the data, but I use a scrollable Div.  I used this instead of a read only TextBox control because it has a better appearance.  I do not want the user to be able to modify the content of the data field, but I do want them to scroll this field as it may contain more characters than can be shown in the box without scrolling.  Again, I did not like the appearance of a greyed out read only TextBox.  The scrollable Div has all of the functionality without the greying of the control, thus making the appearance of the control more consistent with the other controls on the form.

Figure 1 - Design of Lable and Literal Controls

<tr>      <td align="right" valign="bottom">         <asp:Label ID="lblZipCode" runat="server" CssClass="LabelBold"             meta:resourcekey="lblZipCode"></asp:Label>        </td>      <td align="left" valign="top">         <asp:Literal ID="litZipCode" runat="server" >asp:Literal>      </td>   </tr>   <tr>     <td align="right" valign="top">        <asp:Label ID="lblReason" runat="server" CssClass="LabelBold"            meta:resourcekey="lblReason"></asp:Label>       </td>     <td align="left" valign="top">        <div id="divReason" runat="server" style="top: 100px; border: 1px;           border-color: Black; border-style: solid; width: 300px;           height: 60px; overflow: auto;">        </div>     </td>   </tr>

Figure 2 simply shows the population of the two controls.  Since the Literal and the Div can display HTML, I have to replace CrLf with <br /> so that the browser will honor the EOL characters.


Figure 2 - Populating the Controls

txtZipCode.Text = pn.Zip;    divReason.InnerHtml = pn.Comments.Replace(Environment.NewLine,"<br />");

Finally, the image at Figure 3 shows the rendering of the controls shown in Figure 1.

Figure 3 - Rendering of the Controls.

Need to automatically organize your code windows?  You'll be amazed how easy it is to keep the code in your code windows organized.  TRY IT FREE FOR 30 DAYS BY CLICKING HERE.

Automatically generate braces in C#! Try CSharpCompleter and stop wasting valuable time needlessly typing hundreds of braces {} daily.  Try CSharpCompleter for 30 DAYS FREE.

Ask a Question, or give your feedback on my articles or products by going to the KnowDotNet Forum or by clicking on My Blog.

  

You can also email me directly at les@KnowDotNet.com.