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.
Attachment 40967

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?

Code:

---

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

---

Any better?

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:-/

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?
Attachment 41026

Any ideas?

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;
  }
 ..
}

---

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

Quote:

---

Originally Posted by 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

---

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.

Quote:

---

Originally Posted by 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

---

Are you sure, because List extends DataView.

Quote:

---

Originally Posted by mitchellsimoens

..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.