Question

I’m creating a table from code behind file & putting on a placeholder.

//On Main.aspx

MyControl control1 = (MyControl)Page.LoadControl("MyControl.ascx");
control1.ID = "ctl1";
MyControl control2 = (MyControl)Page.LoadControl("MyControl.ascx");
control2.ID = "ctl2";
MyControl control3 = (MyControl)Page.LoadControl("MyControl.ascx");
control3.ID = "ctl3";
MyControl control4 = (MyControl)Page.LoadControl("MyControl.ascx");
control4.ID = "ctl4";

Table table = new Table();

TableCell cell1 = new TableCell();
TableCell cell2 = new TableCell();
TableCell cell3 = new TableCell();
TableCell cell4 = new TableCell();
TableRow row1 = new TableRow();
table.Style.Add(HtmlTextWriterStyle.Position, "absolute");

cell1.Controls.Add(control1);
row1.Cells.Add(cell1);
cell1.Style.Add(HtmlTextWriterStyle.Position, "absolute");
cell2.Controls.Add(control2);
row1.Cells.Add(cell2);
cell2.Style.Add(HtmlTextWriterStyle.Position, "absolute");
cell3.Controls.Add(control3);
row1.Cells.Add(cell3);
cell3.Style.Add(HtmlTextWriterStyle.Position, "absolute");
cell4.Controls.Add(control4);
row1.Cells.Add(cell4);
cell4.Style.Add(HtmlTextWriterStyle.Position, "absolute");

table.Rows.Add(row1);
placeHolder1.Controls.Add(table);

//On MyControl.ascx (Here I’m placing control; which is created with javascript)

<table cellpadding="0" cellspacing="0" border="0" width="217px" 
    style="position:relative" >
<tr>
    <td >
    <div id="c1" class="gauge" style="margin:0;padding:0;height:169px;width:217px;">   
    </div>
    </td>
</tr>

// In CSS of user control

div.gauge
{
    background-repeat: no-repeat;
    background-position: top center;
    height: 169px;
    margin: 0px;
    overflow: visible;
    position: absolute;
    width: 217px;
    z-index: 0;
}

But I see only first control gets loaded, others not. Anything missing?

Answer 1

That’s horrible repeating code, before I even continue reading, let’s clean it up.

// Initializing parents at the top.
Table table = new Table();
table.Style.Add(HtmlTextWriterStyle.Position, "absolute");

TableRow row = new TableRow();

// For loop, you could turn this in a foreach to load controls based on an array.
for (int i = 1; i <= 4; ++i)
{
    MyControl control = (MyControl) Page.LoadControl("MyControl.ascx");
    control.ID = "ctl" + i.toString();

    TableCell cell = new TableCell();
    cell.Controls.Add(control);
    cell.Style.Add(HtmlTextWriterStyle.Position, "absolute");
    row.Cells.Add(cell)
}

table.Rows.Add(row);
placeHolder.Controls.Add(table);

Much cleaner to read, much easier to spot mistakes. It’s however not the right place to spot mistakes as you’re talking about not seeing four buttons, so you’ll have to inspect the HTML closer. Using proper web developing tools you can hover the element in the DOM tree and you’ll see they are positioned on top of each other.

And using the improved code above, it’s easy to offset them, just use i for that… 🙂

---

div.gauge
{
    background-repeat: no-repeat;
    background-position: top center;
    height: 169px;
    margin: 0px;
    overflow: visible;
    position: absolute;
    width: 217px;
    z-index: 0;
}

Do you really need all of those attributes?

You specify position: absolute but aren’t actually positioning the element? Does the overflow: visible make sense? What’s up with z-index: 0, why specify that?