Сделать горизонтальную прокрутку для модных сапог - PullRequest
Новая
       42

Сделать горизонтальную прокрутку для модных сапог

0 голосов
/ 02 июня 2018

Я работаю с библиотеками PrimeFaces и BootsFaces.У меня есть небольшая форма модальностей bootsfaces.Форма используется для изменения системных параметров, и для одного конкретного параметра есть <p:keyboard /> для изменения его значения.Моя проблема в том, что в очень маленьких устройствах модальный режим начальной загрузки не допускает горизонтальную прокрутку, а клавиатура не показывает завершение:

The keyboard is not showed complete

Клавиатура не реагирует по умолчанию, когда область просмотра меньше 510 пикселей, поэтому я настроил ее на 436 пикселей по умолчанию на очень маленьких экранах.Я хочу сделать горизонтальную прокрутку на модальном только для того, чтобы увидеть полную клавиатуру, но только когда я открываю модальное.

Это моя функция 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');
});

Любая помощь будет оценена.Спасибо.

1 Ответ

0 голосов
/ 02 июня 2018

Какая милая головоломка!:) 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>
...