Container fixed position but only on horizontal scroll

Question

I am trying to achieve a specific kind of layout. My effort so far can be previewed from this fiddle example.

Basically I need to make my left container (fixedContainer) with red border containers, to have fixed position and be fully visible when I scroll horizontally. But when I scroll vertically it needs to scroll normally with rest of the containers.

Current code:

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 500,
    width: 700,
    layout:'vbox',
    scrollable:true,
    items:[{
        xtype:'container',
        reference:'mainContainer',
        layout:{
            type:'hbox'
        },
        margin:10,
        items:[{
            xtype:'container',
            reference:'fixedContainer',
            style:'position:relative;',
            defaults:{
               style:'border: 1px solid red;',
               left:100,
               width:200,
               height:120,
               bodyPadding:10
            },
            items:[{
                html:'panel1'
            },{
                html:'panel2'
            },{
                html:'panel3'
            },{
                html:'panel4'
            }]
        },{
            xtype:'container',
            reference:'scrollContainer',
            defaults:{
               border:true,
               width:700,
               height:120,
               bodyPadding:10
            },
            items:[{
                html:'panel1'
            },{
                html:'panel2'
            },{
                html:'panel3'
            },{
                html:'panel4'
            }]
        }]
    }]
}).show();

NAmorim · Accepted Answer · 2017-10-27 11:14:40Z

If I understood what you are looking for, you need to change a few layouts in your code. First you need to make your window a layout: 'fit', so that it's child's fit into the window container.

Then set your mainContainer to a layout: border and set both the child panels to region: 'west' and region: 'center' respectively. This anchors your fixedContainer to the left and your scrollableContainer to the center.

Finnally, add the scrollable: "horizontal" property to your scrollableContainer to scroll horizontally.

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 500,
    width: 700,
    layout: 'fit', // Changed this
    scrollable:true,
    items:[
        {
            xtype:'container',
            reference:'mainContainer',
            layout: 'border',  // Changed this
            margin:10,
            items:[
                {
                    xtype:'container',
                    region:'west',  // Added this
                    reference:'fixedContainer',
                    defaults:{
                       style:'border: 1px solid red',
                       width:200,
                       height:120,
                       bodyPadding:10
                    },
                    items:[{
                        html:'panel1'
                    },{
                        html:'panel2'
                    },{
                        html:'panel3'
                    },{
                        html:'panel4'
                    }]
                },
                {
                    xtype:'container',
                    region: 'center',         // Added this
                    scrollable: "horizontal", // Added this
                    reference:'scrollContainer',
                    defaults:{
                       border:true,
                       width:700,
                       height:120,
                       bodyPadding:10
                    },
                    items:[{
                        html:'panel1'
                    },{
                        html:'panel2'
                    },{
                        html:'panel3'
                    },{
                        html:'panel4'
                    }]
                }
            ]
    }]
}).show();

EDIT1:

As @Evan Trimboli stated, the first code sample did not respect the vertical scrolling on panels overflow, this second sample sets the border layout to scroll vertically. The scrollContainer is wrapped into an additional container that will satisfy the vertical scroll. The remaining code stays the same from the initial answer.

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 500,
    width: 700,
    layout: 'fit', // Changed this
    items: [{
        xtype: 'container',
        reference: 'mainContainer',
        scrollable: 'vertical', // #edit1: Added this
        layout: 'border', // Changed this
        margin: 10,
        items: [{
            xtype: 'container',
            region: 'west', // Added this
            reference: 'fixedContainer',
            defaults: {
                style: 'border: 1px solid red',
                width: 200,
                height: 120,
                bodyPadding: 10
            },
            items: [{
                html: 'panel1'
            }, {
                html: 'panel2'
            }, {
                html: 'panel3'
            }, {
                html: 'panel4'
            }, {
                html: 'panel5'
            }]
        }, {
            xtype: 'container', //#edit1: New container here to satisfy the vertical scroll
            region: 'center',
            items: [{
                xtype: 'container',
                scrollable: "horizontal", // Added this
                reference: 'scrollContainer',
                defaults: {
                    border: true,
                    width: 700,
                    height: 120,
                    bodyPadding: 10
                },
                items: [{
                    html: 'panel1'
                }, {
                    html: 'panel2'
                }, {
                    html: 'panel3'
                }, {
                    html: 'panel4'
                }, {
                    html: 'panel5'
                }]
            }]
        }]
    }]
}).show();

"But when I scroll vertically it needs to scroll normally with rest of the containers." This doesn't scroll vertically.
sorry I cant accept your answer, horizontal bar needs to be visible all the time. I appreciate the effort though.
You can't expect to include a detail that you did not even mention in your question...

bullettrain · Accepted Answer · 2017-10-27 14:01:08Z

-1

Ok this is my working solution for this issue

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var horizontalScroll = 0
        var gridwindow = Ext.create('Ext.window.Window', {
            referenceHolder: true,
            title: 'Hello',
            height: 500,
            width: 700,
            layout: 'vbox',
            scrollable: true,
            items: [{
                xtype: 'container',
                reference: 'mainContainer',
                layout: {
                    type: 'hbox'
                },
                margin: 10,
                items: [{
                    xtype: 'container',
                    reference: 'fixedContainer',
                    style: 'position:relative; z-index:10; box-shadow: -20px 0px 0px 1px #fff;',
                    defaults: {
                        style: 'border: 1px solid red; outline',
                        width: 200,
                        height: 120,
                        bodyPadding: 10
                    },
                    items: [{
                        html: 'panel1'
                    }, {
                        html: 'panel2'
                    }, {
                        html: 'panel3'
                    }, {
                        html: 'panel4'
                    }]
                }, {
                    xtype: 'container',
                    reference: 'scrollContainer',
                    defaults: {
                        border: true,
                        width: 700,
                        height: 120,
                        bodyPadding: 10
                    },
                    items: [{
                        html: 'panel1'
                    }, {
                        html: 'panel2'
                    }, {
                        html: 'panel3'
                    }, {
                        html: 'panel4'
                    }]
                }]
            }]
        }).show();

        gridwindow.body.on('scroll', function (event) {
            var scrollLeft = event.target.scrollLeft;
            if (horizontalScroll !== scrollLeft) {
                var fixedContainer = this.lookup('fixedContainer');
                fixedContainer.el.translate((scrollLeft), 0)

            }
            horizontalScroll = scrollLeft;

        }, gridwindow);
    }
});

https://fiddle.sencha.com/#view/editor&fiddle/28ug

Thanks all for the effort. Hopefully this is good enough to help someone else with a similar problem.

answered Oct 27, 2017 at 14:01

bullettrain

9661 gold badge9 silver badges17 bronze badges

3 Comments

NAmorim Over a year ago

This solution generates a weird panel flickering by reseting the fixedContainer position over and over again when scrolling

bullettrain Over a year ago

Interesting..Which browser are you using? Works well on chrome.

NAmorim Over a year ago

On ubuntu, tried with chrome and firefox and both gave that vibration

Collectives™ on Stack Overflow

Container fixed position but only on horizontal scroll

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related