how to add horizontal scrollbar to top of panel in div?

Posted by Prabu_Spark under ASP.NET on 12/3/2013 | Points: 10 | Views : 7082 | Status : [Member] | Replies : 5

Write New Post |

Search Forums | Answered

Resolved Posts |

Un Answered Posts |

Forums Home

Hi sir,
Tell me the steps to add horizontal scrollbar to top of panel in div tag. I am using gridview having 25 columns , i got scroll bar at the bottom, my question is how to add horizontal scrollbar at the top of the gridview. I tried the below code, but i did not get the solution, Kindly give me the solution for this problem.

Default.aspx:

Code1:
**********

<div style="overflow-x:auto;overflow-y: auto; width:1200px;">
<asp:GridView ID="GridView1" runat="ser
ver" AutoGenerateColumns="False">
</asp:GridView>
</div>

Code2:
**********

<div style="overflow:scroll; width:1200px;">
<asp:GridView ID="GridView1" runat="ser
ver" AutoGenerateColumns="False">
</asp:GridView>
</div>

With regards,
J.Prabu.
[Email:prbspark@gmail.com]

Reply | Reply with Attachment

Alert Moderator

Responses

Posted by: vishalneeraj-24503 on: 12/3/2013 [Member] [MVP] Platinum | Points: 25

0	Hi you can refer below example:- refer to this example: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> #doublescroll { overflow: hidden; width: 150px; } #doublescroll p { margin: 0; padding: 1em; white-space: nowrap; } </style> </head> <body> <form id="form1" runat="server"> <div id="doublescroll"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <script type="text/javascript"> function DoubleScroll(element) { var scrollbar = document.createElement('div'); scrollbar.appendChild(document.createElement('div')); scrollbar.style.overflow = 'auto'; scrollbar.style.overflowY = 'hidden'; scrollbar.style.width = '150px'; scrollbar.firstChild.style.width = element.scrollWidth + 'px'; scrollbar.firstChild.style.paddingTop = '1px'; scrollbar.firstChild.appendChild(document.createTextNode('\xA0')); scrollbar.onscroll = function () { element.scrollLeft = scrollbar.scrollLeft; }; element.onscroll = function () { scrollbar.scrollLeft = element.scrollLeft; }; element.parentNode.insertBefore(scrollbar, element); } DoubleScroll(document.getElementById('doublescroll')); </script> </form> </body> </html> Prabu_Spark, if this helps please login to Mark As Answer. \| Alert Moderator

Hi you can refer below example:-

refer to this example:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
#doublescroll
{
overflow: hidden;
width: 150px;
}
#doublescroll p
{
margin: 0;
padding: 1em;
white-space: nowrap;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="doublescroll">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<script type="text/javascript">
function DoubleScroll(element) {
var scrollbar = document.createElement('div');
scrollbar.appendChild(document.createElement('div'));
scrollbar.style.overflow = 'auto';
scrollbar.style.overflowY = 'hidden';
scrollbar.style.width = '150px';
scrollbar.firstChild.style.width = element.scrollWidth + 'px';
scrollbar.firstChild.style.paddingTop = '1px';
scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));
scrollbar.onscroll = function () {
element.scrollLeft = scrollbar.scrollLeft;
};
element.onscroll = function () {
scrollbar.scrollLeft = element.scrollLeft;
};
element.parentNode.insertBefore(scrollbar, element);
}
DoubleScroll(document.getElementById('doublescroll'));
</script>
</form>
</body>
</html>

Prabu_Spark, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: vishalneeraj-24503 on: 12/3/2013 [Member] [MVP] Platinum | Points: 25

0	Also try:- <div class="wrapper1"> <div class="div1"></div> </div> <div class="wrapper2"> <div class="div2"> <!-- Content Here --> </div> </div> CSS: .wrapper1, .wrapper2 { width: 300px; overflow-x: scroll; overflow-y:hidden; } .wrapper1 {height: 20px; } .wrapper2 {height: 200px; } .div1 { width:1000px; height: 20px; } .div2 { width:1000px; height: 200px; background-color: #88FF88; overflow: auto; } JS: $(function(){ $(".wrapper1").scroll(function(){ $(".wrapper2").scrollLeft($(".wrapper1").scrollLeft()); }); $(".wrapper2").scroll(function(){ $(".wrapper1").scrollLeft($(".wrapper2").scrollLeft()); }); }); Prabu_Spark, if this helps please login to Mark As Answer. \| Alert Moderator

Also try:-
<div class="wrapper1">
<div class="div1"></div>
</div>
<div class="wrapper2">
<div class="div2">

</div>
</div>

CSS:
.wrapper1, .wrapper2 {
width: 300px;
overflow-x: scroll;
overflow-y:hidden;
}

.wrapper1 {height: 20px; }
.wrapper2 {height: 200px; }

.div1 {
width:1000px;
height: 20px;
}

.div2 {
width:1000px;
height: 200px;
background-color: #88FF88;
overflow: auto;
}

JS:
$(function(){
$(".wrapper1").scroll(function(){
$(".wrapper2").scrollLeft($(".wrapper1").scrollLeft());
});
$(".wrapper2").scroll(function(){
$(".wrapper1").scrollLeft($(".wrapper2").scrollLeft());
});
});

Prabu_Spark, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: vishalneeraj-24503 on: 12/3/2013 [Member] [MVP] Platinum | Points: 25

0	Also check:- http://tech.pro/tutorial/845/using-jquery-slider-to-scroll-a-div Prabu_Spark, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Bandi on: 12/3/2013 [Member] [MVP] Platinum | Points: 25

0	Refer http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.panel.scrollbars(v=vs.110).aspx http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-in-ASP.Net.aspx Mark This Response as Answer -- Chandu http://www.dotnetfunda.com/images/dnfmvp.gif Prabu_Spark, if this helps please login to Mark As Answer. \| Alert Moderator

Posted by: Samirbhogayta on: 12/4/2013 [Member] Starter | Points: 25

0	You can try the following css : #slider { width: 330px; overflow-x: scroll; overflow-y: hidden; } #thumbset { width: 550px;// whatever width you want } SAMIR Sr. Software Engineer Prabu_Spark, if this helps please login to Mark As Answer. \| Alert Moderator

Latest Posts