Init KTSelect after call Ajax
Dear team,
I have a problem with KTSelect now when I initialize after calling Ajax and add select into drawer then dropdown of Select does not appear in correct position as shown in image.
How can I adjust it so that option of select shows in correct position
Best Regard,
Hoang Le
Replies (3)
Hi Hoàng Lê
This is a common issue with KTSelect in drawers and modals. Here are the recommended solutions:
The primary solution is to set the dropdownContainer option to 'body' when initializing KTSelect in drawers. Initialize KTSelect only after the drawer becomes visible.
// Wait for drawer to be shown
drawer.addEventListener("shown", function() {
// Initialize KTSelect here
const select = new KTSelect(element, {
dropdownContainer: "body"
});
});Or using data attributes:
<select data-kt-select="{"dropdownContainer": "body"}">
<!-- options -->
</select>If you're still experiencing positioning issues, ensure proper z-index handling:
const select = new KTSelect(element, {
dropdownContainer: "body",
zIndex: 9999 // Ensure dropdown appears above drawer
});Dear Team,
Thanks for the solution and it works great but i have the same problem with dropdown how should i handle it?
Best Regard,
Hoàng Lê
Hi Hoàng Lê
The same solution that worked for KTSelect applies to other dropdown components. Set the dropdown container to 'body' for proper positioning:
// Wait for drawer to be shown
drawer.addEventListener("shown", function() {
// Initialize all dropdown components here
const dropdown = new KTDropdown(element, {
dropdownContainer: "body"
});
});If you're still experiencing issues, try these additional configuration options:
const dropdown = new KTDropdown(element, {
dropdownContainer: "body",
dropdownStrategy: "fixed", // or "absolute"
dropdownZindex: 9999, // Ensure it appears above other elements
dropdownPlacement: "bottom-start" // Control positioning
});Thanks
