CODEWITHSUNDEEP
javascriptjqueryhtmlcss
David Türkiye
David Türkiye

Reputation: 71

Drop-down Menu Moves Overflow of Page

I have a table. This table lists the details of the patients. I wanted to add a drop down menu to do some function. But the drop-down menu overflow from the right and bottom. I dont want this. I want the drop-down menu to always remain inside the screen.

So if the menu is overflow from the right, opening to the left. If the menu is overflow from the bottom, opening to the top.

Here is the codes,

https://jsfiddle.net/um1vr3wq/

I did a lot of research. I found some codes. But it didn't work properly for me.

This code adds the "reverse-right" class to all div that have the same class. I dont want this. I just want it added to the clicked div.

$(window).resize(function() {
    windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
    if (windowWidth < 1730) {
        $('.dropdown-content').addClass('reverse-right');
    }
    else {
        $('.dropdown-content').removeClass('reverse-right');
    }
});

This code works correctly. But it's not what I want. This sets the position only when ".dropbtn" is clicked. I want the menu position to change when I reduce or enlarge the page instantly.

$(".dropbtn").click(function () {
    if ($(window).innerWidth() < 1730) {
        $(this).parents(".dropdown").children(".dropdown-content").addClass("reverse-right");
    }
    else {
      $(this).parents(".dropdown").children(".dropdown-content").removeClass("reverse-right");
    }
});

I'm new to Javascript and need a definite solution. Can you help me?

(Sorry for my bad english. Im working on it.)

Upvotes: 2

Views: 256

Answers (1)

Asfan Shaikh
Asfan Shaikh

Reputation: 769

You have to do some calculations of dropdown box top and left position including it's height & width. And toggle classes to reverse it's position.

Here is link

> https://codepen.io/AsfanShaikh/pen/PooeazY

Upvotes: 1

Related Questions