css - 使 bootsfaces 模态水平滚动

Question

我正在使用 PrimeFaces 和 BootsFaces 库。我在 bootsfaces 模态中有一个小表格。该表格用于更改系统参数，并且对于一个特定参数有一个 <p:keyboard />改变它的值(value)。我的问题是，在超小型设备中， Bootstrap 模式不允许水平滚动，并且键盘未显示完整:

当视口(viewport)小于 510px 时，键盘默认没有响应，所以我在超小屏幕上默认将其调整为 436px。我想在模式上进行水平滚动只是为了看到完整的键盘，但只有当我打开模式时。

这是我根据屏幕大小调整键盘的 javascript 函数:

$(document).on('click', '.inpKeyboard', function() {//- The input text has a class called 'inpKeyboard'
    if ($(window).width() <= 505) {//- Small screen
        $('#keypad-div').css('width', '436px');
        $('#keypad-div').css('left', '0px');
        //$('.modal-open').css('overflow-x', 'auto');
    }

    $('#keypad-div').css('z-index', '2000');
});

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

多棒的拼图啊! :) PrimeFaces 在 JavaScript 中计算键盘窗口的大小并将其存储为内联样式。所以解决这个问题的线索是添加一个超时，就像这样:

  <script>
  $(document).on('click', '.hasKeypad', () => {
        $('#keypad-div').css('z-index', '2000');
        if (!(window.width > 505)) { // JSF (i.e. XML) doesn't accept the less-than-operator
              // add a timeout to make sure the code is executed after PrimeFaces did its magic
          setTimeout(() => {
                          // set a fixed with
                          $('#keypad-div').css('width', '436px');
                          // add the horizontal scrollbar
                          $('#keypad-div').css('overflow-x', 'auto');
                          // increase the height to make space for the scrollbar
                          $('#keypad-div').css('height', '180px');}
                   ,1);
        }
  });
  </script>
      <!-- set a minimum width for the keyboard rows -->
      <!-- (otherwise the key overflow to the next row) -->
      <style>
        @media screen and (max-width: 504px) {
          .keypad-row {
            min-width:470px;
          }
        }
  </style>