1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    82
    Answers
    5
    Vote Rating
    1
    markevans is on a distinguished road

      0  

    Default Answered: List selected item height.

    Answered: List selected item height.


    I'm hoping this is easy and it is just my admittedly backward CSS knowledge that is hindering me.

    I have a list where I want taller items than the default setting. I've added a value for "cls" in the list and have added some code to my 'app.scss' file to adjust the height. The normal item works fine, however the formatting applied to a selected item is using the default height. The element does not have the "cls" class added to it, thus I know how I could change it for all the lists in my app, but how can I change it just for this list? Any help greatly appreciated. Cheers.

    config for my list:
    Code:
    cls: 'gameList'
    css in scss:
    Code:
    .gameList .x-list-item {
       min-height: 84px;
    	background-color: White;
    }
    
    
    .gameList .x-list-header-item {
       min-height: 110px;
    	background-color: White;
    }

  2. Thanks for the advice. I actually tried your first suggestion, but as noted in my original comment, the "cls" class/tag in the list config is not being added to the selected item, so that CSS is not being applied.

    I added the following to my scss file and it seems to work right now:


    Code:
    .x-list .x-list-item .x-list-item-label { 
      min-height: inherit;
    }
    Thanks again for the suggestions. I'll refer back if for some reason this doesn't do it, but so far it looks good.

  3. #2
    Touch Premium Member suzuki1100nz's Avatar
    Join Date
    Apr 2011
    Location
    New Zealand
    Posts
    447
    Answers
    21
    Vote Rating
    62
    suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough suzuki1100nz is a jewel in the rough

      0  

    Default


    Hi,

    I've seen some posted issues around management of list heights with 2.1 - so have a look for these to make sure the aren't going to effect your list height management.
    By default when a list item is selected a css class is added to manage the highlighting of the list item.
    x-item-selected

    You could try to adjust the selected list item height by using this css class.
    e.g.
    Code:
    .gameList .x-list-item .x-item-selected { 
      min-height: 84px;    
      background-color: White;
    }
    You could also get ExtS to do the height management - have a look at the config itemHeight and more importantly the private config itemMap.

    Code:
           /**
             * @cfg {Object} itemMap
             * @private
             */
            itemMap: {
                minimumHeight: 47
            },
    Override the item map config and set it to your preferred height of 84px and see if that achieves what you need.

    If that doesn't work you may have to add an itemTap event listener and set the item height in code.
    Looking at the element inspector for the list example it looks like Sencha is doing this, but I suspect using the itemMap config minimumHeight.

    Let us know how you get on

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    82
    Answers
    5
    Vote Rating
    1
    markevans is on a distinguished road

      0  

    Default


    Thanks for the advice. I actually tried your first suggestion, but as noted in my original comment, the "cls" class/tag in the list config is not being added to the selected item, so that CSS is not being applied.

    I added the following to my scss file and it seems to work right now:


    Code:
    .x-list .x-list-item .x-list-item-label { 
      min-height: inherit;
    }
    Thanks again for the suggestions. I'll refer back if for some reason this doesn't do it, but so far it looks good.

Thread Participants: 1

Tags for this Thread