V24s

"Get Updates : Subscribe to our e-mail newsletter to receive updates........" "Good Luck frnds" Admission 2019 Application Form 2019 Colleges Entrance Exam 2019 Results 2019 Notification 2019 University Educational Jobs 2019 Government Jobs 2019

Search This Blog v24s guys

15 April, 2013

CSS to Show div Only With Vertical Scrollbar or Horizontal Scrollbar or Both

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

No comments:

Popular Posts

Recent Posts

Google Analytics