Bug in Internet Explorer 8 prevents "label for" on secondary radio buttons
Found an interesting bug (and solution) that I'd love to share with you today.
Having a razor view produce output similar to the below:
... a colleague of mine testing the web app found, that the second label (ParentCollection_0__ChildCollection_1__2) did not cause the corresponding radio button to be checked. Trying the same view in Chrome and Firefox worked flawlessly, however. It turned out, that somehow, Internet Explorer found the ID-field too long, causing it to ignore it (go figure). Anyway, the problem was solved with shortening the ID as such:
Then, I simply use the generated Id as the id of my radio button and as the target of my label (like before):
And behold! The mark-up works, even in IE 8 ;-)
Having a razor view produce output similar to the below:
<input type="radio" id="ParentCollection_0__ChildCollection_1__1" .../><label for="ParentCollection_0__ChildCollection_1__1">...</label>
<input type="radio" id="ParentCollection_0__ChildCollection_1__2" .../>
<label for="ParentCollection_0__ChildCollection_1__2">...</label>
... a colleague of mine testing the web app found, that the second label (ParentCollection_0__ChildCollection_1__2) did not cause the corresponding radio button to be checked. Trying the same view in Chrome and Firefox worked flawlessly, however. It turned out, that somehow, Internet Explorer found the ID-field too long, causing it to ignore it (go figure). Anyway, the problem was solved with shortening the ID as such:
Dim radioId = ViewData.TemplateInfo.GetFullHtmlFieldId(valueCounter)
' Bug i IE8 won't let your label hit, if its target ID is too longradioId = radioId. Replace("ParentCollection_", "p"). Replace("__ChildCollection_", "c")
Then, I simply use the generated Id as the id of my radio button and as the target of my label (like before):
Dim attributes = New Dictionary(Of String, Object) From {{"id", radioId}}...@Html.RadioButtonFor(Function(Model) Model.Response, radioValue, attributes)<label for="@radioId">...</label>
And behold! The mark-up works, even in IE 8 ;-)
Comments