为 bootsfaces 模态制作水平滚动

Question

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

默认情况下，当视口小于 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>