Page 2 of 2
Re: Browse scroll for smaller screen [done]
Posted: Wed Jun 29, 2022 1:30 am
by kev1n
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.
This (only) happens when nuAutosizeBrowseColumns is set to false.
On my mobile phone, when nuAutosizeBrowseColumns = true: Tthere is a too much space at the right and looks too condensed:
mobile_phone.jpg
Re: Browse scroll for smaller screen
Posted: Wed Jun 29, 2022 4:52 am
by nc07
kev1n wrote: ↑Wed Jun 29, 2022 1:30 am
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.
This (only) happens when nuAutosizeBrowseColumns is set to false.
On my mobile phone, when nuAutosizeBrowseColumns = true: Tthere is a too much space at the right and looks too condensed:
mobile_phone.jpg
if the width is changed form 100% to 100vw seems to fix the table width issue. will have to do some more testing
Re: Browse scroll for smaller screen
Posted: Wed Jun 29, 2022 5:50 am
by nc07
nc07 wrote: ↑Wed Jun 29, 2022 4:52 am
kev1n wrote: ↑Wed Jun 29, 2022 1:30 am
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.
This (only) happens when nuAutosizeBrowseColumns is set to false.
On my mobile phone, when nuAutosizeBrowseColumns = true: Tthere is a too much space at the right and looks too condensed:
mobile_phone.jpg
if the width is changed form 100% to 100vw seems to fix the table width issue. will have to do some more testing
Code: Select all
function nuOnLoad() {
$(document).ready(function(){
if (nuFormType()=='browse'){
$('#nuRECORD').css({'width':'100vw','height':'100%','overflow-x':'auto'});
$('#nuBreadcrumbHolder').css({'width':'100vw'});
$('#nuActionHolder').css({'width':'100vw'});
document.body.style.overflow = 'hidden';
}else {
document.body.style.overflow = 'visible';
}
});
}
this may fix the issue. i suggest the logout to be included or pushed to nuoptions in mobile view.
Re: Browse scroll for smaller screen
Posted: Wed Jun 29, 2022 6:04 am
by nc07
Kevin, i did some further testing, removed the above code, seems like that a behavior is not related to the code. can you have a look?
Re: Browse scroll for smaller screen
Posted: Wed Jun 29, 2022 9:15 am
by kev1n
The last code seems to work much better. Maybe exclude it for popup windows (scrollbars visible) ?
popup.png
Re: Browse scroll for smaller screen
Posted: Wed Jun 29, 2022 10:18 pm
by nc07
thanks Kevin, i agree with you, the popup should be excluded. What would be the best approach?
Code: Select all
function nuOnLoad() {
$(document).ready(function(){
if (nuFormType()=='browse') {
if (parent.$('#nuModal').length == 0){
$('#nuRECORD').css({'width':'100vw','height':'100%','overflow-x':'auto'});
$('#nuBreadcrumbHolder').css({'width':'100vw', 'display':'flex','flex':'1','flex-flow': 'row wrap' });
$('#nuActionHolder').css({'width':'100vw'});
document.body.style.overflow = 'hidden';
}else {
document.body.style.overflow = 'visible';
}
}
});
}
but it doesn't work.
Re: Browse scroll for smaller screen
Posted: Thu Jun 30, 2022 1:18 am
by kev1n
Untested:
Code: Select all
function nuOnLoad() {
$(document).ready(function() {
if (nuFormType() == 'browse') {
if (!nuIsIframe()) {
$('#nuRECORD').css({ 'width': '100vw', 'height': '100%', 'overflow-x': 'auto' });
$('#nuBreadcrumbHolder').css({ 'width': '100vw', 'display': 'flex', 'flex': '1', 'flex-flow': 'row wrap' });
$('#nuActionHolder').css({ 'width': '100vw' });
document.body.style.overflow = 'hidden';
}
} else {
document.body.style.overflow = 'visible';
}
});
}
Re: Browse scroll for smaller screen
Posted: Tue Jul 19, 2022 6:10 pm
by kev1n
This has been incorporated.