Announcement

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

    How to set the minWidth of the app

    What bit of magic am I missing in getting the minWidth to be honored. In the example code below I've tried to set the minWidth so that the TileLayout area's width will not shrink smaller than two canvases wide, but have not had any luck in getting that to happen. Seems like the minWidth in my test is not being honored at all.

    In general, what I am trying to do, is set the minWidth of the app. If the user resizes their browser smaller than the minWidth, the layout should stop resizing, and the browser scrollbars should appear (don't really wan't div scrollbars if at all possible).


    Code:
    isc.Page.setEvent('load',function(){
        
        isc.VLayout.create({
            autoDraw: true,
            overflow: "visible",
            width:  "98%",
            height: "98%",
            minWidth: 800,
            layoutMargin: 10,
            defaultLayoutAlign: "center",
            
            members: 
            [
                isc.Label.create({
                    valign:'center',
                    wrap:true,
                    width:"98%",
                    height: 50,
                    contents:'<span style="font-size:2.0em;font-weight:bold;color:blue;">Fluid Layout Test</span>'
                }),
    
                 isc.TileLayout.create({
                    layoutPolicy: "flow",
                    align: "center",
                    overflow: "visible",
                    autoWrapLines: true,
                    showEdges: true,
                    width:  "83%",                
                    height: "75%",
                    tiles: 
                    [
                        isc.Canvas.create({width:300,height:300,edgeSize:1,showEdges:true}),
                        isc.Canvas.create({width:300,height:300,edgeSize:1,showEdges:true}),
                        isc.Canvas.create({width:300,height:300,edgeSize:1,showEdges:true}),
                        
                        isc.Canvas.create({width:300,height:300,edgeSize:1,showEdges:true}),
                        isc.Canvas.create({width:300,height:300,edgeSize:1,showEdges:true}),
                        isc.Canvas.create({width:300,height:300,edgeSize:1,showEdges:true}),
                        
                        isc.Canvas.create({width:300,height:300,edgeSize:1,showEdges:true}),
                        isc.Canvas.create({width:300,height:300,edgeSize:1,showEdges:true}),
                        isc.Canvas.create({width:300,height:300,edgeSize:1,showEdges:true})
                    ]
                }),
                
                isc.Label.create({
                    valign:'top',
                    topMargin: 25,
                    wrap:true,
                    width:"98%",
                    height: "*",
                    contents:'<span>Footer here</span>'
                })            
            ]
        });
    });

    #2
    There's a related thread minWidth property still waiting for official feedback, but it seems to be pointing out that minWidth probably isn't what's needed to set the minimum width for the entire app.

    So, I guess the question becomes simpler: How do you set the minimum width of a SmartClient app?

    Comment


      #3
      Here's one way to do it:

      Code:
      isc.Canvas.create({
          ID:"minSizer",
          width:"100%", height:"100%",
          contents:isc.Canvas.spacerHTML(800, 500)
      })
      
      isc.VLayout.create({
         ID:"pageLayout",
         width:"100%", height:"100%", percentSource:minSizer,
         members : [
              isc.Canvas.create({ 
                   border:"5px solid blue", 
                   contents:"App component one", 
                   overflow:"hidden" 
              }),
              isc.Canvas.create({ 
                   border:"5px solid blue", 
                   contents:"App component two", 
                   overflow:"hidden" 
              })
         ]
      })

      Comment


        #4
        That's what I needed.

        Thanks,

        Comment

        Working...
        X