jQWidgets Forums

This topic contains 4 replies, has 2 voices, and was last updated by parascus 11 years, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Panel showing horizontal scroll on Tablet Posts

January 5, 2014 at 12:18 pm Panel showing horizontal scroll on Tablet #47258

Participant

Hi jqWidget-Team,

I have a panel in which content is shown. For this I have a div (inner) in another div (outer). The text in the inner div is wrapped if a line is longer than it can be displayed and so the inner div is expanded downwards. So good so fine and on the desktop I just have a vertical scrollbar to scroll down.

But looking on a tablet (iPad 2) there’s also a horizontal scrollbar which has a small amount to scroll. This is I think because the vertical scrollbar is inserted after adjusting the inner div and so the horizontal scrollbar is necessary. Is there any way to control this behaviour so I just have th vertical scrollbar?

Best regards

Stephan (parascus)

January 5, 2014 at 3:43 pm Panel showing horizontal scroll on Tablet #47261

Peter Stoev

Keymaster

Hi Stephan,

Add your content with fixed width which is less than the Panel’s width and you will end up with vertical scrollbar only.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

January 7, 2014 at 6:35 pm Panel showing horizontal scroll on Tablet #47493

parascus

Participant

Hi Peter,

thanks for your response. But I didn’t get it doing the right thing. In the following code I think I have added a fixed with to the content which is definetly smaller than the surrounding panel (200px < 320px)., Should this do or what am I doing wrong?

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.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
            $("#jqxWidget").jqxPanel({ width: 320, height: 480});
        });
    </script>
</head>
<body class='default' style="font-size: 12px">
    <div id='jqxWidget' style=" font-size: 12px; font-family: Verdana;">
		<div style="width:200px; font-size:12px;">
			<p>
				Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
			</p>
			<p>
				Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
			</p>
			<p>
				Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. 
			</p>
			<p>
				Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.             </div>
			</p>
        </div>   
    </div>
</body>
</html>

Best Regards and thanks for your help.

Stephan

January 8, 2014 at 10:26 am Panel showing horizontal scroll on Tablet #47534

Peter Stoev

Keymaster

Hi Stephan,

Thanks for the provided code. I tested it and confirm the behavior that you experience. I should notify you that I created a work item and it is scheduled for jQWidgets 3.1.1.

Thank you for the valuable feedback!

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

January 8, 2014 at 7:20 pm Panel showing horizontal scroll on Tablet #47584

parascus

Participant

Hi Peter,

thank you. I’m looking forward to it

Best Regards

Stephan

Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.