Make horizontal scroll for bootsfaces modal

Question

I'm working with PrimeFaces and BootsFaces libraries. I have a little form inside bootsfaces modal. The form is used to change system parameters, and for one specific parameter has a <p:keyboard /> to change its value. My problem is that in extra-small devices, the bootstrap modal doesn't allow horizontal scroll, and the keyboard is not showing complete:

The keyboard is not responsive by default when the viewport with is less than 510px, so I have adjusted it to 436px by default in extra small screens. I want to make horizontal scroll on the modal just to see the complete keyboard, but only when I open the modal.

This is my javascript function to adjust the keyboard depending on screen size:

$(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');
});

Any help would be appreciated. Thanks.

score 1 · Accepted Answer · answered Jun 02 '18 at 16:16

What a nice puzzle! :) PrimeFaces calculate the size of the keypad window in JavaScript and stores it as an inline-style. So the clue to solving this is to add a timeout, like so:

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

Thank you very much bro, I had to use 4 CSS media queries to adjust the width of `.keypad-row` because in the first instance with a 280px viewport the keyboard didn't have the enough width to scroll completely. — Julian David, Jun 05 '18 at 19:55
Whow! In the case of 280px I'd suggest to use a custom layout of the keyboard. That's ugly, because it's non-standard, but in this particular case, it might provide for a better user experience. — Stephan Rauh, Jun 06 '18 at 21:29
Don't worry, I used 4 media queries to adjust the `.keypad-row` width depending of viewport width. Yes, it is very ugly, but it worked for me :^) — Julian David, Jun 06 '18 at 21:54

Make horizontal scroll for bootsfaces modal

1 Answers1