Title: Site scroll when expand panel
Post by: jega on December 16, 2025, 02:43:49 AM
Hi. Have a panel with 100% width. When it expands, the site scrollbar goes over panel
See attached image 1 and 2
Title: Re: Site scroll when expand panel
Post by: jega on February 10, 2026, 03:05:14 PM
any help, because it looks ugly ;-)
Title: Re: Site scroll when expand panel
Post by: jarry on February 25, 2026, 12:08:04 AM
Please refer to this example. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Panel - jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<style>
.c1{
margin-bottom: 20px;
}
</style>
<script>
$(function(){
const panels = $('.c1').find('.panel-body');
panels.each(function(){
$.extend($(this).panel('options'),{
onCollapse: ()=>{
panels.panel('resize')
},
onExpand: ()=>{
panels.panel('resize')
}
});
})
panels.panel('resize')
})
</script>
</head>
<body>
<div class="easyui-panel" title="Panel1" style="width:100%;height:200px;padding:10px;"
data-options="collapsible:true,collapsed:true,cls:'c1'">
</div>
<div class="easyui-panel" title="Panel2" style="width:100%;height:200px;padding:10px;"
data-options="collapsible:true,collapsed:true,cls:'c1'">
</div>
<div class="easyui-panel" title="Panel3" style="width:100%;height:200px;padding:10px;"
data-options="collapsible:true,collapsed:true,cls:'c1'">
</div>
</body>
</html>
|