Hi,
I’m having alignment problems when using the combination of grouping, expansion, left-alignment, IE7 compatibility and padding in our custom skin. This produces the vertical alignment problems shown in the attached screenshot.
I have recreated the problem using the nightly build from 21st of November, the helloworld-2.0 example project and the Custom Grouping Grid Showcase sample.
My HTML (as required by other parts of my webapp) specifies IE7 compatibility:
Java:
Additional CSS (in the code that produced the attached screenshot, I added the following to the end of the silverware skin’s skin_styles.css ListGrid section :
The Results tab of the Developer Console shows only:
Are you able to fix this problem?
Regards,
Andrew
I’m having alignment problems when using the combination of grouping, expansion, left-alignment, IE7 compatibility and padding in our custom skin. This produces the vertical alignment problems shown in the attached screenshot.
I have recreated the problem using the nightly build from 21st of November, the helloworld-2.0 example project and the Custom Grouping Grid Showcase sample.
My HTML (as required by other parts of my webapp) specifies IE7 compatibility:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>SmartGWT Hello World</title>
<script type="text/javascript" language="javascript" src="helloworld/helloworld.nocache.js"></script>
<script type="text/javascript" language="javascript"
src="skin/load_skin.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
</body>
</html>
Java:
Code:
package com.mycompany.client;
/*
* Smart GWT (GWT for SmartClient)
* Copyright 2008 and beyond, Isomorphic Software, Inc.
*
* Smart GWT is free software; you can redistribute it and/or modify it
* under the terms of the GNU Lesser General Public License version 3
* as published by the Free Software Foundation. Smart GWT is also
* available under typical commercial license terms - see
* http://smartclient.com/license
*
* This software is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*/
import java.util.Date;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.i18n.client.NumberFormat;
import com.mycompany.client.data.CountryXmlDS;
import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.ExpansionMode;
import com.smartgwt.client.types.GroupStartOpen;
import com.smartgwt.client.types.ListGridFieldType;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.grid.CellFormatter;
import com.smartgwt.client.widgets.grid.GroupNode;
import com.smartgwt.client.widgets.grid.GroupTitleRenderer;
import com.smartgwt.client.widgets.grid.GroupValueFunction;
import com.smartgwt.client.widgets.grid.ListGrid;
import com.smartgwt.client.widgets.grid.ListGridField;
import com.smartgwt.client.widgets.grid.ListGridRecord;
public class HelloWorld implements EntryPoint {
public void onModuleLoad() {
SC.showConsole();
CountryXmlDS dataSource = CountryXmlDS.getInstance();
final ListGrid countryGrid = new ListGrid() {
@Override
protected Canvas getExpansionComponent(ListGridRecord abstractRecord) {
Canvas canvas = super.getExpansionComponent(abstractRecord);
// Clear all existing contents
for (Canvas child : canvas.getChildren()) {
canvas.removeChild(child);
}
Label detailsLayout = new Label("Expanded info");
canvas.addChild(detailsLayout);
return canvas;
}
};
countryGrid.setCanEdit(true);
countryGrid.setWidth(500);
countryGrid.setHeight(224);
countryGrid.setShowAllRecords(true);
countryGrid.setCellHeight(22);
countryGrid.setDataSource(dataSource);
countryGrid.setGroupStartOpen(GroupStartOpen.ALL);
countryGrid.setGroupByField("continent");
countryGrid.setAutoFetchData(true);
countryGrid.setCanExpandRecords(true);
countryGrid.setExpansionMode(ExpansionMode.DETAIL_FIELD);
ListGridField nameField = new ListGridField("countryName");
ListGridField continentField = new ListGridField("continent");
ListGridField independenceField = new ListGridField("independence");
independenceField.setAlign(Alignment.LEFT);
independenceField.setGroupValueFunction(new GroupValueFunction() {
public Object getGroupValue(Object value, ListGridRecord record, ListGridField field, String fieldName, ListGrid grid) {
Date independence = (Date) value;
if(independence == null) {
return "Ancient";
} else if (independence.getYear() < 10) { //if year < 1910
return "Pre-Industrial";
} else {
return "Post-Industrial";
}
}
});
final int groupSmall = 1;
final int groupMed = 2;
final int groupLarge = 3;
ListGridField populationField = new ListGridField("population");
populationField.setType(ListGridFieldType.INTEGER);
populationField.setAlign(Alignment.LEFT);
populationField.setCellFormatter(new CellFormatter() {
public String format(Object value, ListGridRecord record, int rowNum, int colNum) {
if(value == null) return null;
try {
NumberFormat nf = NumberFormat.getFormat("0,000");
return nf.format(((Number) value).longValue());
} catch (Exception e) {
return value.toString();
}
}
});
populationField.setGroupTitleRenderer(new GroupTitleRenderer() {
public String getGroupTitle(Object groupValue, GroupNode groupNode, ListGridField field, String fieldName, ListGrid grid) {
final int groupType = (Integer) groupValue;
String baseTitle ="";
switch (groupType) {
case groupSmall:
baseTitle = "Population less than 100 million";
break;
case groupMed:
baseTitle = "Population between 100 million-1 billion";
break;
case groupLarge:
baseTitle = "Population over 1 billion";
break;
}
baseTitle += " (" + groupNode.getGroupMembers().length + " members)";
return baseTitle;
}
});
ListGridField countryCodeField = new ListGridField("countryCode", "Flag", 40);
countryCodeField.setAlign(Alignment.CENTER);
countryCodeField.setType(ListGridFieldType.IMAGE);
countryCodeField.setImageURLPrefix("flags/16/");
countryCodeField.setImageURLSuffix(".png");
countryCodeField.setCanEdit(false);
countryGrid.setFields(nameField, continentField, independenceField, populationField, countryCodeField);
countryGrid.draw();
}
}
Code:
.tableCell,
.tableCellDark,
.tableCellOver,
.tableCellOverDark,
.tableCellSelected,
.tableCellSelectedDark,
.tableCellSelectedOver,
.tableCellSelectedOverDark,
.tableCellDisabled,
.tableCellDisabledDark,
.tableCellLink,
.tableCellLinkDark,
.tableCellLinkSelected,
.tableCellLinkSelectedDark,
.tableCellLinkOver,
.tableCellLinkOverDark,
.tableCellLinkSelectedOver,
.tableCellLinkSelectedOverDark,
.tableCellLinkDisabled,
.tableCellLinkDisabledDark,
.tableCellOverlayLink,
.tableCellOverlayLinkDark,
.tableCellOverlayLinkSelected,
.tableCellOverlayLinkSelectedDark,
.tableCellOverlayLinkOver,
.tableCellOverlayLinkOverDark,
.tableCellOverlayLinkSelectedOver,
.tableCellOverlayLinkSelectedOverDark,
.tableCellOverlayLinkDisabled,
.tableCellOverlayLinkDisabledDark,
.highlightCellCritical,
.highlightCellCriticalDark,
.highlightCellCriticalSelected,
.highlightCellCriticalSelectedDark,
.highlightCellCriticalOver,
.highlightCellCriticalOverDark,
.highlightCellCriticalSelectedOver,
.highlightCellCriticalSelectedOverDark,
.highlightCellCriticalDisabled,
.highlightCellCriticalDisabledDark,
.tableCellSegmentVidDeg,
.tableCellSegmentVidDegDark,
.tableCellSegmentVidDegSelected,
.tableCellSegmentVidDegSelectedDark,
.tableCellSegmentVidDegOver,
.tableCellSegmentVidDegOverDark,
.tableCellSegmentVidDegSelectedOver,
.tableCellSegmentVidDegSelectedOverDark,
.tableCellSegmentVidDegDisabled,
.tableCellSegmentVidDegDisabledDark,
.tableCellSegmentMos,
.tableCellSegmentMosDark,
.tableCellSegmentMosSelected,
.tableCellSegmentMosSelectedDark,
.tableCellSegmentMosOver,
.tableCellSegmentMosOverDark,
.tableCellSegmentMosSelectedOver,
.tableCellSegmentMosSelectedOverDark,
.tableCellSegmentMosDisabled,
.tableCellSegmentMosDisabledDark,
.highlightCellWarning,
.highlightCellWarningDark,
.highlightCellWarningSelected,
.highlightCellWarningSelectedDark,
.highlightCellWarningOver,
.highlightCellWarningOverDark,
.highlightCellWarningSelectedOver,
.highlightCellWarningSelectedOverDark,
.highlightCellWarningDisabled,
.highlightCellWarningDisabledDark,
.highlightCellCriticalLink,
.highlightCellCriticalLinkDark,
.highlightCellCriticalLinkSelected,
.highlightCellCriticalLinkSelectedDark,
.highlightCellCriticalLinkOver,
.highlightCellCriticalLinkOverDark,
.highlightCellCriticalLinkSelectedOver,
.highlightCellCriticalLinkSelectedOverDark,
.highlightCellCriticalLinkDisabled,
.highlightCellCriticalLinkDisabledDark,
.highlightCellWarningLink,
.highlightCellWarningLinkDark,
.highlightCellWarningLinkSelected,
.highlightCellWarningLinkSelectedDark,
.highlightCellWarningLinkOver,
.highlightCellWarningLinkOverDark,
.highlightCellWarningLinkSelectedOver,
.highlightCellWarningLinkSelectedOverDark,
.highlightCellWarningLinkDisabled,
.highlightCellWarningLinkDisabledDark,
.menuDisabledCell,
.menuDisabledCellDark,
.menuDisabledCellSelected,
.menuDisabledCellSelectedDark,
.menuDisabledCellOver,
.menuDisabledCellOverDark,
.menuDisabledCellSelectedOver,
.menuDisabledCellSelectedOverDark,
.menuDisabledCellDisabled,
.menuDisabledCellDisabledDark {
padding: 0px 7px;
}
Code:
15:00:57.953:INFO:Log:initialized 15:00:58.078:WARN:AutoObserver:Use addInterfaceProperties() to add methods to interface [Class AutoObserver] 15:00:58.266:WARN:Log:New Class ID: 'IAutoFitButton' collides with ID of existing Class object '[Class IAutoFitButton]'. Existing object will be replaced. 15:00:58.297:INFO:Log:isc.Page is loaded
Are you able to fix this problem?
Regards,
Andrew
Attached Files
Comment