jQuery UI Widgets › Forums › Layouts › Panel and Responsive Panel › Vertical and Horizontal Scrollbars in Panel
Tagged: 100%, automatic, height, horizontal, image, panel, scrollbar, scrollbars, vertical
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 10 years, 11 months ago.
I have a panel with a given size
containing an image with the exact height
of the panel.
The width extends the panels width. –
that is why a horizontal scrollbar is displayed in default mode.
But the area at the bottom of the image is covered
in scrollbarheight – without displaying a vertical scrollbar.
If this is the intended behaviour – well enough.
But if this will be modified someday I
have to know because it would cause a lot of
need for rewriting my code.
What will happen?
thomas
Hello thomas,
We suggest you set the panel’s height to be 18px greater than the image’s to compensate for the scrollbar, e.g.:
<!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="../../scripts/demos.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: 350, height: 94 }); // image height is 76px
});
</script>
</head>
<body class='default'>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana;">
<img src="../../../images/slider-demo-header-background.png" />
</div>
</body>
</html>Best Regards,
Dimitar
jQWidgets team
http://www.jqwidgets.com/
You must be logged in to reply to this topic.