Css 使菜单下拉菜单动态化

我有问题，当我点击我的行动按钮，它将创建一个下拉列表在我的模式。我希望这个菜单是动态的，这样用户就不必滚动查看其余的选项。以下是正在发生的事情：

当我最初进入模态时，我看不到此处所示的完整菜单：

当我向下滚动时，我会看到：

以下是我的HAML代码：

            %td.dropdown
              %button.btn{"aria-expanded" => "false", "aria-haspopup" => "true", "data-toggle" => "dropdown", :type => "button"}
                =t('claims.actions')
                %span.icon-decrement
              %ul{"aria-hidden" => "true", :role => "menu",:style => 'right:0'}
                %li
                  =link_to t('claims.view'), view_claim_claims_path(claim.id),:target => "_blank"
                - if claim.claim_status_code.code_key != 'ADJUDICATED' && claim.bundles.empty?
                  %li
                    =link_to t('workitem.set_as_current'), '#', :onclick => "onSetActive("+claim.to_json + ',' + @duplicate_claims.to_json + ");"

                - if claim.claim_status_code.code_key == 'RECEIVED' && claim.bundles.empty?
                  %li
                    =link_to t('workitem.cancel_claim'), '#', :onclick => "onSetCancel("+claim.to_json + ',' + @duplicate_claims.to_json + ");"
                - if claim.claim_status_code.code_key != 'CANCELED'
                  %li
                    =link_to 'Provider Payments', '#', :onclick => "onProviderPayment("+claim.to_json+");"

而且， 这是我正在使用的.less文件（如果没有帮助，请忽略此文件）：

.dropdown {
  position: relative;
  display: inline-block;
  .margin-end(@half-gutter);

  // Control alignment when right-aligned
  // Keep the dropdown menu aligned with the trigger button
  &:last-child,
  .btn {
    .margin-end(0);
  }

  &.open {
    .icon-decrement::before {
      content: @icon-increment;
    }
  }

  // Active state
  [aria-selected="true"],
  .btn:active,
  .btn:focus {
    outline: 0;
  }

  // Add some space between the icon and content
  [data-toggle="dropdown"] > [class^="icon-"],
  [data-toggle="dropdown"] > [class*=" icon-"] {
    .margin-start(@baseline/2);
  }

  [role="menu"] {
    .border-radius(@border-radius);
    .box-shadow(0 5px 10px rgba(0,0,0,.2));
    .border();
    .float-start();
    .pad-none();
    .rem(margin-top; 2px); // Giving it some space from the button
    position: absolute;
    z-index: @z-index-10;
    list-style: none;
    background-color: @base;

    &[aria-hidden="true"] {
      .hide();
    }

    // Links within the dropdown menu
    > li {
      > a {
        .pad-all();
        display: block;
        color: @inverse;
        white-space: nowrap;
      }

      > a:hover,
      > a:focus {
        text-decoration: none;
        color: @text-reverse;
        background: @theme-accent-fg-30;
      }

      > a:active {
        color: @text-reverse;
        background: @theme-accent-fg-10;
      }

      &:first-child > a {
        .border-top-radius(@border-radius);
      }

      &:last-child > a {
        .border-bottom-radius(@border-radius);
      }
    }
  }
}

---

我怎样才能使这个问题变得动态？

在这个问题上没有太多活动。你解决了吗？我认为使用CSS是可能的。