html can't click on checkboxes - html

Question

This is my html:
<div style="width: 45%; float: left; margin-left:5%">
<div class="chartHeaderClass" style="width: 100%;">
<h3>Service Level Per Campaign</h3>
<%-- Start Dropdown Code --%>
<a id="DropdownSeviceLink" href="#">+</a>
<div ID="campaignDiv" runat="server" ><ul>
</ul>
</div>
<script type="text/javascript" src="Scripts/DropdownCheckbox.js"></script>
<%-- End Dropdown Code --%>
</div>
<div id="line-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
</div>
<div style="width: 45%; float: right">
<div class="chartHeaderClass" style="width: 100%;">
<h3>Calls Per Campaign</h3>
</div>
<div id="pie-chart" class="chart-holder" style="border:1px solid #D5D5D5; margin-top:2px">
<canvas class="overlay" width="479" height="265"></canvas>
</div>
</div>
notice that it has this div campaignDiv which I fill in c# like this:
if (!IsPostBack) {
List<string> comps = getCompainNames();
string html = "<ul>";
for (int i = 0; i < comps.Count(); i++) {
html = html + CreateLiCheckbox(comps[i]);
}
html = html + "</ul>";
campaignDiv.InnerHtml = html;
}
private string CreateLiCheckbox(string checkBoxText)
{
return string.Format("<li><input type=\"checkbox\">{0}</li>", checkBoxText);
}
This result is this:
I can't click on the checkboxes. In other words, when I click on them nothing happens
I noticed something
I can't select the text inside the red area. It seems that it is not exit because when I tried to select it using the mouse, nothing becomes selected.
could u help please?
css for this red area is
#DropdownSeviceLink {
float:right;
margin-right:10px;
}
a#DropdownServiceLink:visited {
color:inherit;
}
#campaignDiv {
background-color:red;
width:200px;
height:200px;
float:right;
position:relative;
}
Finally the context of my page is
when clicking on that plus sign, I want to show this red area, I can do that on jquery, but I just told you the context maybe that helps
jsfiddle
http://jsfiddle.net/jdhMs/

Answer 1

I had this exact same issue in my application and it turned out that the div I had my checkboxes in was being overlapped by the footer of the modal box. Since the footer of the modal box was white/transparent, this wasn't evident until I added a border around the footer. Only then I was able to see that I could see the checkboxes but couldn't actually select them.

Answer 2

I don't know its work or not but try Z-Index.
Example:
#campaignDiv {
Z-Index:100;
}
li{
Z-Index:101;
}