horizontal scroll bar bug

Post bugs here!
Post Reply
algocrunch
Posts: 40
Joined: Thu Oct 31, 2013 12:50 pm

horizontal scroll bar bug

Post by algocrunch »

Please run the below builder code. You can see the horizontal scroll bar is there even though it should not be. Note that if the inputs are appended directly to the Panel the scroll bars are correct. This bug happens in both the builder and in the latest code.

Code: Select all

// The default code is a com class (inherited from xui.Com)
Class('App', 'xui.Com',{
    // Ensure that all the value of "key/value pair" does not refer to external variables
    Instance:{
        // To initialize instance(e.g. properties)
        initialize : function(){
            // To determine whether or not the com will be destroyed, when the first UI control be destroyed
            this.autoDestroy = true;
            // To initialize properties
            this.properties = {};
        },
        // To initialize internal components (mostly UI controls)
        // *** If you're not a skilled, dont modify this function manually ***
        iniComponents : function(){
            // [[Code created by CrossUI RAD Tools
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append((new xui.UI.Panel())
            .setHost(host,"ctl_panel4")
            .setDock("left")
            .setWidth(130)
            .setZIndex(1)
            .setOverflow("auto")
            .setCaption("ctl_panel4")
            );
            
            host.ctl_panel4.append(new xui.UI.Pane().setPosition('absolute').setDock('fill').setHost(host,'ctl_div1'));
            for(var i = 0; i < 40; i++) {
                host.ctl_div1.append((new xui.UI.Input())
                .setLeft(0)
                .setTop(0)
                .setWidth(100)
                .setPosition("relative")
                );
            }
            
            return children;
            // ]]Code created by CrossUI RAD Tools
        },
        // Give a chance to load other com
        iniExComs : function(com, threadid){
        },
        // Give a chance to determine which UI controls will be appended to parent container
        customAppend : function(parent, subId, left, top){
            // "return false" will cause all the internal UI controls will be added to the parent panel
            return false;
        },
        // This instance's events
        events : {},
        _ctl_sbutton1_onclick : function (profile, e, src, value) {
            var uictrl = profile.boxing();
            xui.alert("hi","I'm " + uictrl.getAlias());
        }
    }
});

support
Posts: 356
Joined: Sat Apr 27, 2013 9:22 am

Re: horizontal scroll bar bug

Post by support »

You can add

.setCustomStyle({PANEL:'overflow-x:none'})

algocrunch
Posts: 40
Joined: Thu Oct 31, 2013 12:50 pm

Re: horizontal scroll bar bug

Post by algocrunch »

I could, but that does not solve the bug. What if a control was dynamically added at run time that actually did need a horizontal scroll bar?

support
Posts: 356
Joined: Sat Apr 27, 2013 9:22 am

Re: horizontal scroll bar bug

Post by support »

It depends on browsers.
We can add overflowX/Y into API in the next version.

algocrunch
Posts: 40
Joined: Thu Oct 31, 2013 12:50 pm

Re: horizontal scroll bar bug

Post by algocrunch »

Again, adding an overflow does not fix the problem. What appears to be happening is:

The panel's width is 130
The pane has dock=fill, which gives it a width of 120 (to account for borders)
The input controls are added to the pane
When enough inputs are added to the pane, a vertical scrollbar is added to the panel (I expected the scroll bar to be added to the pane, not the panel. Is this a bug or expected behavior?)

Here's the problem: When the vertical scrollbar is added to the panel, the pane, whose dock=fill, does not have it's width adjusted to accommodate the scroll bar. The pane's width (which was calculated by the dock) should decrease by the width of the scroll bar. In chrome, if I manually decrease the width of the pane by 18 pixels then everything shows up as expected.

So, in summary, the bug seems to be that the calculation of the size of a docked control is not accounting for scroll bars in the parent control.

algocrunch
Posts: 40
Joined: Thu Oct 31, 2013 12:50 pm

Re: horizontal scroll bar bug

Post by algocrunch »

Is there any update on this bug?
Thanks

support
Posts: 356
Joined: Sat Apr 27, 2013 9:22 am

Re: horizontal scroll bar bug

Post by support »

You can download xui lib from our SVN.

And you can use:

.setOverflow("overflow-x:hidden;overflow-y:auto")

algocrunch
Posts: 40
Joined: Thu Oct 31, 2013 12:50 pm

Re: horizontal scroll bar bug

Post by algocrunch »

Using setOverflow is not an acceptable resolution to this bug. In our actual use case, the controls are dynamically added at run time so we cannot simply hard code an overflow since a horizontal scroll bar may really be necessary. The example provided is a very simple case which demonstrates the problem we have found. As I have previously mentioned, the problem appears to be xui's calculation of the size of a docked control whose parent has scroll bars.

support
Posts: 356
Joined: Sat Apr 27, 2013 9:22 am

Re: horizontal scroll bar bug

Post by support »

I dont think it's a bug, you should control ctl_div1' overflow, not ctl_panel4's.

Post Reply