overriding ListGrid.cellPadding for specific column

[gedri]

Hi,

I have a ListGrid with cellPadding set to 20.
I need for a specific column to override\cancel that padding - is there a straight-forward way?

I tried to set the padding at the CSS level instead, thinking I can then set a different CSS rule on the special column - is that a recommended approach?
Unfortunately, that caused some columns to be misplaced inside the grid (specifically, columns with align=right\center are placed too much to the right).

To demonstrate this problem, I used this code, based on the showcase in https://www.smartclient.com/smartcli...id=columnOrder

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryName", title:"Country", align: "right"},
        {name:"capital", title:"Capital", align: "center"},
        {name:"continent", title:"Continent"}
    ],
    canReorderFields: true
})

And I set the following CSS rule (this is just a test to apply left\right padding to all td elements of the grid, in order to show the problem):

.listTable>tbody>tr>td {
    padding-left:  20px;
    padding-right: 20px;
}

The result looks like this:

You can notice that the text in the 'Country' column (which is aligned to the right) is cut and that the text in the 'Capital' column is not properly centered as it should be.

So my questions:
1. Is that a bug, or am I doing something wrong?
2. Is there a different way to achieve what I want (to have a specific column without cell padding)?

Thanks
I am testing this on the latest build on V12.0p

[Isomorphic]

It's easy to override the padding on a particular cell via using getCellCSSText or getCellStyle to just apply different CSS padding, which overrides the cellPadding. However, it's not valid to have asymmetric borders and padding on different cells in the same row or column, and if you try, browser rendering goes haywire in the way you see above.

You haven't indicated what kind of appearance you're trying to achieve, but generally, if you need the look as asymmetric padding, you generally introduce an additional HTML element to add the additional padding.

[gedri]

Thanks, but I'm not sure I follow you completely.

Let's look at the this example:

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryName", title:"Country", align: "right"},
        {name:"member_g8", showTitle:false, type:"boolean", align: "center"},
        {name:"continent", title:"Continent"}
    ],
cellPadding:20
})

I want to get rid of the padding in the checkbox column to have it 'nice & tight' (is that what you call asymmetric padding?)
First I tried adding this:

getCellCSSText: function (record, rowNum, colNum) {
        if (colNum == 1) {
            return "padding-left:0px; padding-right:0px;";
        } 
    }

But this does not have the desired effect, probably because cellPadding attribute is added to the table HTML element and CSS-level padding doesn't override it:



So I tried taking another approach, removing the cellPadding attribute from the grid and setting the padding only using CSS:

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryName", title:"Country", align: "right"},
        {name:"member_g8", showTitle:false, type:"boolean", align: "center"},
        {name:"continent", title:"Continent"}
    ],
//cellPadding:20,
getCellCSSText: function (record, rowNum, colNum) {
        if (colNum == 1) {
            return "padding-left:0px; padding-right:0px;";
        } else {
            return "padding-left:20px; padding-right:20px;";
        }
    }
})

This has the effect I want on the checkbox column (having it 'nice & tight'), but breaks the country column:


I'm a bit lost now... are you saying I need to add another element (a spacer?) to every cell other than the checkbox?

[Isomorphic]

This is not a padding problem. You simply haven't set a width or set autoFit, so default sizing rules are in place.

[gedri]

With cellPadding = 20, setting width =40 on the checkbox column makes the checkbox cut, while still leaving the padding space to its right:

[Isomorphic]

Yes, that’s what you specified, so that’s what you get.

[Isomorphic]

Just to clarify, you've set the column to 40px and you've specified 20px of padding *on each side* (that's what cellPadding means) and then you've got an image in the middle of the cell. There isn't room for all of that.

The browser does make a somewhat odd choice here, prioritizing the right side padding but removing some from the left. But that's the browser, not us, and the browser is just reacting to the invalid configuration you've given it.

[gedri]

Well then, so how can I achieve the desired layout where most columns have padding except one? (in a way that will not break columns that are aligned to right or centered)

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true,
    data: countryData,
    fields:[
        {name:"countryName", title:"Country", align: "right"},
        {name:"member_g8", showTitle:false, type:"boolean", align: "center"},
        {name:"continent", title:"Continent"}
    ],
cellPadding:20
})

I'd really appreciate a simple code sample here since I feel we are going in circles...

Thanks again.

[Isomorphic]

Not following your question - your own code sample above, using getCellCSSText(), achieves different padding for a specific column. It's just that you can't provide ~60px of content to a 40px column and expect that to work. And you also can't leaving the default cellPadding of 2, but then introduce 40px of padding in getCellCSSText(), because columns are sized based on the styling you specify, not on the fly as individual cells are rendered (because obviously that's impossible..).

[gedri]

The problem with my own code sample above, using getCellCSSText(), is that while it achieves different padding for a specific column it is also causing the right-aligned column (country) to be cut on the right side - so how can I overcome that?

[Isomorphic]

As we just said:

And you also can't leaving the default cellPadding of 2, but then introduce 40px of padding in getCellCSSText(), because columns are sized based on the styling you specify, not on the fly as individual cells are rendered (because obviously that's impossible..).

If you want a large padding, set a large padding via either cellPadding or the baseStyle. Don't try to introduce it dynamically via getCellCSSText(), because that cannot be made to work given browser behavior.