Results 1 to 2 of 2

Thread: How to set Grid Column Padding ?

  1. #1
    Sencha Premium Member
    Join Date
    Sep 2010
    Location
    MD, USA
    Posts
    10

    Exclamation How to set Grid Column Padding ?

    Hi,

    I configured a Grid panel and need to adjust the Padding for the Column name. I tried the following configurations for the column, but it is not applying/overriding the padding

    Code:
    {
        "header":"Column Name",
        "dataIndex":"column_index",
        "flex":1,"align":"center",
        "height":60,
        "style":{
            "padding-top":"0px"
        }
    }
    
    It still generates the following HTML

    Code:
    <div class="x-column-header-inner" id="ext-gen1368" style="height: 60px; padding-top: 23.5px;">
            <span class="x-column-header-text" id="ext-gen1370">Column Name</span>
            <div class="x-column-header-trigger" id="ext-gen1369">
            </div>
    </div>
    Thanks

  2. #2
    Sencha Premium User
    Join Date
    Jul 2013
    Posts
    15

    Post Use innerCls instead

    Unfortunately the style property is not being transferred to the cell. Instead define yourself a class with the proper padding. Example:
    Code:
    .ua-grid-delete-button-cell {    
                padding:4px 6px 3px 0px;
    }
    Then add that to your column definition:
    Code:
    {
    "header":"Column Name", "dataIndex":"column_index", "flex":1,"align":"center", "height":60, "innerCls":"ua-grid-delete-button-cell"
    } P.S: There is no need to put quotes around JS property names. It is required only in JSON.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •