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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi