asp:CheckBoxList renders as span and no checkboxes(FF and webkit)

Question

I am using CheckboxList control of the asp.net. it was working fine as expected in past but certainly it started not rendering properly in chrome and firefox browsers. It renders perfectly in Internet Explorer (9 in my case).

It renders in span tag like following

<div class="clearfix">
  <span id="cntMain_chkColumns">Activity IDActivity TItleSubmitted ByActivity DateRequest DateAmountStatusExternal Activity IDCustomer ID</span>
</div>

While the correct and expected rendering (From IE) is as follows

<span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_0" class="ez-hide" name="ctl00$cntMain$chkColumns$0" value="0" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_0">Activity ID</label></span>
<span
class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop">
  <div class="ez-checkbox ez-checked">
    <input id="cntMain_chkColumns_1" class="ez-hide" name="ctl00$cntMain$chkColumns$1" value="1" CHECKED="checked" type="checkbox">
  </div>
  <label for="cntMain_chkColumns_1">Activity TItle</label>
  </span><span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_2" class="ez-hide" name="ctl00$cntMain$chkColumns$2" value="2" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_2">Submitted By</label></span>
  <span
  class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop">
    <div class="ez-checkbox ez-checked">
      <input id="cntMain_chkColumns_3" class="ez-hide" name="ctl00$cntMain$chkColumns$3" value="3" CHECKED="checked" type="checkbox">
    </div>
    <label for="cntMain_chkColumns_3">Activity Date</label>
    </span><span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_4" class="ez-hide" name="ctl00$cntMain$chkColumns$4" value="4" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_4">Request Date</label></span>
    <br><span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_5" class="ez-hide" name="ctl00$cntMain$chkColumns$5" value="5" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_5">Amount</label></span>
    <span
    class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop">
      <div class="ez-checkbox ez-checked">
        <input id="cntMain_chkColumns_6" class="ez-hide" name="ctl00$cntMain$chkColumns$6" value="6" CHECKED="checked" type="checkbox">
      </div>
      <label for="cntMain_chkColumns_6">Status</label>
      </span><span class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop"><div class="ez-checkbox ez-checked"><input id="cntMain_chkColumns_7" class="ez-hide" name="ctl00$cntMain$chkColumns$7" value="7" CHECKED="checked" type="checkbox"></div><label for="cntMain_chkColumns_7">External Activity ID</label></span>
      <span
      class="defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop">
        <div class="ez-checkbox ez-checked">
          <input id="cntMain_chkColumns_8" class="ez-hide" name="ctl00$cntMain$chkColumns$8" value="8" CHECKED="checked" type="checkbox">
        </div>
        <label for="cntMain_chkColumns_8">Customer ID</label>
        </span>
        <br>

**CSS ** Below are the css rules which are supposed to be applied if checkbox renders :(

.defaultP - is a dummy class for calling ezMark plugin.
.drag-box-wp{ border:1px dashed #cccccc; padding:7px; display:inline; float:left; width:100%; margin:0 0 20px 20px; background:#ffffff; max-width: 195px; }

Remaining are the classes for jquery-ui-draggable interaction widget.

Below is my markup

<asp:CheckBoxList ID="chkColumns" runat="server" RepeatDirection="Horizontal" RepeatColumns="5" RepeatLayout="Flow"></asp:CheckBoxList> 

I bind this checkbox list on click of a button the binding code in c# code-behind file goes like below

 DataView dvCustomizableColumns = dtCustomizableColumns.DefaultView;
 dvCustomizableColumns.Sort = "Sequence_ID ASC";
 chkColumns.DataSource = dvCustomizableColumns;
 chkColumns.DataTextField = "ColumnDisplayName";
 chkColumns.DataValueField = "Sequence_ID";
 chkColumns.DataBind();

Later using a function i make these checkboxes draggable and apply some styling on check boxes using ezMark Plugin.

Code :

    private void EnableDraggingOnItems(DataView dvCustomizableColumns)
    {
       for (int i = 0; i < dvCustomizableColumns.Table.Rows.Count; i++)
        {
         if (hdnSelectedColumns.Value != string.Empty)
          {
           if (hdnSelectedColumns.Value.Contains(chkColumns.Items[i].Value))
            {
              chkColumns.Items[i].Selected = true;
            }
          }
         else
          {
            chkColumns.Items[i].Selected = true;
          }


chkColumns.Items[i].Attributes.Add("class", "defaultP checkbox-wp drag-box-wp  ui-draggable ui-droppable makeDragDrop");
        }
    }

i also checked if there is a checkbox webkit style set to none for chrome but it is nowhere in the css.

Please let me know if more information is needed.

Answer 1

Thanks all, who shown interest in my problem. Fortunately i found solution to my question. It turns out that in my master page, there was a jquery starts with selector causing the innerHtml of the checkbox list to be altered.

$("span[id^='cntMain']").each(function () {
                $(this).text($(this).text().toString().toTitleCase());
            });

That's why it renders the labels only. I changed the selector in above code like following

 $("span[id^='cntMain']:not(:has(*))").each(function () {
                $(this).text($(this).text().toString().toTitleCase());
            });

Though this is very specific problem i posted the answer in case someone still find it useful.

I am still wondering why and how it worked in IE.