You found a bug! We've classified it as
EXTJS-6680
.
We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
-
[4.1.1 rc2] Accordion + GridPanel layout issue: undesired scrollbar appears
REQUIRED INFORMATION
Ext version tested:
Browser versions tested against:
Description:
- An undesired horizontal GridPanel scrollbar appears when that GridPanel is defined within the item of Accordion. Please run the sample or just look at the screenshot. Without the According the GridPanel is rendered without the scrollbar.
Steps to reproduce the problem:
The result that was expected:
- No scrollbars for the GridPanel
The result that occurs instead:
- A horizontal scrollbar appears.
Test Case:
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Accordion GridPanel Bug</title>
<link type="text/css" rel="stylesheet" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function () {
Ext.create("Ext.panel.Panel", {
renderTo: Ext.getBody(),
height: 400,
width: 400,
layout: "accordion", // if comment that out, the scrollbar disappears.
items: [{
title: "Accordion 1",
collapsed: true
}, {
title: "Accordion 2",
collapsed: false,
items: [{
xtype: "grid",
height: 300,
width: 300,
columns: {
items: [{
flex: 1,
text: "Column 1"
}]
}
}]
}]
});
});
</script>
</head>
<body>
</body>
</html>
HELPFUL INFORMATION
Screenshot:
1.JPG
-
Sencha User
Temporary fix (with ugly side effects):
Code:
.x-accordion-body .x-grid-view.x-grid-view-default {
overflow-x: hidden !important;
}
Reply With Quote