Page 1 of 2
Browse scroll for smaller screen [done]
Posted: Thu Feb 24, 2022 12:00 am
by 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'});
}
}
Re: Browse scroll for smaller screen
Posted: Thu Feb 24, 2022 8:02 am
by 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?
Re: Browse scroll for smaller screen
Posted: Thu Feb 24, 2022 9:13 am
by 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
Re: Browse scroll for smaller screen
Posted: Thu Feb 24, 2022 9:43 am
by 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.
Re: Browse scroll for smaller screen
Posted: Thu Feb 24, 2022 11:24 am
by nc07
I think it should be be left to auto so that its only visible when needed.
Re: Browse scroll for smaller screen
Posted: Thu Feb 24, 2022 11:36 am
by 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
Re: Browse scroll for smaller screen
Posted: Thu Feb 24, 2022 9:03 pm
by nc07
kev1n wrote: ↑Thu Feb 24, 2022 11:36 am
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'});
Re: Browse scroll for smaller screen
Posted: Mon Jun 27, 2022 11:12 pm
by 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';
}
});
Re: Browse scroll for smaller screen
Posted: Tue Jun 28, 2022 12:31 pm
by 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
Re: Browse scroll for smaller screen
Posted: Wed Jun 29, 2022 12:35 am
by nc07
kev1n wrote: ↑Tue Jun 28, 2022 12:31 pm
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.