When list grid header is wrapped,Buttons alignment is not proper

[vnathank]

Hi Isomorphic,

Please find the attached code snippet

1. Make sure that List grid is 3 columns[Column 1,column 2, column 3].
Column 1 contains image along with text;
Column 2 contains text;
Column 3 contains buttons.

2. Wrap the Column 1 and reload the Page .
3. Obeserve that buttons alignment has been changed. .

This issue is observed only if wrapped column contains image with text.

Please find the code

•We are using setCellFormatter() to display records

modelNameField.setCellFormatter(new CellFormatter() {

@Override
public String format(Object value, ListGridRecord record,
int rowNum, int colNum) {

String model= record.getAttribute("model");
boolean isDskEnabled = Boolean.parseBoolean(record
.getAttribute("dskEnabled"));

if (isDskEnabled) {
return Canvas.imgHTML(ImageUrls.DSKIMG) + " "
+ model;
}
return Canvas.imgHTML(ImageUrls.Type_Printer) + " "
+ model;

}
});

• Buttons are created using createRecordComponent ().

@Override
protected Canvas createRecordComponent(final ListGridRecord record,
Integer columnNumber) {

String fieldName = this.getFieldName(columnNumber);
final String devId = record.getAttribute("deviceId");
String language=LoginInfo.getLanguage();
HLayout recordCanvas = new HLayout(3);
recordCanvas.setHeight(22);
recordCanvas.setWidth("100%");
recordCanvas.setOverflow(Overflow.HIDDEN);
if (fieldName.equals("ChangePwd")) {

final IButton changePwdBtn = new IButton();
changePwdBtn.setTitle(resourceString.getLocalizedString(localizedStringKey.getSecDBChangePasswd()));
changePwdBtn.setHeight(20);
changePwdBtn.setAutoFit(true);

if(language!= null){
if(language.equalsIgnoreCase("fr")){
changePwdBtn.setWidth(160);
}else{
changePwdBtn.setWidth(140);
}
}
changePwdBtn.addClickHandler(new com.smartgwt.client.widgets.events.ClickHandler() {

@Override
public void onClick(ClickEvent event) {

}
});

pwdChangeBtnMap.put(devId, changePwdBtn);

recordCanvas.addMember(changePwdBtn);
return recordCanvas;
}
return null;
}

We are setting wrapping feature to list grid columns and headers using
setWrapHeaderTitles(true);
setWrapCells(true);

This we have checked with latest smartgwt patch dated(26Mar2018)

Please find the attached screenshot.

Smart GWT Version: 6.1 30-Oct-2017
Google chrome version: Version 65.0.3325.162 (Official Build) (64-bit).

[Isomorphic]

You've got content that forces rows to be taller than configured, but you haven't set fixedRecordHeights:false, so what's happening is that your recordComponents are being placed according to how tall you've configured the rows to be instead of their actual size.

Either avoid the wrapping that's increasing the row height, or set a larger row height, or set fixedRecordHeights:false.

[vnathank]

Hi Isomorphic,

We added fixedRecordHeights:false and increase cellHeight to 50.But same issue is observered.
Please find all listgrid properties we used
setAutoSaveEdits(false);
setSortField(fieldNames.getiPAddress());
setCellHeight(50);
setHeaderHeight(30);
setWidth100();
setHeight100();
setMargin(10);
setLeaveScrollbarGap(false);
setWrapHeaderTitles(true);
setWrapCells(true);
setShowRollOver(false);
setCanAutoFitFields(true);
setCanResizeFields(true);
setFixedRecordHeights(false);
setAllowFilterOperators(false);
setAutoFitHeaderHeights(true);
setShowFilterEditor(false);
setFilterOnKeypress(true);
setFetchDelay(500);
setWarnOnRemoval(true);
setShowRecordComponents(true);
setShowRecordComponentsByCell(true);

[Isomorphic]

We're not reproducing such an issue, and the code you've posted continues to be only partial. Please let us know if you can reproduce a minimal, ready-to-run test case that shows that this is a framework issue.