Introduction:
In this article I will explain how to show div only with vertical scrollbar or horizontal scrollbar in asp.net.
Description:
In previous articles I explained jQuery Countdown timer example, jQuery Scroll to particular div when click on link, jQuery Show Large images preview when hover on image, Generate thumbnail from images inasp.net and many articles relating to JQuery, asp.net, SQL Server etc. Now I will explain how to show div only with vertical scrollbar in asp.net.
In previous articles I explained jQuery Countdown timer example, jQuery Scroll to particular div when click on link, jQuery Show Large images preview when hover on image, Generate thumbnail from images inasp.net and many articles relating to JQuery, asp.net, SQL Server etc. Now I will explain how to show div only with vertical scrollbar in asp.net.
We have different scenarios to set scrollbars check below Code Snippets
Set Horizontal and Vertical Scroll Bars
/*To Set Vertical and Horzantal Scrollbars*/
.scrollcss
{
overflow:auto;
}
|
Set Only Vertical Scroll Bar
/*To Set Only Vertical Scrollbar*/
.verticalscroll
{
overflow-x: hidden; /* Hide horizontal scroll bar*/
overflow-y: auto; /*Show vertical scroll bar*/
}
|
Set Only Horizontal Scroll Bar
/*To Set only Horizontal Scrollbar*/
.horizontalscroll
{
overflow-x: auto; /*Show horizontal scroll bar */
overflow-y: hidden; /*Hide vertical scroll bar */
}
|
If you want to see it in example check below example
Example
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Div With Horizontal and Vertical Scroll Bars</title>
<style type="text/css">
/*To Set Vertical and Horzantal Scrollbars*/
.scrollcss
{
overflow:auto;
background-color:#21b81e;
width:350px;
height:150px;
}
/*To Set Only Vertical Scrollbar*/
.verticalscroll
{
overflow-x: hidden;
overflow-y: auto;
background-color:#2d80e8;
width:350px;
height:150px;
}
/*To Set only Horizontal Scrollbar*/
.horizontalscroll
{
overflow-x: auto;
overflow-y: hidden;
background-color:#21b81e;
width:350px;
height:150px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h3>Div with Both Vertical and Horizontal Scroll Bars</h3>
<div class="scrollcss">
<p>WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSuresh</p>
<p>WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSuresh</p>
<p>WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSuresh</p>
<p>WelcometoAspdotnetSureshWelcometoAspdotnetSuresh</p>
<p>WelcometoAspdotnetSureshWelcometoAspdotnetSuresh</p>
<p>WelcometoAspdotnetSureshWelcometoAspdotnetSuresh</p>
<p>WelcometoAspdotnetSureshWelcometoAspdotnetSuresh</p>
<p>WelcometoAspdotnetSureshWelcometoAspdotnetSuresh</p>
</div>
<h3>Div with Vertical Scroll Bar</h3>
<div class="verticalscroll">
<p>Welcome to Aspdotnet-Suresh </p>
<p>Welcome to Aspdotnet-Suresh </p>
<p>Welcome to Aspdotnet-Suresh </p>
<p>Welcome to Aspdotnet-Suresh </p>
<p>Welcome to Aspdotnet-Suresh </p>
<p>Welcome to Aspdotnet-Suresh </p>
<p>Welcome to Aspdotnet-Suresh </p>
<p>Welcome to Aspdotnet-Suresh </p>
<p>Welcome to Aspdotnet-Suresh </p>
</div>
<h3>Div with Horizontal Scroll Bar</h3>
<div class="horizontalscroll">
<p>WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSuresh</p>
<p>WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSuresh</p>
<p>WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSuresh</p>
<p>Welcome to Aspdotnet-Suresh </p>
<p>Welcome to Aspdotnet-Suresh </p>
<p>Welcome to Aspdotnet-Suresh </p>
</div>
</form>
</body>
</html>
|
Live Demo
Check below divs
Div with Both Vertical and Horizontal Scroll Bars
WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh
WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSureshWelcometoAspdotnetSuresh Div with Vertical Scroll Bar Div with Horizontal Scroll Bar |
No comments:
Post a Comment