Announcement

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

    Controlling sectionStackHeader height?

    Hello,

    Can you show me how I can change this SectionStack to show the header text on multiple lines so all of the text is displayed? Or, is that not possible with Section Stack headers?

    http://www.smartclient.com/docs/9.1/a/system/reference/SmartClient_Explorer.html#sectionsExpandCollapse

    Use this sample code to see long text in the first section stack header...

    Code:
    isc.HTMLFlow.create({
        ID: "htmlFlow",
        overflow: "auto",
        padding:10,
        contents: "<b>Severity 1</b> - Critical problem<br>System is unavailable in production or " +
                  "is corrupting data, and the error severely impacts the user's operations." +
                  "<br><br><b>Severity 2</b> - Major problem<br>An important function of the system " +
                  "is not available in production, and the user's operations are restricted." +
                  "<br><br><b>Severity 3</b> - Minor problem<br>Inability to use a function of the " +
                  "system occurs, but it does not seriously affect the user's operations."
    })
    
    isc.SectionStack.create({
        ID: "sectionStack",
        visibilityMode: "multiple",
        width: 300, height: 350,
        border:"1px solid blue",
        sections: [
            { title: "Blue Pawn very very wide and lots of text is happening in here right now", expanded: true, items: [
                isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/pawn_blue.png"})
            ]},
            {title: "HTMLFlow", expanded: true, canCollapse: true, items: [ htmlFlow ]},
            {title: "Green Cube", expanded: true, canCollapse: false, items: [
                isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/cube_green.png"})
            ]},
            {title: "Yellow Piece", expanded: false, items: [
                isc.Img.create({autoDraw: false, width: 48, height: 48, src: "pieces/48/piece_yellow.png"})
            ]}
        ]
    });
    
    
    isc.IButton.create({
        left: 325,
        width: 150,
        title: "Expand Blue",
        click: "sectionStack.expandSection(0)"
    });
    
    isc.IButton.create({
        left: 325,
        top: 30,
        width: 150,
        title: "Collapse Blue",
        click: "sectionStack.collapseSection(0)"
    });

    #2
    The header height for the sections is controlled by the SectionStack.headerHeight attribute.

    By default wrap is set to false for the SectionHeaders created within a section stack.

    You could modify this by changing the SectionHeader / ImgSectionHeader classes, or by creating a subclass and applying it to your sectionStack via sectionHeaderClass, or by overriding 'getSection()', calling "Super" to get the default section header and making changes to that (changing it's wrap property and height, perhaps) and returning that.

    Regards
    Isomorphic Software

    Comment

    Working...
    X