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 in asp.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 in asp.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
Welcome to Aspdotnet-Suresh
Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Div with Horizontal Scroll Bar
WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh
WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh |
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
3 comments :
How to hide scroll bars for IFRAME?
I don't want to use Scrolling attribute as it is deprecated in HTML5.
Check this fiddle in all browser : http://jsfiddle.net/zs45N/
overflow:hidden is hiding scroll bars in Mozilla but it is not hiding scroll bars in Chrome and IE.
how to hide scroll bars using CSS ?
I used this code.
Thanks.....
Hello sir, I want to change language dynamically.
How it possible ?
Note: Only a member of this blog may post a comment.