1. #1
    Sencha User
    Join Date
    Mar 2012
    Location
    Bangalore, India
    Posts
    139
    Vote Rating
    1
    shaleen is on a distinguished road

      0  

    Default Xtemplate and html

    Xtemplate and html


    Hi all
    I want a reactangular box whose hieght should automatically be adjusted according to the values in value_a_1.
    For ex let say value_a_1 = hello +<br>+welcome+<br>thisandthat;
    so reactangular box should cover three lines.
    The code below covers only one line.
    Plz help
    Code:
    var all = new Ext.XTemplate(
    					'<div class="line">',
    					'<div class="impact">',
    						   '<ul>',
    							  '<li><li>',
    							  '<li>line 1<li>',
    							  '<li><li>',
    						   '</ul>',
    					'</div>', 
    					'<div class="open">',
    						    '<ul>',
    							  '<li>{value1}<li>',
    							  '<li>{value2}<li>',
    							  '<li>{value3}<li>',
    						    '</ul>',
    					'</div>',
    					'<div class="closed">',
    						    '<ul>',
    								'<li>{value_a_1}<li>',
    								'<li>{value_b_1}<li>',
    								'<li>{value_c_1}<li>',
    						    '</ul>',
    					'</div>',
    					'<div class="inprog">',
    						   '<ul>',
    								'<li>{value_a_2}<li>',
    								'<li>{value_a_2}<li>',
    								'<li>{value_a_2}<li>',
    						   '</ul>',
    					'</div>', 
    					'<div class="reassign">',
    						    '<ul>',
    								'<li>{value_a_3}<li>',
    								'<li>{value_a_3}<li>',
    								'<li>{value_a_3}<li>',
    						    '</ul>',
    					'</div>', 
    					'<div class="resolved">',
    							'<ul>',
    								'<li>{value_a_4}<li>',
    								'<li>{value_a_4}<li>',
    								'<li>{value_a_4}<li>',
    						   '</ul>',
    					'</div>',
    					'</div>'
    					);
    The CSS files
    Code:
    .line{
        padding-top: 2px !important;
    	height:24px;
    	background:#cdcdcd;
    	border : 1px solid #657892;
    	border-radius: 10px;
    }
    
    
    .impact{
        float: left;
    	clear:left;
        margin-left: 2%;
    	text-align:center;
    }
    .open {
        float: left;
        margin-left: 15%;
    	text-align:center;
    }
    .closed {
        float: left;
        margin-left: 11%;
    	text-align:center;
    }
    .inprog {
        float: left;
        margin-left: 11%;
    	text-align:center;
    }
    .reassign{
        float: left;
        margin-left: 11%;
    	text-align:center;
    }
    .resolved{
        float: left;
        margin-left: 11%;
    	text-align:center;
    }
    Last edited by mitchellsimoens; 5 Apr 2012 at 8:38 AM. Reason: added [CODE] tags

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,522
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The line div has a set height. If you want auto height then you shouldn't set a height.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Location
    Bangalore, India
    Posts
    139
    Vote Rating
    1
    shaleen is on a distinguished road

      0  

    Default Re

    Re


    .line{
    padding-top: 2px !important;
    height:24px; // removed this line
    background:#cdcdcd;
    border : 1px solid #657892;
    border-radius: 10px;
    }
    I have removed this line as you mentioned but still it not working

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Floated child items will not give the parent "div.line" layout.

    Various styles will cause the it to have layout.

    http://www.satzansatz.de/cssd/onhavinglayout.html

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Location
    Bangalore, India
    Posts
    139
    Vote Rating
    1
    shaleen is on a distinguished road

      0  

    Default


    Is there any other method by which i can put my data in tabular form without using table html tag as i heard that data inside the table tag will get overlapped with each other when we see the output on ipad or iphone.
    Here the purpose of using the float property and list tag is just to give it a tabular stucture.

Thread Participants: 2

Tags for this Thread