Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

Introduction:

In this article I will explain how to show div only with vertical scrollbar or horizontal 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 RSS subscribe by email Subscribe by Email

3 comments :

DHEER said...

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 ?

Tapan said...

I used this code.
Thanks.....

Tapan said...

Hello sir, I want to change language dynamically.
How it possible ?

Give your Valuable Comments

Other Related Posts

© 2010-2012 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.