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>

为bootsfaces模态制作水平滚动

1 个答案: