When using an ASP.NET CheckBox (and in out case, inherited from a CheckBox) it renders a span around the checkbox input control, this span control is affecting jQuery scripts.
Is it possible to remove this span when rendering?
When using an ASP.NET CheckBox (and in out case, inherited from a CheckBox) it renders a span around the checkbox input control, this span control is affecting jQuery scripts.
Is it possible to remove this span when rendering?
I just tried this on a test page and I'm not getting the around my CheckBox controls... are you sure it's the CheckBox that's rendering this? Is it conditional?
UPDATE: OK, it appears to be conditional on whether or not the CheckBox has extra attributes, including a CssClass setting... or a "disabled" attribute.
You can use the input/checkbox control directly if you don't need a label, or can put one yourself:
<input type="checkbox" id="CheckBox1" runat="server" />
<label for="CheckBox1">My Label</label>
A CSS Adapter may be able to remove the span around the checkbox/label, but I haven't seen one for that purpose.
Can you use a literal control instead? There's a big difference between these two alternatives:
<p>12345<asp:Label ID="lblMiddle" runat="server" Text="6"></asp:Label>7890</p>
<p>12345<asp:Literal ID="ltlMiddle" runat="server" Text="6"></asp:Literal>7890</p>
i wonder, is there a reason no1 mentioned this:
public MyControl() : base(string.Empty)
i got this reading http://aspnetresources.com/blog/stripping_span_from_webcontrol that flaviotsf mentioned
I just had this issue and used Jon's answer, which is good and it works. The downside is that your class is defined within the codebehind and not your markup.
So I took the answer and made a progamatic way to retrieve all attributes for the control, copy them to InputAttributes and remove those copied attributes from attributes.
Note that while this extends from RadioButton, you could use the method to extend any control, such as labels or checkboxes.
using System.Web.UI;
using System.Web.UI.WebControls;
namespace Hidistro.UI.Common.Controls
{
/// <summary>
/// Just like a normal RadioButton, except that the wrapped span is disabled.
/// </summary>
public class CleanRadioButton : RadioButton
{
protected override void Render(HtmlTextWriter writer)
{
List<string> keysToRemove = new List<string>();
foreach (object key in Attributes.Keys)
{
string keyString = (string)key;
InputAttributes.Add(keyString, Attributes[keyString]);
keysToRemove.Add(keyString);
}
foreach (string key in keysToRemove)
Attributes.Remove(key);
base.Render(writer);
}
}
}
This way, all you need to do is the following, and it will output tags without the span.
<namespace:CleanRadioButton class="class1" />
<namespace:CleanRadioButton class="class2" />
HTML output: (note that "generated" is autogenerated)
<input id="generated" type="radio" name="generated" value="generated" class="class1">
<input id="generated" type="radio" name="generated" value="generated" class="class2">