Changing height of list item in Sencha Touch 2.3

Question

I am trying to make the minimum height of list items in a list equal to 100 px to allow for more space for 2 lines

.x-list .x-list-item 
{
    min-height: 500px; /*exaggeration just to see if it works
    background-color: red;
}

The background red is showing up, however min-height is not affected, apparently because of an !important css value somewhere as I checked on "Inspect Element" in chrome

<div class="x-list-item-first x-list-header-wrap x-list-item-last x-list-footer-wrap x-list-item x-stretched x-list-item-tpl x-list-item-relative" id="ext-simplelistitem-1" style="min-height: 42px !important;"><div class="x-unsized x-list-disclosure" id="ext-component-6"></div><div class="x-innerhtml" id="ext-element-81"><div class="list-item-title">Title = Unsaved feed title</div> <div class="list-item-narrative">Unsaved feed narrative</div>  </div></div>

Not sure how the style="min-height: 42px !importantbit is appearing as it is not from a css-file - checked the folders thoroughly

Answer 1

You can try this:

{
                xtype: 'list',
                itemTpl: '{title}',
                itemHeight: 100,
                data: [
                    {title: 'Item 1'},
                    {title: 'This is just a sample piece of code. Try this. It is fitting well.'},
                    {title: 'Item 3'},
                    {title: 'Item 4'}
                ]
}

You only needed to set itemHeight, this allows you to set the default item height and is used to roughly calculate the amount of items needed to fill the list. By default items are around 50px high.

Defaults to: 42 . That's it. Happy coding. :)

Answer 2

Set min-height to the parent div in your List template:

itemTpl: new Ext.XTemplate(
        '<div style="min-height:100px;">',
        // ... your elements
        '</div>')