css and dynamic div displaying

[mangel.murti]

hi all,

i am working with this site actu..
http://www.hitechinfosoft.com/wfc

i am generating dyanamic div of controls in web page. when you add controls to right side div , controls are not fitting in proper way in step. and in IE it will not displaying good.

any help appreciated

thnx

[diafol]

Want to cost your code?

[mangel.murti]

i am using jquery .

$("div.Container").append("<div   style='margin-left:8px;text-align:left' id='Name"+counter+"' onclick=EnablePropertiesField('lblName','"+counter+"','Name');> "+"<div style='height:50px;width: 555px;'>"+"<span id='lblName"+counter+"'>* Name</span> <br/><input type='text' style='width: 180px' class='Text' required='true' id='txtName"+counter+"' /><span id='errorName"+counter+"' style='color:red'></span> "+"<span style='float:right'><img src='images/remove-ico.gif' alt='Delete' id='imgName"+counter+"' onclick=DeleteNode('Name"+counter+"') class='DeleteClass' /></span>"+"</div></div>\n");      
		++counter;

[diafol]

OK, so if I get you right - this is an example of your js-initiated output (where counter = 1):

<div style='margin-left:8px;text-align:left' id='Name1' onclick=EnablePropertiesField('lblName','1','Name');>
   <div style='height:50px;width: 555px;'>
        <span id='lblName1'>* Name</span><br/>
        <input type='text' style='width: 180px' class='Text' required='true' id='txtName1' /><span id='errorName1' style='color:red'></span><span style='float:right'><img src='images/remove-ico.gif' alt='Delete' id='imgName1' onclick=DeleteNode('Name1') class='DeleteClass' /></span>
    </div>
</div>

I would suggest placing all your style rules into an external css file. You can give the bounding div a classname like "sideElement" or something, so you can hook the rest of the insides to it. You should also enclose your inline js within quotes.

css:

.sideElement{
  margin-left:8px;
  text-align:left;
}
.sideElement div{
  height:50px;
  width: 555px;
}
.sideElement input{
  width: 180px;
}
.sideElement div > span{/* applied to first child span under div*/
 color:red;
}
.sideElement div span + span{ /*applied to 2nd and subsequent span elements inside div element*/
 float:right;
}

markup:

<div class="sideElement" onclick="EnablePropertiesField('lblName','1','Name');">
   <div>
        <span id='lblName1'>* Name</span><br/>
        <input type='text' class='Text' required='true' id='txtName1' /><span id='errorName1'></span><span><img src='images/remove-ico.gif' alt='Delete' id='imgName1' onclick="DeleteNode('Name1');"  /></span>
    </div>
</div>

I apologise if I have deleted a class or something that you rely upon. I assume that you need certain ids for document.getElementById() in js functions. I assume the class="Text" and required="true" is something to do with a client-side validation. If not remove the class and style through the css. Do you need an id for the image?

I've gone through this so you can de-clutter the markup and get to grips with what's causing the problem.

[diafol]

Just another thought, do you really need the inner div - seems excessive?

[mangel.murti]

i am using jquery .

$("div.Container").append("<div   style='margin-left:8px;text-align:left' id='Name"+counter+"' onclick=EnablePropertiesField('lblName','"+counter+"','Name');> "+"<div style='height:50px;width: 555px;'>"+"<span id='lblName"+counter+"'>* Name</span> <br/><input type='text' style='width: 180px' class='Text' required='true' id='txtName"+counter+"' /><span id='errorName"+counter+"' style='color:red'></span> "+"<span style='float:right'><img src='images/remove-ico.gif' alt='Delete' id='imgName"+counter+"' onclick=DeleteNode('Name"+counter+"') class='DeleteClass' /></span>"+"</div></div>\n");      
		++counter;

yes your logic is right for counter.no apologise for that thing.
class="Text" and required="true" , can not remove these as u know that.... i tested with external css file but in IE it is not displaying good more gaps between controls showing in IE

i want it in proper format .....

so can u help me....

[diafol]

looked at your site and your trousers are down on the form create page. All your js is showing. Can't see the offending page as the form creator will not advance beyond the faulty page.