Answers

• kthorngren Posts: 21,918Questions: 26Answers: 5,066

  April 4

  You can inspect the dropdown menu div to see what styling is applied. You will find this CSS:

  .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      display: none;
      float: left;
      min-width: 10rem;
      padding: .5rem 0;
      margin: .125rem 0 0;
      font-size: 1rem;
      color: #212529;
      text-align: left;
      list-style: none;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid rgba(0,0,0,.15);
      border-radius: .25rem;
  }
  

  One option is to modify the CSS to move the element up. Something like this:

  .dropdown-menu {
      position: relative;
      bottom: 400px;
      top: 100% !important;
  }
  

  Need to add !important to override the default top value.

  https://live.datatables.net/dijekeve/2/edit

  Kevin
• slolo Posts: 75Questions: 15Answers: 1

  April 5

  Hello @kthorngren,

  Thanks for your answer even if I find it a little bit ugly

  This works fine when the DataTables is not inside a component, so I guess it's a small bug.

  Maybe we could have an option to force the pane to be displayed either at the top or bottom of the component, what do you think?
• allan Posts: 64,311Questions: 1Answers: 10,621 Site admin

  April 7

  Yup, I'd welcome a pull request that implements that.

  Allan