Xtemplate and html

[shaleen]

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

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

.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;
}

[mitchellsimoens]

The line div has a set height. If you want auto height then you shouldn't set a height.

[shaleen]

.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

[Animal]

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

[shaleen]

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.