shaaz logic

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.

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.

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

<head>

<title>Div With Horizontal and Vertical Scroll Bars</title>

/*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>

<h3>Div with Both Vertical and Horizontal Scroll Bars</h3>

<p>WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSuresh</p>

<p>WelcometoAspdotnetSureshWelcometoAspdotnetSuresh</p>

</div>

<h3>Div with Vertical Scroll Bar</h3>

<p>Welcome to Aspdotnet-Suresh </p>

</div>

<h3>Div with Horizontal Scroll Bar</h3>

<p>WelcometoAspdotnetSureshWelcometoAspdotnetSureshWelcometoAspdotnetSuresh WelcometoAspdotnetSuresh</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

shaaz logic

Followers

Thursday, 10 January 2013

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

No comments:

Post a Comment

About Me