Freezing Side bar while scrolling

Hi Everyone,

Just like this freeze bar, i want to freeze then side panel too, can someone suggest me the same.

Thank You

Hi @rs115199789,

Please apply it.

frappe.ui.form.on('Purchase Invoice', {
    onload_post_render: function(frm) {
        if (window.innerWidth > 992) {
            var targetDiv = $(".col-lg-2.layout-side-section");
            targetDiv.css({
                position: 'fixed',
                zIndex: '1020',
            });

            $('.layout-main-section-wrapper').css({
                marginLeft: targetDiv.outerWidth()
            });
        }
    }
});

Then reload Ctrl+Shift+R and check it.

Thanks working fine, i tried to find this- .col-lg-2.layout-side-section
but no luck, can you share how , i always end up finding this - class=“form-sidebar overlay-sidebar hidden-xs hidden-sm opened”

Thanks again

If you want to learn it, you have to play a bit inside it with the help of inspect element because there is no trick or logic to it. Simply apply and view using the Inspect element. :wink:

1 Like

Thank you

Hi, @NCP

The script was working but then after sometime i’m facing overlapping issue.

i think, issue is in the width.

If we go to see, all these are makeshift, and such problems in makeshift are similar. So you have to bear a little bit.

i deleted the width and applied your script only still facing the same issue

Tested with multiple doctypes, worked properly. if not work then use a refresh and set the setTimeout, that I provided in the previous post.

If in all such scripts, sometimes it works and sometimes it doesn’t. Now the solution is yours to bring. I am only showing a way, you have to go ahead. :wink:

Hi, @NCP

can you check this please

 frappe.ui.form.on('Purchase Invoice', {

onload_post_render: function(frm) {
    if (window.innerWidth > 992) {
        var targetDiv = $(".col-lg-2.layout-side-section");
        targetDiv.css({
            position: 'fixed',
            zIndex: '1020',
        });

        $('.layout-main-section-wrapper').css({
            marginLeft: targetDiv.outerWidth()
        });
    }
},

refresh: function(frm) {
    setTimeout(function() {
        frm.refresh();
    }, 1000);
}
});

Again check the reference, how I applied the refresh and setTimeout.

frappe.ui.form.on('Purchase Invoice', {
    refresh: function(frm) {
        setTimeout(function() {
            if (window.innerWidth > 992) {
                var targetDiv = $(".col-lg-2.layout-side-section");
                targetDiv.css({
                    position: 'fixed',
                    zIndex: '1020',
                });
    
                $('.layout-main-section-wrapper').css({
                    marginLeft: targetDiv.outerWidth()
                });
            }
        }, 100);
    }
});

Still not working after applying this-

  frappe.ui.form.on('Purchase Invoice', {
    refresh: function(frm) {
    setTimeout(function() {
        if (window.innerWidth > 992) {
            var targetDiv = $(".col-lg-2.layout-side-section");
            targetDiv.css({
                position: 'fixed',
                zIndex: '1020',
            });

            $('.layout-main-section-wrapper').css({
                marginLeft: targetDiv.outerWidth()
            });
        }
    }, 1000);
}

});

Try yourself.

If i knew how then i never posted here :frowning:

You see by giving the bench build command.

What do we do if it doesn’t work in your case? :sweat_smile:

I checked in both version 14 and version 15 I didn’t get any issue.

no problem , Thanks for your help.

Also the script works well but once i logout and then again logged in , i need to use

Ctrl Shift R

If you have this issue, you should tell us first, then we will know where the actual issue is.

try it.

frappe.ui.form.on('Purchase Invoice', {
    onload_post_render: function(frm) {
        if (window.innerWidth > 992) {
            var targetDiv = $(".col-lg-2.layout-side-section");
            targetDiv.css({
                position: 'fixed',
                zIndex: '1020',
            });
    
            $('.layout-main-section-wrapper').css({
                marginLeft: "16.70%"
            });
        }
    }
});

Issue is in the margin-left because it set based on the targetDiv so we fixed it.

We checked the multiple times but we don’t have the issue, but you were right when that issue came up earlier.

Now if the issue comes you are out of luck :sweat_smile:

How the issue comes if you are here ?
It’s working fine now.

Thank you so much :slight_smile:

Just one more thing is it possible to reduce this margin ?

I think, it’s a v14, so check that class and reduce the width.

i tried to reduce the width but it was not working, i guess it’s the version issue.

Thanks