使 bootsfaces 模态水平滚动

Question

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

当视口小于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 中计算键盘的大小 window 并将其存储为内联样式。所以解决这个问题的线索是添加一个超时，就像这样：

  <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>

使 bootsfaces 模态水平滚动

Make horizontal scroll for bootsfaces modal

css

primefaces

bootsfaces