After toggling the dropdown, the dropdown menu shows, but a part of it is blocked by table. Possible reason: CSS property (overflow: auto) cuts the dropdown menu, so it can’t be solved by making the dropdown menu position: absolute or z-index: 9999.
Kindly rerfer to the screenshots, Pic1.png and Pic2.png in the google drive below. https://drive.google.com/drive/folders/1eXZO1W07jl96d-rBJogyM_UHHktHqhy2?usp=share_link
If the property (overflow: auto) been disabled, it solves the dropdown menu but ruins the table itself when data is getting longer.
Kindly rerfer to the screenshot, Pic3.png in the google drive below. https://drive.google.com/drive/folders/1eXZO1W07jl96d-rBJogyM_UHHktHqhy2?usp=share_link
Current solution: Write a JavaScript to expend the table (min-height: 50vh;) when the dropdown icon been clicked and restore the table min-height to 0px when dropdown menu closed. See below.
The reason why I use focusout here is because I don’t know how to add a dropdown closed event listener. dropdowns.forEach(element => { element.addEventListener('click', (e) => { tableWrap.style.minHeight = "50vh" }) element.addEventListener('focusout', (e) => { setTimeout(() => { tableWrap.style.minHeight = "0px" }, 200); }) });
Question: how do I add an event listener to dropdown closed? Something like the bootstrap 4 example: $('#myDropdown').on('hide.bs.dropdown', function () { // do something… })
I’m not using jQuery, so how do I do this without jQuery?
Unfortunately you can't add event listener to dropdown without jQuery. Whole Bootstrap 4 use heavily jQuery. Only the latest version - 5, does not have jQuery dependencies and you can use standard addEventListener on element.
Can you please provide link to some demo, I cna look at it and maybe propose some other solution, but I need to see live version of it where I can debug it.
I apologize for the delay. I have uploaded the demo UI for your review. I hope to receive your feedback and suggestions regarding the issues we're facing.
You can access the demo UI at the following link: http://ec2-54-168-145-55.ap-northeast-1.compute.amazonaws.com/dashboard
Thanks for live demo. This is a know problem and there are few solutions: 1. Make dropdown position fixed and set manual top, left position based on parent element using show.bs.dropdown event. 2. Move dropdown outside of whole table when it is shown also using show.bs.dropdown event. 3. Without javascript there is only one solution, set some hight to your div with overflow for example 500px. This is not the best ux but it will also work.
I will suggest to do the second solution. Here I found a jsfiddle for it: https://jsfiddle.net/qozt42oo/32/
How to add event listener on dropdown closed and modal closed?
After toggling the dropdown, the dropdown menu shows, but a part of it is blocked by table.
Possible reason: CSS property (overflow: auto) cuts the dropdown menu, so it can’t be solved by making the dropdown menu position: absolute or z-index: 9999.
Kindly rerfer to the screenshots, Pic1.png and Pic2.png in the google drive below.
https://drive.google.com/drive/folders/1eXZO1W07jl96d-rBJogyM_UHHktHqhy2?usp=share_link
If the property (overflow: auto) been disabled, it solves the dropdown menu but ruins the table itself when data is getting longer.
Kindly rerfer to the screenshot, Pic3.png in the google drive below.
https://drive.google.com/drive/folders/1eXZO1W07jl96d-rBJogyM_UHHktHqhy2?usp=share_link
HTML:
<a className="dropdown-toggle" data-toggle="dropdown" href='#'>
<i className="fa fa-wrench"></i>
</a>
<ul className="dropdown-menu">
<li><a className="dropdown-item">Text</a></li>
</ul>
Current solution: Write a JavaScript to expend the table (min-height: 50vh;) when the dropdown icon been clicked and restore the table min-height to 0px when dropdown menu closed. See below.
The reason why I use focusout here is because I don’t know how to add a dropdown closed event listener.
dropdowns.forEach(element => {
element.addEventListener('click', (e) => {
tableWrap.style.minHeight = "50vh"
})
element.addEventListener('focusout', (e) => {
setTimeout(() => {
tableWrap.style.minHeight = "0px"
}, 200);
})
});
Question: how do I add an event listener to dropdown closed? Something like the bootstrap 4 example:
$('#myDropdown').on('hide.bs.dropdown', function () {
// do something…
})
I’m not using jQuery, so how do I do this without jQuery?
Unfortunately you can't add event listener to dropdown without jQuery. Whole Bootstrap 4 use heavily jQuery. Only the latest version - 5, does not have jQuery dependencies and you can use standard addEventListener on element.
Can you please provide link to some demo, I cna look at it and maybe propose some other solution, but I need to see live version of it where I can debug it.
Best regards, Damian
I apologize for the delay. I have uploaded the demo UI for your review.
I hope to receive your feedback and suggestions regarding the issues we're facing.
You can access the demo UI at the following link:
http://ec2-54-168-145-55.ap-northeast-1.compute.amazonaws.com/dashboard
Thank you very much.
Best regards
Last edited 9 months ago
Thanks for live demo. This is a know problem and there are few solutions:
1. Make dropdown position fixed and set manual top, left position based on parent element using show.bs.dropdown event.
2. Move dropdown outside of whole table when it is shown also using show.bs.dropdown event.
3. Without javascript there is only one solution, set some hight to your div with overflow for example 500px. This is not the best ux but it will also work.
I will suggest to do the second solution. Here I found a jsfiddle for it:
https://jsfiddle.net/qozt42oo/32/
Best regards, Damian