jQuery UI Widgets › Forums › Layouts › Panel and Responsive Panel › Hide Horizontal Scrollbar
Tagged: horizontal, jqxpanel, panel, scrollbar
This topic contains 8 replies, has 5 voices, and was last updated by Andrew Cooper 11 years, 1 month ago.
-
Author
-
Hi Guys. I am wanting to use the Panel Widget as a way to display dynamic text that scrolls vertically only, and to have no H Scrollbar. Is this possible? I have tried a few different things such as editing the overflow in the base.css, changing the width of the div that holds the text to be smaller than the width of the panel, increasing the size of the panel. The last two methods doesn’t remove the H Scrollbar, but instead reveals empty space under the VScrollbar, when you move the HScrollbar. Any recommendations? Here is what I have. Note there is no dynamic text at this point, as I was wanting to test this portion out first. Thanks. -david
<!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>
<meta name=”keywords” content=”jQuery Panel, jqxPanel. Overflow Panel, Container, Panel” />
<meta name=”description” content=”The jqxPanel widget represents a Panel widget. This widget is a container for other widgets or elements. It automatically
adds horizontal and vertical scrollbars, if the content is not fully visible.” />
<title id=’Description’>Panel Test</title>
<link rel=”stylesheet” href=”jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”scripts/gettheme.js”></script>
<script type=”text/javascript” src=”scripts/jquery-1.8.3.min.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// Create jqxPanel
var theme = getDemoTheme();
$(“#jqxWidget”).jqxPanel({ width: 380, height: 350, theme: theme, sizeMode: “fixed”});});
</script>
<style>.textBox{
width:330px;;
font-family:”Trebuchet MS”, Arial, Helvetica, sans-serif;
font-size:12px;
padding-left:15px;
padding-right:15px;
padding-top:10px;
padding-bottom:15px;
background-color:#666666;
color:#CCCCCC;}
</style></head>
<body class=’default’>
<div id=’jqxWidget’ style=” font-size: 13px; font-family: Verdana;”>
<div>Quisque luctus, sapien ut pellentesque placerat, diam turpis pulvinar augue, sit amet porttitor lacus quam in lectus. Duis ornare fermentum purus, eget vestibulum dolor ornare nec. In cursus rutrum ligula ut dictum. Nullam massa justo, tincidunt eu suscipit quis, mattis et tortor. In a leo at nisl semper pellentesque non quis metus. Duis a fermentum leo. Nam nec tellus turpis. Sed congue ipsum sodales tellus tincidunt in egestas elit rhoncus. In commodo scelerisque lacus, at viverra orci bibendum et. Pellentesque ullamcorper pulvinar ornare. Nunc porttitor ultricies eros, sit amet facilisis purus cursus eget. Etiam pharetra sagittis convallis. Duis quis lobortis felis. Etiam diam ipsum, sollicitudin id dignissim aliquam, rhoncus non tellus. <p>Curabitur sapien tellus, pulvinar vel pellentesque id, mattis eget orci. Nulla purus elit, accumsan eu rutrum vitae, euismod a nulla. Sed sed tellus ut mi ultrices ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec augue tortor, tincidunt et consectetur vel, cursus ut magna. Sed ultrices dui eu elit luctus cursus. Vestibulum a tortor eget nibh viverra placerat ut in ante. Mauris eu nunc nisl, vel dictum purus. Maecenas fringilla porttitor malesuada. Aenean aliquet sodales lectus eget dapibus.</p><p>Nunc congue dignissim arcu sit amet porttitor. Nunc tincidunt pharetra erat, eget rhoncus nulla laoreet eu. Donec tristique turpis dui, tincidunt varius massa. Morbi laoreet tempor accumsan. Nunc placerat mi nec nibh fermentum non rhoncus erat condimentum. Aliquam eget metus ut arcu dignissim pharetra a ut ipsum. Donec id posuere elit. Nullam diam mi, bibendum eget ullamcorper eu, suscipit vitae arcu. Curabitur vitae nunc massa. Donec ut ipsum augue. Duis bibendum convallis enim, at sollicitudin eros suscipit a. Integer auctor viverra diam varius malesuada. Sed eu urna arcu, vitae placerat justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae</p> </div>
</div>
</body>
</html>Hello dbs,
We have tested your sample code, but the horizontal scrollbar does not appear and there do not seem to be any of the reported issues. Please, update your version of jQWidgets to 2.8.3 and test again. We are looking forward to your feedback.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks for your response, and indeed was encouraged… however the H Scrollbar is still visible, even after re-downloading JQWidgets 2.8.3. Even updated jquery to: jquery-2.0.0.min.js. Any additional thoughts- wondering the difference between our two environments. I tested this on a Mac in Firefox, Safari and Chrome. Thanks again! -david
$(document).ready(function () {
// Create jqxPanel
var theme = getDemoTheme();
$(“#jqxWidget”).jqxPanel({ width: 380, height: 350, theme: theme, sizeMode: “fixed”});});
Hi Dimitar, Peter et al,
I’m having the same problem with Firefox 12 and Mobile Safari (iOS6.1.3).
It looks like a miscalculation is happening in deciding whether the Horizontal Scroll Bar should be shown or not.
You can see my problem in the Top Panel of the 2nd Tab.
Panel Horizontal Scroll Bar Problem Page
I can overcome the problem by adding the following Style Rule to the page.
#jqxPnlItemhorizontalScrollBar {display:none;}
However, it looks like some debugging is required by you guys. Have fun! 🙂
Looking forward to know how you have solved the problem.
Thank you, Michael.
Hi dbs,
In your case you should try adding the following within the <head> tag of your page.
<style type=”text/css”>
#jqxWidgethorizontalScrollBar {display:none;}
</style>Regards, Michael.
Hello dbs and Michael,
Thank you for your feedback. We will look into the reported issue.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi Dimitar, Peter and Michael,
Michael thanks for the recommendation. It works. BUT…
#jqxWidgethorizontalScrollBar {display:none;} removes horizontal scrollbar as advertised, but the container remains same size, and there is a gap that equals the height of the H scrollbar that remains on the bottom- most obviously under the the V scrollbar. Also ends up screwing with the calculation of the height of the V scroll.
Sorry…
-david
I posted a request in the General forum to be able to hide scrollbars programmatically. The simplest thing would be able to just pass horizontalScrollBarSize: 0 or horizontalScrollBarSize: -1, etc., in the jqxPanel constructor. This seems a lot cleaner to me than trying to do this in markup.
Just for the general information of others who might stumble upon this problem and still be looking for a solution. The solution to simply set the scrollbar’s display property to “none” sucks, as it results in an ugly space left at the bottom of the vertical scrollbar. However, there is now an easy solution that doesn’t seem to have made it into the documentation yet. The sizeMode property of the Panel accepts “horizontalWrap” and “verticalWrap” as values. They do what you would expect, causing the appropriate scrollbar to disappear and the contents to wrap in that direction. It works very well.
Andrew
-
AuthorPosts
You must be logged in to reply to this topic.