How to reduce sencha touch 2 list item height

Question

How to reduce the height of list item in Sencha touch 2? My list showing large numbers of single word name/value pair. As each item taking extra height, list is becoming too long. So i want to reduce each item height to exact content height. I tried using css like this but no luck. Any help?

var tabPanel=Ext.create('Ext.TabPanel', {

fullscreen: true,
    tabBarPosition: 'top',
defaults: {
      styleHtmlContent: true
    },

    items: [
    {
        title: 'DETAILS', 
    xtype: 'list',
        cls: 'myList',
        ....
        itemTpl: '<table><tr><td>{fieldName}</td><td>{fieldValue}</td></tr></table>',
    .............



.myList .x-list-item {
       max-height: 30px;
}

You can also check this related question: http://stackoverflow.com/questions/6194848/how-to-set-row-height-sencha-touch-list — Andrey Rudenko, Dec 03 '12 at 16:39

score 1 · Accepted Answer · answered Sep 01 '12 at 09:26

Each list item has a min-height of 2.6em. So, you can reduce that and add a overflow property. Use this:

.my-list .x-list-item .x-list-item-label{
     min-height: 0.8em !important;
     overflow : auto;
}

And it is not a good practice to use Html tables inside itemTpl. Use plain DIV elements with -webkit-box CSS3 property.

score 0 · Answer 2 · answered Dec 27 '12 at 06:54

You can use itemHeight config of list. http://docs.sencha.com/touch/2-1/#!/api/Ext.dataview.List-cfg-itemHeight

in addition to that you can also use CSS like this to control padding:

.my-list .x-list-item  .x-list-item-body{
     min-height: 0.5em !important;
     padding-top: 0.3em;
     padding-bottom: 0.3em;
}

score 0 · Answer 3 · edited Apr 23 '14 at 08:32

0

use a property called as

itemHeight: [*Height of the item you need*],

i.e

itemHeight: 40

Read it from the Component's JS file

edited Apr 23 '14 at 08:32

Code Lღver

15,573
16
56
75

answered Apr 23 '14 at 08:14

Kaps

1

How to reduce sencha touch 2 list item height

3 Answers3