1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    106
    Answers
    5
    Vote Rating
    5
    lgertel is on a distinguished road

      0  

    Default Answered: Ext.List - CSS issue.

    Answered: Ext.List - CSS issue.


    Hello everyone.

    I'm with an issue that seems simple, but after a lot of tries without success I'm posting here.
    I have one Ext.List, with a specific cls class defined inside of it.

    All that i need is, that for this list and this list only, my height for each row will be pre-defined on my app.scss.

    Here is the code:
    Code:
    Ext.define('abras.view.extra.List', {
    
    
        extend: 'Ext.List',
        xtype: 'extraList',
    
    
        requires: 'Ext.data.Store',
    
    
        config: {
            title: 'Outras Informações',
            cls: 'extra',
    
    
            itemTpl: [ 
                '<div id="extra">',
                '    <div id="extraLogo">',
                   '        <img src="resources/images/{icon}" />',
                '    </div>',
                '    <div id="extraDescription">',
                '        <ul>',
                '            <li><h1>{title}</h1></li>',
                '            <li>{subTitle}</li>',
                '        </ul>',
                '    </div>',
                '</div>'
            ]
            
            
        },
    
    
        initialize: function() {
            this.callParent();
            this.setData(abras.app.extraPages);
        }
    });
    And my SASS:

    Code:
    .extraList .x-list .x-list-item {
        min-height: 6.0em !important;
    }
    
    
    #extra {
        float: left;
        width: 100%;
    }
    
    
    #extraLogo {
        float: left;
        width: 40px;
    
    
        img {
            vertical-align:middle;
            width:32px;
            height:32px;
        }
    }
    
    
    #extraDescription {
        float: left;
    
    
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
    
    
            li {
                font-size: 60%;
                color: #999;
    
    
                h1 {
                    font-size: 120%;
                    color: black;
                    margin: 0;
                    padding: 0;
                }
            }
        }
    }
    I really don't know how to make this work, it seems correct for me.

    Thanks,
    Lucas

  2. Done!

    The property is not x-list!
    x-list is the entire component, i have changed the list-label and now works!

    Code:
    .extra {
        .x-list-item .x-list-item-label {   
            min-height: 6.0em !important;
        }
    }

  3. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    103
    Answers
    5
    Vote Rating
    10
    pepperseb is on a distinguished road

      0  

    Default


    Have you tried


    Code:
    .extra .x-list .x-list-item {   
     min-height: 6.0em !important;
    }
    instead of

    Code:
    .extraList .x-list .x-list-item {    
    min-height: 6.0em !important;
    }
    ?

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    106
    Answers
    5
    Vote Rating
    5
    lgertel is on a distinguished road

      0  

    Default


    I saw the tipo, but still doesn't work:

    Code:
    .extra .x-list .x-list-item {   
        min-height: 6.0em !important;
    }
    
    
    #extra {
        float: left;
        width: 100%;
    }
    
    
    #extraLogo {
        float: left;
        width: 40px;
    
    
        img {
            vertical-align:middle;
            width:32px;
            height:32px;
        }
    }
    
    
    #extraDescription {
        float: left;
    
    
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
    
    
            li {
                font-size: 60%;
                color: #999;
    
    
                h1 {
                    font-size: 120%;
                    color: black;
                    margin: 0;
                    padding: 0;
                }
            }
        }
    }
    Code:
    Ext.define('abras.view.extra.List', {
    
    
    	extend: 'Ext.List',
    	xtype: 'extraList',
    
    
    	requires: 'Ext.data.Store',
    
    
    	config: {
    		title: 'Outras Informações',
    		cls: 'extra',
    
    
    		itemTpl: [ 
    			'<div id="extra">',
    			'	<div id="extraLogo">',
    		   	'		<img src="resources/images/{icon}" />',
    		    '	</div>',
    		    '	<div id="extraDescription">',
    		    '		<ul>',
    		    '			<li><h1>{title}</h1></li>',
    		    '			<li>{subTitle}</li>',
    		    '		</ul>',
    		    '	</div>',
    			'</div>'
    		]
    		
    		
    	},
    
    
    	initialize: function() {
    		this.callParent();
    		this.setData(abras.app.extraPages);
    	}
    });
    I'm getting crazy with this one.
    Thanks!

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    106
    Answers
    5
    Vote Rating
    5
    lgertel is on a distinguished road

      0  

    Default


    The problem is on x-list

    I have changed to
    Code:
    .extra {
        .x-list {
            min-height: 6.0em !important;
        }
    
    
        .x-list-item {   
            min-height: 6.0em !important;
        }
    }
    Now the layout has the right size, but the x-list isn't.
    I can see that on list selection, it only highlight the default height size.

    Any idea?

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    106
    Answers
    5
    Vote Rating
    5
    lgertel is on a distinguished road

      0  

    Default


    Done!

    The property is not x-list!
    x-list is the entire component, i have changed the list-label and now works!

    Code:
    .extra {
        .x-list-item .x-list-item-label {   
            min-height: 6.0em !important;
        }
    }

Thread Participants: 1

Tags for this Thread