javascript - How to change position of dropdown, if menu is not fit on the screen jQuery

Question

I work with dropdown menu, and this dropdown i have on the table.

But if is not enough place to open dropdown, it's not visible:

So i want to open this menu in up side, if in the bottom is no place enough, how i can do this?

My code - jsFiddle

Code for opening dropdown:

$(document).ready(function () {

    Array.from(document.querySelectorAll('.custom-style')).forEach(function (menu_side) {
        menu_side.onclick = ({
            target
        }) => {
            if (!target.classList.contains('more')) return
            document.querySelectorAll('.dropout.active').forEach(
                (d) => d !== target.parentElement && d.classList.remove('active')
            )
            target.parentElement.classList.toggle('active');
        }

    });

});

I try to use few methods, but it's not works for me, now i sutck i have not idea how to fix this.

question from:https://stackoverflow.com/questions/65880607/how-to-change-position-of-dropdown-if-menu-is-not-fit-on-the-screen-jquery

Answer 1

I have rewritten the javascript for you check it out. in isInView function you can modify the bottom Position of your element as your need. let me know your thoughts

$(document).ready(function () {

$('.more').click(function(){
              let allMore=$(".dropout");
              let wh=$(window).innerHeight();              
              let parent=$(this).parent();
              
              allMore.each(function(){
                if(!$(this).is(parent)){
                  $(this).removeClass("active");
                }                
              });
              parent.toggleClass("active");
              let parentBottom=parent.get(0).getBoundingClientRect().bottom;  
              if(!isInView($(this).closest("td").get(0))){
                parent.toggleClass("dropoutY");
              }
            
                
            
});

function isInView(el) {
  var rect = el.getBoundingClientRect();
  var elBottom = rect.bottom+$(el).height()+100;

  var visible = (elBottom <= window.innerHeight);

  return visible;
}



});

.more {
    cursor: pointer;
    border: none;
    background: transparent;
    display: block;
    margin-top: auto;
    margin-bottom: auto;
}

    .more span {
        display: block;
        width: .30rem;
        height: .30rem;
        background: #363636;
        border-radius: 50%;
        pointer-events: none;
    }

        .more span:not(:last-child) {
            margin-bottom: .125rem;
        }

.dropout {
    display: block;
    margin-top: auto;
    margin-bottom: auto;
    float: right;
}

.dropoutY{
  display:flex;
  justify-content:flex-end;
  flex-direction: column;
}

    .dropout ul {
        position: absolute;
        top: auto;
        right: 2rem;
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.12s ease;
        color: #fff;
        background: rgba(33, 33, 33, 0.85);
        border-radius: 10px;
        padding: 20px 20px 20px 20px;
        list-style-type: none;
    }

        .dropout input {
            background: none;
            border: none;
        }

    .dropout btns {
        background: none;
        border: none;
    }

        .dropout.active ul {
            transform: scaleX(1);
        }

.btns {
    display: inline-block;
    position: relative;
    width: 120px;
    height: 32px;
    line-height: 32px;
    border-radius: 2px;
    font-size: 0.9em;
    background-color: #fff;
    color: #646464;
    margin: 5px;
}

    .btns > paper-ripple {
        border-radius: 2px;
        overflow: hidden;
    }

    .btns.narrow {
        width: 60px;
    }

    .btns.grey {
        background-color: #eee;
    }

    .btns.blue {
        background-color: #4285f4;
        color: #fff;
    }

    .btns.green {
        background-color: #0f9d58;
        color: #fff;
    }

    .btns.red {
        background-color: #cb3a3a;
        color: #fff;
    }

    .btns.light-blue {
        background-color: lightblue;
        color: #fff;
    }

    .btns.darkcyan {
        background-color: darkcyan;
        color: #fff;
    }

    .btns.raised {
        transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        transition-delay: 0.2s;
        box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
    }

        .btns.raised:active {
            box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
            transition-delay: 0s;
        }

.centered-text {
    text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>

<table style="width:100%" class="custom-style">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <td>
      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
          <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td>
      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
             <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td>

      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
            <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
</table>
<hr>
<table style="width:100%" class="custom-style">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Age</th>
    <td>
      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
          <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
    <td>
      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
             <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
    <td>

      <div class="dropout">
        <button class="more">
          <span></span>
          <span></span>
          <span></span>
        </button>
        <ul>
            <li>
            <a id="open-modal" class="btns raised blue centered-text"href="#open-modal">Edit</a>
          </li>
          <li>
            <button type="button" class="btns raised grey">Detailbutton
            </button>
          </li>
        </ul>
      </div>
    </td>
  </tr>
</table>