Proper Way to Layout ListGrid Cell

[mstickel]

Using SC 8.2.

I have a question regarding the layout of table cells in a ListGrid. I modified one column's cells so that there is additional left padding. This was done in a CSS stylesheet. What happens now is that my content gets pushed off the right hand side of the cell because the cell doesn't know anything about the additional padding.

What is the recommended way to do custom padding in a cell so that content doesn't get truncated on the right hand side?

[Isomorphic]

If there's padding on the left, an autoFitting is not enabled, what are you expecting to happen as an alternative to cutting off the content?

[mstickel]

What's currently happening is that the content of my cell is a drop-down list. This drop-down fits the width of the cell, regardless of how wide I stretch it. This works fine when there's no left padding. But when I add left padding, the drop-down gets cut off on the right by the amount of pixels I added on the left.

I need a way to have the drop-down account for the left padding so it can properly set its width such that the full widget is visible.

[Isomorphic]

Not sure what your "drop-down" implementation is, but the default SelectItem used for inline editing does this automatically. If you'd added your own drop-down control or your own sizing approach, you'll need to subtract the padding you specify from the width of the column in order to supply the right size for your drop-down.

[mstickel]

Ok, maybe I came across a bug then? Or maybe it has something to do with how I'm overriding the base style. I am using the default drop-down list.

The attached screenshot shows the behavior -- note that the drop-down button (the down arrow) is cut off in the Status column, in the first row which is in edit mode.

You'll also see that because that row is moused over, there is an icon showing to the left of the drop-down list. This is the reason that I need to add padding.

Here is the relevant part of the ListGrid definition:

isc.ListGrid.create({
...
		baseStyle: "summaryItem",
		fields: [{
...
		}, {
			name: "status",
			title: "Status",
			canEdit : true,
			icon : "${pencilImgUrl}",
			iconOrientation : "left",
			width: 100
		}, {
...
		getBaseStyle: function (record, rowNum, colNum) {
			var style = this.Super("getBaseStyle", record, rowNum, colNum);
			var fieldName = this.getFieldName(colNum);
			if (fieldName == 'status') {
				style += "-edit";
			}
			return style;
		},
...

and my style is as follows:

.summaryItem-edit,
.summaryItem-editOver,
.summaryItem-editSelected,
.summaryItem-editSelectedOver {
	padding-left: 20px;
}

[Isomorphic]

Ah. We don't automatically compensate for a big shift in padding when going into edit mode, and we wouldn't recommend doing this. Using a FormItemIcon via setEditorType() will still auto-size, provide you an easy to use click handler, and won't shift the value as you start editing (which looks odd).