Announcement

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

    ListGridHeader rendering issue in Firefox

    Hi there,

    Below is an example you can run against the SDK showing a problem with ListGridHeader rendering that occurs in Firefox. In the process of developing this example for you to review, I learned that the key problem with this example is the following code that you can find in the full example. For some reason, calling scrollRecordIntoView causes the grid columns to become partially hidden when you follow the instructions below.

    Code that introduces problem:
    Code:
        isc.Timer.setTimeout(
            "animalsGrid.scrollRecordIntoView(" + animalsGrid.getRecordIndex(record) + ")",
            0
        );

    To recreate the issue:
    1. Use the full example code below in the SDK
    2. Open up a Window in Firefox 2
    3. Resize that window to a very small size. Around 600 X 600 is ideal.
    4. Open the url associated with the example
    5. You will see a Grid. Click on a row.
    6. Clicking on a Row will cause the Detail section to display which hides the grid.
    7.Click on the Details SectionStack header to collapse the Detail section
    8. When you collapse it, your grid columns are now partially hidden and unreadable.
    9. Try the same in IE and this doesn't happen.
    10. Try the same without the scrollRecordIntoView and it doesn't happen either.

    Full example:

    Code:
    <!--------------------------------------------------------------------
        SmartClient SDK
        Component Data Binding example
    
        Copyright 2001-2007 Isomorphic Software, Inc. (www.isomorphic.com)
    ---------------------------------------------------------------------->
    
    <%@ taglib uri="/WEB-INF/iscTaglib.xml" prefix="isomorphic" %>
    <HEAD><TITLE>
            SmartClient SDK - Animal Data Binding example
    </TITLE></HEAD><isomorphic:loadISC skin="SmartClient"/>
    <BODY BGCOLOR=#D3D3D3>
    
    <SCRIPT>
    <isomorphic:loadDS ID="animals" />
    
    isc.setAutoDraw(false);
    
    
    
    isc.HTMLFlow.create({
        	ID:"animalMessage",
        	padding:10,
            width:650,
        	contents:"Animal Details"
    		});
    
    
    isc.HTMLFlow.create({
        	ID:"animalMessage2",
        	padding:10,
        	contents:"Animal Details"
    		});
    
    isc.HTMLFlow.create({
        	ID:"animalMessage3",
        	padding:10,
        	contents:"Animal Details"
    		});
    
    
    isc.HTMLFlow.create({
        	ID:"animalMessage4",
        	padding:10,
        	contents:"Animal Details"
    		});
    
    isc.HTMLFlow.create({
        	ID:"animalMessage5",
        	padding:10,
        	contents:"Animal Details"
    		});
    
    isc.HTMLFlow.create({
        	ID:"animalMessage6",
        	padding:10,
        	contents:"Animal Details"
    		});
    
    isc.HTMLFlow.create({
        	ID:"animalMessage7",
        	padding:10,
        	contents:"Animal Details"
    		});
    
    isc.HTMLFlow.create({
        	ID:"animalMessage8",
        	padding:10,
        	contents:"Animal Details"
    		});
    
    
    isc.HTMLFlow.create({
        	ID:"animalMessage9",
        	padding:10,
        	contents:"Animal Details"
    		});
    
    
    
    isc.DynamicForm.create({
    	ID: "animalGamesSummary",
    	itemHoverAlign:"left",
    	itemHoverHeight:100,
    	itemHoverWidth:200,
      	editEvent:"click",
    	overflow: "auto",
    	emptyMessage:"empty"
    });
    
    function updateAnimalGamesSummary() {
    
    	animalGamesSummaryFields = [
     		{type:"rowSpacer", height:10},
    		{name:"animalSummary"}
     	];
    	animalGamesSummary.setFields(animalGamesSummaryFields);
    
    }
    
    isc.DynamicForm.create({
    	title:"Games Editor",
    	ID:"animalGamesEditor",
      	overflow: "auto",
      	itemHoverAlign:"left",
    	itemHoverHeight:100,
    	itemHoverWidth:200,
        emptyMessage:"empty"
    });
    
    
    function updateAnimalGamesEditor() {
    
    	animalGamesEditorFields = [
     		{type:"rowSpacer", height:10},
    		{name:"animalGamesEditor"}
     	];
    	animalGamesEditor.setFields(animalGamesEditorFields);
    
    
    }
    
    
    isc.DynamicForm.create({
    	title:"Data",
    	ID:"animalDataEditor",
      	overflow: "auto",
      	itemHoverAlign:"left",
    	itemHoverHeight:100,
    	itemHoverWidth:200,
        emptyMessage:"empty"
    });
    
    function updateAnimalDataEditor() {
    
    	animalDataEditorFields = [
     		{type:"rowSpacer", height:10},
    		{name:"animalDataEditor"}
     	];
    	animalDataEditor.setFields(animalDataEditorFields);
    
    }
    
    
    isc.HLayout.create({
    	ID:"animalGamesSummaryLayout", 
    	members:[
            animalGamesSummary,
            animalGamesEditor,
            animalDataEditor
        ]
    });
    
    
     isc.DynamicForm.create({
     	ID: "animalGamesSave",
    	autoDraw:false,
    	numCols:5,
    	width:"100%",
    	itemHoverAlign:"left",
    	itemHoverHeight:100,
    	itemHoverWidth:200,
    	colWidths:[80,80,80,80,"*"]
     });
    
    
     
     function updateAnimalGamesSave(){
     	animalGamesSaveFields=[
    
       	  	{type:"button",  cellPadding:0,  startRow:false,endRow: false,prompt:"edit",title:"Edit", showTitle:false, showLabel:false}
        ];
      
        animalGamesSave.setFields(animalGamesSaveFields);
     
     }
    
    
    isc.ListGrid.create({
    	ID:"animalGamesGrid",
    	headerHeight:36,
    	height:125,
    	canHover:true,
    	hoverWidth:150,
    	hoverHeight:50,
    	hoverAlign:"left",
    	hoverVAlign:"center",
    	canSort:false,
    	stopOnErrors:true,
    	headerButtonProperties:{
            hoverWidth:200, hoverHeight:100, hoverAlign:"left", hoverVAlign:"center"
        },
    	listEndEditAction:"next",
    	autoSaveEdits:false,
    	editEvent:"click",
    	emptyMessage:"empty",
    	alternateRecordStyles: true,
    
    	fields:[
                {name:"includeGames", align:"center", canEdit:true, width:50, prompt:"include"},
    		{name:"gameName",  canEdit:true, prompt:"Game"}
    
    	]
    })
    
    
    
    isc.SectionStack.create({
    	ID:"animalGamesSections", 
    	className:"borderBR",
        visibilityMode:"multiple", 
        backgroundColor:"white",
    	sections:[
        	{ expanded:true, items:[animalGamesGrid],showHeader:false},
        	{ expanded:true, items:[animalGamesSave],showHeader:false},
    	{ expanded:true, items:[animalGamesSummaryLayout],showHeader:false}
        ]
    });
    
    
    isc.SearchForm.create({
        cellPadding:4,
        numCols:8,
    	itemHoverAlign:"left",
    	itemHoverHeight:100,
    	itemHoverWidth:200,
        ID:"findAnimalsForm"
    })
    
    ListGrid.create({
                ID:"animalsGrid",
                dataSource:"animals",
    		virtualScrolling:false,
        		selectionType:"none",
        		recordClick : function (viewer, record, recordNum, field, fieldNum, value, rawValue) {
        			nextRecord=record;
    			showDetails();
        		}, 
           	headerHeight: 36
            })
    
    
    isc.TabSet.create({
    	ID:"animalTabs",
    	height:380,
    	tabs:[
    		{title:"Games", pane:animalMessage, ID:"animalGamesTab", width:70},
    		{title:"Notes", pane:animalMessage, ID:"animalNotesTab", width:70},
    		{title:"Food", pane:animalMessage, ID:"animalFoodTab", width:70},
    		{title:"Details", pane:animalMessage, ID:"animalDetailsTab", width:70}
    
    	]
    });
    
    
    
    <%-- right-side layout--%>
    isc.SectionStack.create({
    	ID:"rightSections", 
    	overflow:"auto",
    	className:"borderBR",
        visibilityMode:"multiple", backgroundColor:"white",
    	sections:[
          {title:"View Options", resizeable:false, items:[{children:[findAnimalsForm],height:30}]},      			
        	{title:"Grid", canCollapse:false, expanded:true, items:[animalsGrid]},
        	{title:"Detail", resizeable:false,  expanded:true, items:[animalTabs]} ,
    	{title:"Welcome", canCollapse:false,expanded:true, items:[animalMessage6]}
       ]
    });
    
    <%-- fund sections--%>
    isc.SectionStack.create({ID:"animalProfileSections", className:"borderBR",
        visibilityMode:"multiple", backgroundColor:"white",
    	sections:[
        	{ expanded:true, items:[animalMessage2],showHeader:false},
        	{ expanded:true, items:[animalMessage3],showHeader:false}
    	]
    })
    
    <%-- left-side layout--%>
    isc.SectionStack.create({ID:"leftSections",
        showResizeBar:true, visibilityMode:"multiple", width:250, className:"borderBL",
    	sections:[
        	{title:"Left", canCollapse:false, expanded:true, items:[animalProfileSections]}
    	]
    })
    
    
    
    <%-- **************overall page layout ************************--%>
    isc.VLayout.create({
    	ID:"pageLayout", 
    	width:"100%", 
    	height:"100%", 
    	members:[
        	animalMessage4,
        	isc.HLayout.create({
        		ID:"mainLayout", 
        		layoutMargin:5, 
        		members:[
            		leftSections,
            		rightSections
        		]
        	})
    	]
    });
    
    
    function showDetails() {
    
    	var record = nextRecord;
    	if(!rightSections.sectionIsExpanded(2) ){
    	    isc.Timer.setTimeout(
              "rightSections.expandSection(2);",
            0
        	);
    	}
    
       	animalTabs.updateTab(animalTabs.getTabObject("animalGamesTab"),animalGamesSections);
    	animalTabs.updateTab(animalTabs.getTabObject("animalNotesTab"),animalMessage7);
     	animalTabs.updateTab(animalTabs.getTabObject("animalFoodTab"),animalMessage8);
    	animalTabs.updateTab(animalTabs.getTabObject("animalDetailsTab"),animalMessage9);
    
        isc.Timer.setTimeout(
            "animalsGrid.scrollRecordIntoView(" + animalsGrid.getRecordIndex(record) + ")",
            0
        );
    
    }
    
    
    
    
    function updateFindAnimalsForm(){
        	findAnimalsForm.setFields(
    		[
        	{type:"staticText", shouldSaveValue:false},
          {name:"search"}
    		]
    		);
    
    
    }
    
    function updateAnimalsGrid(){
        animalsGrid.setFields([
    		{name:"commonName"},
                {name:"information"}
    	]
       )
    }
    
    
    function initPageLayout(){
    
        updateAnimalGamesSave()
        updateAnimalGamesSummary();
        updateAnimalGamesEditor();
        updateAnimalDataEditor();
        updateFindAnimalsForm()
        updateAnimalsGrid();
     
      
       pageLayout.draw();
    
       //rightSections.showSection(0); 
       rightSections.showSection(1);
       rightSections.showSection(2);
       rightSections.hideSection(3);
       
       rightSections.collapseSection(2);
    
    }
    
    animalsGrid.fetchData(null,"initPageLayout();");
    
    </SCRIPT>
    </BODY></HTML>

    #2
    Hi Senordhuff
    Thanks for the information, and the excellent test case.
    Yes that's a bug, which we've now fixed in our code.
    This patch should resolve it for you (should be included in your application after loading SmartClient).

    Code:
    //----------------------------------------------------------------------------
    // Isomorphic SmartClient 6.0 patch
    // Purpose: Fix for an issue where under some circumstances overflow:hidden widgets could be
    // inappropriately scrolled beyond their content after resize
    // 
    // Applies to SmartClient 6.0 builds only
    //----------------------------------------------------------------------------
    if (window.isc && isc.version.startsWith("6.0/")){ 
    isc.Canvas.addMethods({
    $_ux:isc.Canvas.getPrototype().$ux,$ux:function (a,b,c,d) {
    this.$_ux(a,b,c,d);if (this.overflow == isc.Canvas.HIDDEN) {
    var sl = this.getScrollLeft(), st = this.getScrollTop(), msl = this.getScrollRight(), mst = this.getScrollBottom(), clamped = false;
    if (sl > msl) {sl = msl;clamped = true;}if (st > mst) {st = mst;clamped = true;}
    if (clamped) this.scrollTo(sl,st);}}})
    } else if (window.isc) {
      isc.Log.logWarn("Patch for SmartClient 6.0 builds included in this application. " +
                "You are currently running SmartClient verion '"+ isc.version + 
                "'. This patch is not compatible with this build and will have no effect. " +
                "It should be removed from your application source.");
    
    }
    Note: this patch will auto-disable when upgrade to a new version of SmartClient, at which point it can be removed from your application.

    Comment

    Working...
    X