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 : 3444 | Status : [Member] | Replies : 6
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]



Responses

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

Up
0
Down
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

Up
0
Down
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

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

Up
0
Down
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: Bageshkumarbagi on: 12/3/2013 [Member] Starter | Points: 25

Up
0
Down
Hi prabu,

Read this article this may help you.
http://bytes.com/topic/net/answers/578332-add-scrollbar-gridview

Thanks,
Bagesh Kumar Singh
Mark as answer if you have been satisfied

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

Up
0
Down
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

Up
0
Down
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

Login to post response