I render ExtJS 6 combobox to some dom element and the problem is that when I expand this combobox and start to use mouse wheel, then this dropdown list does not position itself correctly. It looks like so:
BEFORE
AFTER
As you can see on the second screen the dropdown list is far away from the component.
Unfortunatelly, I can not provide some short reproducible example, because I use some third party window component, in which I try to render ExtJS components. But I still hope, that someone knows some possible combobox configs that can help to target this issue.
EDIT
This is a minimized example that reproduces the error:
<!doctype html>
<html>
<head>
<title>Demo</title>
<link rel="stylesheet" href="../ext-6.2.2/build/classic/theme-triton/resources/theme-triton-all.css" type="text/css" />
<script src="../ext-6.2.2/build/ext-all.js"></script>
<style>
.uk-modal {
z-index: 1304;
background: rgba(0,0,0,.5);
overflow: auto !important;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.uk-open .uk-modal-dialog {
height: 1000px;
width: 600px;
padding: 24px;
display: block !important;
position: relative;
margin: 50px auto;
background: rgba(255,255,255,1);
}
</style>
</head>
<body style="margin:0; padding:0">
<div class="uk-modal uk-open">
<div class="uk-modal-dialog">
<div id="combobox"></div>
</div>
</div>
<script>
Ext.application({
name : 'Demo',
appFolder: '.',
autoCreateViewport: false,
launch: function(){
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data : [
{"abbr":"AL", "name":"Alabama"},
{"abbr":"AK", "name":"Alaska"},
{"abbr":"AZ", "name":"Arizona"}
]
});
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: 'combobox'
});
}
});
</script>
</body>
That's it. Just pay attention to .uk-open .uk-modal-dialog height style, that should be large enough, so that you may use your mouse wheel to scroll down.
