Breaking News: Grepper is joining You.com. Read the official announcement!

dropdown in table responsive

Omar Mohamed answered on March 28, 2024 Popularity 1/10 Helpfulness 1/10

answer dropdown in table responsive

dropdown in table responsive

Comment

document.addEventListener('DOMContentLoaded', function () {
    var dropdownMenus = document.querySelectorAll('.dropdown-menu');

    dropdownMenus.forEach(function (dropdownMenu) {
        var parent = dropdownMenu.parentElement;

        parent.addEventListener('show.bs.dropdown', function () {
            var parentResponsiveTable = parent.closest('.table-responsive');
            var parentTarget = parentResponsiveTable ? parentResponsiveTable : window;
            var parentTop = parentResponsiveTable ? parentResponsiveTable.offsetTop : 0;
            var parentLeft = parentResponsiveTable ? parentResponsiveTable.offsetLeft : 0;

            var dropdown = parent.classList.contains('dropdown') ? parent : null;
            if (!dropdown) {
                parent.classList.add('dropdown');
            }
            parent.setAttribute('olddrop', parent.classList.contains('dropup') ? 'dropup' : 'dropdown');

            var dropdownMenus = parent.querySelectorAll('.dropdown-menu');
            dropdownMenus.forEach(function (dropdown) {
                dropdown.setAttribute('olddrop-pull', dropdown.classList.contains('dropdown-menu-right') ? 'dropdown-menu-right' : '');
            });

            if (parent.classList.contains('dropdown')) {
                if (parent.offsetTop + parent.clientHeight + dropdownMenu.clientHeight + 10 >= parentTop + parentTarget.clientHeight) {
                    parent.classList.remove('dropdown');
                    parent.classList.add('dropup');
                }
            } else if (parent.classList.contains('dropup')) {
                if (parent.offsetTop - dropdownMenu.clientHeight - 10 <= parentTop) {
                    parent.classList.remove('dropup');
                    parent.classList.add('dropdown');
                }
            }

            if (parent.offsetLeft + dropdownMenu.clientWidth >= parentLeft + parentTarget.clientWidth) {
                dropdownMenu.classList.add('dropdown-menu-right');
            }
        });

        parent.addEventListener('hide.bs.dropdown', function () {
            var oldDrop = parent.getAttribute('olddrop');
            if (oldDrop) {
                parent.classList.remove('dropup', 'dropdown');
                parent.classList.add(oldDrop);
                parent.removeAttribute('olddrop');
            }

            var dropdownMenus = parent.querySelectorAll('.dropdown-menu');
            dropdownMenus.forEach(function (dropdown) {
                dropdown.classList.remove('dropdown-menu-right');
                var oldDropPull = dropdown.getAttribute('olddrop-pull');
                if (oldDropPull) {
                    dropdown.classList.add(oldDropPull);
                    dropdown.removeAttribute('olddrop-pull');
                }
            });
        });
    });
});

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: chat.openai.com

Tags: dropdown javascript responsive

Link to this answer
Share Copy Link

Contributed on Mar 28 2024

Omar Mohamed

0 Answers Avg Quality 2/10

dropdown in table responsive

Contents

More Related Answers

dropdown in table responsive

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.