Make horizontal scroll for bootsfaces modal - css

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.

Answer 1

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>