Ext.List remove padding of list items

[conderol]

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

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?

[mitchellsimoens]

.x-categories.x-list .x-list-item .x-list-item-label {
    padding: 0 0.65em 0 0.65em !important;
}

Any better?

[conderol]

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

[conderol]

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

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

[conderol]

Any ideas?

[warrean]

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

JS

            {
                xtype: 'dataview',
                baseCls: 'projectList'
              }

app.scss

projectList-item {
  height: 50px;
  span {
       line-height: 50px;
       color: blue;
   }
 ..
}

[conderol]

This will require from me to rewrite a lot of code , when the only thing I am looking for is proper CSS class to change

[mitchellsimoens]

This will require from me to rewrite a lot of code , when the only thing I am looking for is proper CSS class to change

When posting a question, please provide what version. There is a DOM difference between ST 2.0 and ST 2.1 for the List.

Your question can easily be found by inspecting the DOM, finding the element that has a padding and seeing what classes is being used to have the padding. Give it a try, right-click on the list, click on inspect element and start looking at the elements to find that padding.

[warrean]

This will require from me to rewrite a lot of code , when the only thing I am looking for is proper CSS class to change

Are you sure, because List extends DataView.

..and start looking at the elements to find that padding.

in 2.1, I find this for a List rather difficult, and so far I haven't managed to fully customize as I've done with a DataView. Even looking at the TouchTweets-example didn't resolve everything, if I remember correctly they didn't change the padding either.