Hybrid View

  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    28
    Vote Rating
    0
    conderol is on a distinguished road

      0  

    Default Unanswered: Ext.List remove padding of list items

    Unanswered: Ext.List remove padding of list items


    Hi. My list items are basically tables. But they don't take the whole space in list item.
    bad.JPG

    I tried to do the following.
    Defined the following CSS

    .x-categories .x-list-item-label {
    padding: 0 0.65em 0 0.65em !important; /* top right bottom left*/
    }

    and put the following cls into list definition

    Code:
    config: 
        {  
            cls: 'x-categories',
            itemTpl: '<table border="1" width="100%"  height="100%"><tr>{STATUS}{VISIT_DATE}{SUBMIT_DATE}{COMMENTS}{DELETE_IMG}</tr></table>',
            store: null,
            items:
            [
              {  
                xtype:'toolbar',                                     
                docked:'top',
                baseCls:"accountsCallsToolbar",
                html: '<table border="1" width="100%"  height="100%"><tr><td width="1.5%"><span></span></td><td width="25%" align="left" valign="middle"><span>  '+allLanguages[language]["Status"]+'</span></td><td width="25%"  align="left" valign="middle"><span >'+allLanguages[language]["VisitDate"]+'</span></td><td  width="25%"  align="left" valign="middle"><span>'+allLanguages[language]["SubmitDate"]+'</span></td><td  width="25%"  align="left" valign="middle"><span>'+allLanguages[language]["comments"]+'</span></td><td width="5%"><span></span></td></tr></table>'
                
              }
            ]
                
        }
    but it didn't help. Can someone assist?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,207
    Answers
    3517
    Vote Rating
    856
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Code:
    .x-categories.x-list .x-list-item .x-list-item-label {
        padding: 0 0.65em 0 0.65em !important;
    }
    Any better?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    28
    Vote Rating
    0
    conderol is on a distinguished road

      0  

    Default


    Importunately no

    Still list item is padded in the same way. In fact I see no effect at all after applying this style.
    My boss is going to kill me

    Any other ideas

  4. #4
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    28
    Vote Rating
    0
    conderol is on a distinguished road

      0  

    Default


    I made a little progress
    After examining the elements with Chrome browser I defined the following CSS
    .x-custom .x-list-item-body {
    min-height: 46px;
    padding: 0 0;
    }

    and

    Code:
    cls: 'x-custom',
            itemTpl: '<table  border="1" width="100%"  height="100%"><tr>{STATUS}{VISIT_DATE}{SUBMIT_DATE}{COMMENTS}{DELETE_IMG}</tr></table>',
            store: null,
    The good news that top, left and right padding disappeared, but table didn't occupy the entire parent element (see attached). How do I force it to fill the whole list item?
    bad_padding.JPG

  5. #5
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    28
    Vote Rating
    0
    conderol is on a distinguished road

      0  

    Default


    Any ideas?

  6. #6
    Sencha User
    Join Date
    Sep 2012
    Posts
    65
    Answers
    7
    Vote Rating
    1
    warrean is on a distinguished road

      0  

    Default


    For custom CSS I use the DataView which is much easier to configure.

    JS
    Code:
                {
                    xtype: 'dataview',
                    baseCls: 'projectList'
                  }
    app.scss
    Code:
    projectList-item {
      height: 50px;
      span {
           line-height: 50px;
           color: blue;
       }
     ..
    }

Thread Participants: 2