Browse scroll for smaller screen [done]

[nc07]

For smaller screens browse screens can be set to scroll to prevent overflow as below as an alternative. This can also be applied to edit screens. Just thought this might be useful to someone.


The below code will enable to achive

chrome-capture.gif

Code: Select all

if (nuFormType() == 'browse') {
           
        $('.nuRECORD').css({'width':'100%','height':'85vh','overflow':'scroll', 'display':'flex'});

    }
}

[kev1n]

Hi,

I think overflow should be set to auto. Otherwise the additional scrollbar is always visible albeit disabled.

2022-02-24_075741.png

Code: Select all

      $('.nuRECORD').css({'width':'100%','height':'85vh','overflow':'scroll', 'display':'flex'});

Other than that, it works well thanks for that!

Question: What is the purpose of setting the height to 85vh?

[nc07]

When height set to 100% i noticed that the scroll bar goes right to the bottom of some of the pages and which may not be visible to end user..but it can be set to individuals preference

[kev1n]

There is still the question of whether a second scrollbar should be displayed at all or whether the width of body can be set so that it corresponds to that of the browse table.

[nc07]

I think it should be be left to auto so that its only visible when needed.

[kev1n]

What is the advantage of showing an additional scrollbar? There is already a scrollbar when screen or browser window is too narrow.

scroll.png

[nc07]

What is the advantage of showing an additional scrollbar? There is already a scrollbar when the screen or browser window is too narrow.


scroll.png

Window scroll bar doesnot fix the browse table overflow

chrome-capture (1).gif

This code only takes care of that issue. Kindly try to see the difference. Thanks.

Code: Select all

$('.nuRECORD').css({'width':'100%','height':'85vh','overflow':'autol', 'display':'flex'});

[nc07]

a bit improved version. this code will hide the window scroll bar for browse form only.

Place in form custom Browse edit JS. May be helpful to those using smaller screens.

Code: Select all

$(document).ready(function(){

if (nuFormType()=='browse'){


$('.nuRECORD').css({'width':'100%','height':'100%','overflow-x':'auto'});
document.body.style.overflow = 'hidden';

}else {

    document.body.style.overflow = 'visible';

}


});

[kev1n]

In a desktop browser when the width of the window is made smaller, there are no scrollbars at all anymore after adding the code.

2022-06-28_122636.png

[nc07]

In a desktop browser when the width of the window is made smaller, there are no scrollbars at all anymore after adding the code.

2022-06-28_122636.png

chrome-capture-2022-5-29 (2).gif

Code: Select all

function nuOnLoad() {
$(document).ready(function(){

 if (nuFormType()=='browse'){

$('#nuRECORD').css({'width':'100%','height':'100%','overflow-x':'auto'});
document.body.style.overflow = 'hidden';

}else {

    document.body.style.overflow = 'visible';

}


});
}

The above code placed in the header works on all forms.