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:
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:
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>
Comment