Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Exception in Developer Console when scrollbarSize: 0

    Hi Isomorphic,

    please see this simple testcase https://www.smartclient.com/smartcli...tchOperationFS:

    Code:
    isc.ListGrid.create({
        ID:"dsListGrid", 
        width: "100%",
        height: "100%",
        autoFetchData: true,
        showCustomScrollbar: true,
        scrollbarSize: 0,
        dataSource: "supplyItem" 
    
    });
    I get those warnings:

    Code:
    17:32:34.108:MUP9:WARN:drawing:dsListGrid_body_hscroll:negative or zero area: height: 0, width: 1303, refusing to draw
        Canvas.readyToDraw() on [SpritedScrollbar ID:dsListGrid_body_hscroll] @ ISC_Core.js:2608:188
        Canvas.draw(_1=>undef) on [SpritedScrollbar ID:dsListGrid_body_hscroll] @ ISC_Core.js:2617:94
        StatefulCanvas.draw(_1=>undef, _2=>undef, _3=>undef) on [SpritedScrollbar ID:dsListGrid_body_hscroll] @ ISC_Foundation.js:212:431
        Canvas.addPeer(_1=>[SpritedScrollbar ID:dsListGrid_body_hscroll], _2=>undef, _3=>undef, _4=>undef) on [GridBody ID:dsListGrid_body] @ ISC_Core.js:2849:61
        Canvas._setHorizontalScrollbar() on [GridBody ID:dsListGrid_body] @ ISC_Core.js:3328:143
        Canvas.__adjustOverflow(_1=>"parentDrawn") on [GridBody ID:dsListGrid_body] @ ISC_Core.js:3316:149
        Canvas._adjustOverflow(_1=>"parentDrawn") on [GridBody ID:dsListGrid_body] @ ISC_Core.js:3264:6
        Canvas.adjustOverflow(_1=>"parentDrawn", _2=>undef, _3=>undef) on [GridBody ID:dsListGrid_body] @ ISC_Core.js:3255:47
        [c]Class.invokeSuper(_1=>[Class GridBody], _2=>"adjustOverflow", _3=>"parentDrawn", _4=>undef, _5=>undef, _6=>undef, _7=>undef, _8=>undef, _9=>undef, _10=>undef, _11=>undef, _12=>undef, _13=>undef) on [GridBody ID:dsListGrid_body] @ ISC_Core.js:315:162
        GridBody.adjustOverflow(_1=>"parentDrawn", _2=>undef, _3=>undef, _4=>undef, _5=>undef) on [GridBody ID:dsListGrid_body] @ ISC_Grids.js:620:260
        Canvas._completeChildOverflow(_1=>Array[2], _2=>undef) on[ListGrid ID:dsListGrid] @ ISC_Core.js:2679:16
        Layout.layoutChildren(_1=>"initial draw", _2=>undef, _3=>undef) on[ListGrid ID:dsListGrid] @ ISC_Foundation.js:358:48
        ListGrid.layoutChildren(_1=>"initial draw", _2=>undef, _3=>undef) on[ListGrid ID:dsListGrid] @ ISC_Grids.js:1282:32
        Layout.drawChildren() on[ListGrid ID:dsListGrid] @ ISC_Foundation.js:266:640
        Canvas.draw(<no args: recursion>)  on[ListGrid ID:dsListGrid] @ ISC_Core.js:2629:253
        [c]Class.invokeSuper(<no args: recursion>)  on[ListGrid ID:dsListGrid] @ ISC_Core.js:315:162
        ListGrid.draw(_1=>undef, _2=>undef, _3=>undef, _4=>undef) on[ListGrid ID:dsListGrid] @ ISC_Grids.js:1364:621
        Canvas.addChild(_1=>[ListGrid ID:dsListGrid], _2=>null, _3=>true) on [Canvas ID:featureExplorer_exampleViewer_exampleViewPane_viewContainer] @ ISC_Core.js:2835:4
        ExampleViewer.addCanviiToView(_1=>Array[2]) on [ExampleViewer ID:featureExplorer_exampleViewer] @ ISC_ExampleViewer.js:96:97
        ExampleViewer.evalExample(_1=>"isc.DataSource.create({\n    testFileName..."[3326]) on [ExampleViewer ID:featureExplorer_exampleViewer] @ ISC_ExampleViewer.js:92:546
        ExampleViewer.showExample(_1=>undef) on [ExampleViewer ID:featureExplorer_exampleViewer] @ ISC_ExampleViewer.js:92:61
        ExampleSourcePane.tryEditedCode() on [ExampleSourcePane ID:featureExplorer_exampleViewer_exampleSourcePane] @ ISC_ExampleViewer.js:111:2029
        SourceEditor.tryClicked(_1=>undef) on [SourceEditor ID:featureExplorer_exampleViewer_exampleSourcePane_sourceEditor] @ ISC_ExampleViewer.js:115:491
        _3.eval(event=>Obj, eventInfo=>undef) on [IButton ID:featureExplorer_exampleViewer_exampleSourcePane_sourceEditor_sourceEditorToolbar_tryItButton] @ [no file]:3:35
        StatefulCanvas.handleActivate(_1=>Obj, _2=>undef) on [IButton ID:featureExplorer_exampleViewer_exampleSourcePane_sourceEditor_sourceEditorToolbar_tryItButton] @ ISC_Foundation.js:236:108
        StatefulCanvas.handleClick(_1=>Obj, _2=>undef) on [IButton ID:featureExplorer_exampleViewer_exampleSourcePane_sourceEditor_sourceEditorToolbar_tryItButton] @ ISC_Foundation.js:237:13
        [c]EventHandler.bubbleEvent(_1=>[IButton ID:featureExplorer_exampleViewer_exampleSourcePane_sourceEditor_sourceEditorToolbar_tryItButton], _2=>"click", _3=>undef, _4=>undef, _5=>undef) on [Class EventHandler] @ ISC_Core.js:2147:89
        [c]EventHandler.handleClick(_1=>[IButton ID:featureExplorer_exampleViewer_exampleSourcePane_sourceEditor_sourceEditorToolbar_tryItButton], _2=>undef) on [Class EventHandler] @ ISC_Core.js:1982:50
        EventHandler._handleMouseUp(_1=>[object MouseEvent], _2=>undef) on [Class EventHandler] @ ISC_Core.js:1966:11
        [c]EventHandler.handleMouseUp(_1=>[object MouseEvent], _2=>undef) on [Class EventHandler] @ ISC_Core.js:1957:57
        [c]EventHandler.dispatch(_1=>[c]EventHandler.handleMouseUp(), _2=>[object MouseEvent]) on [Class EventHandler] @ ISC_Core.js:2234:108
        HTMLDocument.eval(event=>[object MouseEvent]) @ [no file]:3:123
    
    17:32:34.550:TMR7:WARN:drawing:dsListGrid_body_vscroll:negative or zero area: height: 697, width: 0, refusing to draw
        Canvas.readyToDraw() on [SpritedScrollbar ID:dsListGrid_body_vscroll] @ ISC_Core.js:2608:188
        Canvas.draw(_1=>undef) on [SpritedScrollbar ID:dsListGrid_body_vscroll] @ ISC_Core.js:2617:94
        StatefulCanvas.draw(_1=>undef, _2=>undef, _3=>undef) on [SpritedScrollbar ID:dsListGrid_body_vscroll] @ ISC_Foundation.js:212:431
        Canvas.addPeer(_1=>[SpritedScrollbar ID:dsListGrid_body_vscroll], _2=>undef, _3=>undef, _4=>undef) on [GridBody ID:dsListGrid_body] @ ISC_Core.js:2849:61
        Canvas._setVerticalScrollbar() on [GridBody ID:dsListGrid_body] @ ISC_Core.js:3331:339
        Canvas.__adjustOverflow(_1=>"redraw") on [GridBody ID:dsListGrid_body] @ ISC_Core.js:3317:25
        Canvas._adjustOverflow(_1=>"redraw") on [GridBody ID:dsListGrid_body] @ ISC_Core.js:3264:6
        Canvas.adjustOverflow(_1=>"redraw", _2=>null, _3=>true) on [GridBody ID:dsListGrid_body] @ ISC_Core.js:3255:47
        [c]Class.invokeSuper(_1=>[Class GridBody], _2=>"adjustOverflow", _3=>"redraw", _4=>null, _5=>true, _6=>undef, _7=>undef, _8=>undef, _9=>undef, _10=>undef, _11=>undef, _12=>undef, _13=>undef) on [GridBody ID:dsListGrid_body] @ ISC_Core.js:315:162
        GridBody.adjustOverflow(_1=>"redraw", _2=>null, _3=>true, _4=>undef, _5=>undef) on [GridBody ID:dsListGrid_body] @ ISC_Grids.js:646:14
        Canvas._updateHTML() on [GridBody ID:dsListGrid_body] @ ISC_Core.js:2710:61
        Canvas.redraw(_1=>false) on [GridBody ID:dsListGrid_body] @ ISC_Core.js:2701:705
        [c]Class.invokeSuper(<no args: recursion>)  on [GridBody ID:dsListGrid_body] @ ISC_Core.js:315:162
        GridRenderer.redraw(_1=>false, _2=>undef, _3=>undef, _4=>undef) on [GridBody ID:dsListGrid_body] @ ISC_Grids.js:612:383
        [c]Class.invokeSuper(<no args: recursion>)  on [GridBody ID:dsListGrid_body] @ ISC_Core.js:315:162
        GridBody.redraw(_1=>false, _2=>undef, _3=>undef, _4=>undef) on [GridBody ID:dsListGrid_body] @ ISC_Grids.js:724:23
        [c]Canvas.clearRedrawQueue() on [Class Canvas] @ ISC_Core.js:3748:110
        [c]Class.fireCallback(_1=>Obj, _2=>null, _3=>null, _4=>null, _5=>true) on [Class Timer] @ ISC_Core.js:324:104
        Timer._fireTimeout(_1=>"$ir843", _2=>869, _3=>undef) on [Class Timer] @ ISC_Core.js:1823:166
        <anonymous>() @ ISC_Core.js:1820:40
    Please take a look at this.

    Thanks in Advance,
    Kind Regards

    #2
    I´m asking, because we have a layout where we don't want to show scrollbars, but have it scroll able. And as I now, there is no method to turn off both, custom scrollbars and browser scrollbars. Or am I wrong?

    Comment


      #3
      scrollbarSize:0 is not a valid setting.

      Set overflow to hidden to avoid scroll bars but still clip content.

      Comment


        #4
        Hi Isomorphic,

        this does not work, e.g. here (v12.0p_2019-02-21):
        Code:
        isc.defineClass("BlueBox", "Label").addProperties({
            align:"center",
            border:"1px solid #808080",
            backgroundColor:"lightblue",
            styleName:"blackText"
        });
        
        isc.HLayout.create({
            width:600, height:600, membersMargin:20,
            overflow: "hidden",
            members:[
               isc.HLayout.create({
                    showEdges:true,
                    height:1000, membersMargin:5,  layoutMargin:10,
                    members:[
                        isc.BlueBox.create({width:50, contents:"width 50"}),
                        isc.BlueBox.create({width:"*", contents:"width *"}),
                        isc.BlueBox.create({width:"30%", contents:"width 30%"})
                    ]
                })
            ]
        });
        Goal is to have a scrollable area without scrollbars, as it is clear from the display that the area is scrollable (vertically), but the scrollbars would break the design.
        This works here with scrollbarSize: 1 (at least I do not notice scrollbars but IMHO this also generates also unnecessary markup:
        Code:
        isc.defineClass("BlueBox", "Label").addProperties({
            align:"center",
            border:"1px solid #808080",
            backgroundColor:"lightblue",
            styleName:"blackText"
        });
        
        isc.HLayout.create({
            width:600, height:600, membersMargin:20,
            overflow: "auto",
            scrollbarSize: 1,
            members:[
               isc.HLayout.create({
                    showEdges:true,
                    height:1000, membersMargin:5,  layoutMargin:10,
                    members:[
                        isc.BlueBox.create({width:50, contents:"width 50"}),
                        isc.BlueBox.create({width:"*", contents:"width *"}),
                        isc.BlueBox.create({width:"30%", contents:"width 30%"})
                    ]
                })
            ]
        });
        Would a setter like "setUseScrollsbars(boolean useScrollsbars)" or similar not be a good thing?

        Best regards
        Blama

        Comment


          #5
          Why are you considering the area as not scrollable? It is programmatically scrollable. If you mean to make it scrollable via mousewheel, that's a bad idea (content hidden from user with no indication) and an accessibility violation.

          Comment


            #6
            Hi,

            I believe I have similar situation and I also would like to a way to disable scrollbars but keep the container scrollable.

            My case is to have a series of photos with equal width side by side with only one image visible inside an outer container with width equals to one photos.. User can scroll using mousewheel but only to fixed position as the scroll snaps to show only full photos.
            Instead of native or SmartClient scrollbar in the outer container I use custom "scrollbar" showing series of dots which are better suited to discrete values than scrollbar plus semi-transparent arrows that scroll outer container always by one width.
            Even without scrollbar/dots/arrows this is more and more common on mobile - see switching between photos on Google Photos for example.

            Best regards,
            Janusz

            Comment


              #7
              Hi Isomorphic,

              sorry I forgot to answer. I still do think that this is good addition - "scrollable without scrollbar", even if it is an accessibility violation.
              It might be correct the way it is for accessibility reasons, but is annoying from a design perspective.
              Of course I could make "all background-color"-ScrollBar elements, but IMHO this would be a waste of time and also and more importantly DOM elements.

              Best regards
              Blama

              Comment


                #8
                This seems to be another instance where you would turn off the scrollbar via the existing overflow API and add mouseWheel handlers if you want, but again you want visible scrolling controls.. so already well covered by the existing behaviors and APIs. Are we missing something?

                Comment

                Working...
                X