Welcome to the nuBuilder Forums!

Register and log in to access exclusive forums and content available only to registered users.

Browse scroll for smaller screen [done]

Post your ideas & suggestions for new nuBuilder features or other improvements
kev1n
nuBuilder Team
Posts: 4292
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 444 times
Contact:

Re: Browse scroll for smaller screen [done]

Unread post 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
You do not have the required permissions to view the files attached to this post.
nc07
Posts: 118
Joined: Tue Jun 04, 2019 4:05 am
Has thanked: 5 times
Been thanked: 22 times

Re: Browse scroll for smaller screen

Unread post 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
nc07
Posts: 118
Joined: Tue Jun 04, 2019 4:05 am
Has thanked: 5 times
Been thanked: 22 times

Re: Browse scroll for smaller screen

Unread post 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.
nc07
Posts: 118
Joined: Tue Jun 04, 2019 4:05 am
Has thanked: 5 times
Been thanked: 22 times

Re: Browse scroll for smaller screen

Unread post 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?
kev1n
nuBuilder Team
Posts: 4292
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 444 times
Contact:

Re: Browse scroll for smaller screen

Unread post by kev1n »

The last code seems to work much better. Maybe exclude it for popup windows (scrollbars visible) ?
popup.png
You do not have the required permissions to view the files attached to this post.
nc07
Posts: 118
Joined: Tue Jun 04, 2019 4:05 am
Has thanked: 5 times
Been thanked: 22 times

Re: Browse scroll for smaller screen

Unread post 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.
kev1n
nuBuilder Team
Posts: 4292
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 444 times
Contact:

Re: Browse scroll for smaller screen

Unread post 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';
        }

    });

}
kev1n
nuBuilder Team
Posts: 4292
Joined: Sun Oct 14, 2018 6:43 pm
Has thanked: 71 times
Been thanked: 444 times
Contact:

Re: Browse scroll for smaller screen

Unread post by kev1n »

This has been incorporated.
Post Reply