Results 1 to 5 of 5

Thread: Grid header and ellipsis issue

  1. #1
    Sencha User
    Join Date
    Dec 2013
    Posts
    7

    Default Grid header and ellipsis issue

    Hi, To achieve ellipsis in the grid header, i have used <div> tag in the below Panel code. And ellipsis is appearing as expected. But if i click on that grid header, and checked the Columns submenu, it is displaying differently. Pls find the screenshot attached. Kindly help me to solve this issue. If i replace x-lbl-H2 with x-column-header-text, ellipsis is not appearing.

    .x-lbl-H2 {
    font-size: 11px !important;
    font-weight: bold !important;
    font-family: Arial, Verdana, sans-serif !important;
    color: #1a6f99 !important;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap !important;
    cursor: auto;
    text-overflow: ellipsis;
    overflow: hidden;
    }

    columnsConfig.push({
    dataIndex: header.dataIndex,
    flex: 1,
    hideable: true,
    cls:'x-lbl-H2',
    tooltip : header.text,
    //text: header.text,
    text: '<div style="overflow:hidden;text-overflow: ellipsis">' + header.text+'</div>',
    }

    me.columns = columnsConfig;

  2. #2
    Sencha User
    Join Date
    Dec 2013
    Posts
    7

    Default Screenshot attached

    Screenshot attached
    Attached Images Attached Images

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    You will need to post a working example before anyone can assist you. Feel free to use our fiddle:
    https://fiddle.sencha.com/#home

  4. #4
    Sencha User
    Join Date
    Dec 2013
    Posts
    7

    Default Fiddle url

    Hi,
    Pls find the fiddle.
    https://fiddle.sencha.com/#fiddle/2hg

    In this I need ellipsis for the Grid header.

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    You should be able to update this with display: block

    Code:
    .x-column-header-text { 
      display : block; 
      overflow : hidden; 
      text-overflow : ellipsis; 
    }

Posting Permissions

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