[BUG?] Invalid markup for checkboxes in XForms for MVC

Member since: 2010

Hi, guys, do you have the same rendering for checkboxes for XForm in EPi 7?

<label title="Do you like the new site">
        
        <label>
            <input type="radio" value="Wunderschoen" name="DoYouLikeNewSite" id="DoYouLikeNewSiteWunderschoen!">
            Wunderschoen!
        </label>
        
        <label>
            <input type="radio" value="Soso" name="DoYouLikeNewSite" id="DoYouLikeNewSiteSo so">
            So so
        </label>
        
        <label>
            <input type="radio" value="Ganz schlecth" name="DoYouLikeNewSite" id="DoYouLikeNewSiteGanz schlecht">
            Ganz schlecht
        </label>
        
    </label>

    

There are nested labels inside labels and in FF, for example, you can't change the checkbox value, unless you double click on the other choice! For a college of mine, in Chrome, if you click on the checkbox, all three of them are selected at the same time. This is due to the invalid markup, it depends on the browser behavior.

The same thing doesn't happen in EPi6, nor does in EPi7 for WebForms.

Is there perhaps something I can do to fix this, change EPiServer installation files?

 

#65108 Jan 21, 2013 11:41
  • Member since: 2010

    Don't mind the strange id-s, I have tried it with simple id-s, names and values, the rendering is the same - labels inside label.

    #65109 Jan 21, 2013 11:44
  • Member since: 2005

    Hi

    Yes, that is a bug, and it should be fixed for the next release.

    You can update the html by adding custom editor templates for the different xform segments. The default ones can be found at "{Program Files}\EPiServer\CMS\{versionId}\Application\Util\Views\Shared\EditorTemplates".

    My suggestion is that you copy the ones you want to change to {siteRoot}\Views\Shared\EditorTemplates, and make your changes there. The views in the site folder should have priority over the ones in Program Files.

    Regards

    Per Gunsarfs

    #65116 Jan 21, 2013 14:41
  • Member since: 2010

    It appears I have marked this as resolved too soon.

    Is there anything else I should do besides placing the view inside Views\Shared\EditorTemplates?

    I have tried just c/p of Select1AsRadiobuttonFragment.ascx, rewriting it to Select1AsRadiobuttonFragment.cshtml (as I am using  MVC). I have tried adding a controller and also I have deleted the ascx from EPiServer files.

    #65118 Jan 21, 2013 15:33
  • Member since: 2005

    Hmm, thought you could just drop a view in the site and it should have precedence. What happens if you do changes directly in the system files? Can you see those changes on the site?

    Just a side note, Select1AsRadiobuttonFragment.ascx is an MVC view, just not a Razor view. But you are of course free to write your views for either view engine.

    #65119 Jan 21, 2013 15:47
  • Member since: 2010

    Haha, yes, sorry about that, I am starting to put equal between MVC and Razor :D

    When I change them directly, I see the changes. Perhaps I can tell the rest of the team to change this and we can wait for the update. When is it expected, do you know?

    #65120 Jan 21, 2013 15:50
  • Member since: 2005

    If that works for you, go for it. Just make a note to check it when upgrading.

    Sorry, can't say when the fix will make it's way into a release. Firstly, I don't know. Secondly, if I say something that's not true my boss will come by and hit me with a stick (and hopefully just a virutal one).

    #65122 Jan 21, 2013 16:55
  • Member since: 2010
    #65124 Removed, Jan 21, 2013 17:02
  • Member since: 2010

    Haha, let's hold our fingers crossed for a small stick :D

    Is there a possibility that we get the exact markup prior to the release?

    I have realized that we can't go on with GUI tasks, if we don't know how the markup will look like. Will you just revert it to EPi 6 looks?

    Thank you in advance for this info.

    #65125 Jan 21, 2013 17:02
  • Member since: 2005

    Sure. You can see the updated code for Select1AsRadiobuttonFragment.ascx below. The SelectFragment.ascx was changed in the same way, i.e. the wrapping tag was changed to a div, and the for attribute was set on the other label(s).

    <%@ Import Namespace="EPiServer.XForms.Parsing" %>
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Select1Fragment>" %>
    <fieldset class="<%: Model.Class %> orientation<%: Model.Orientation %>">
        <legend>
            <%: Model.Label %>
        </legend>
        <div title="<%: Model.Title %>">
            <% foreach (SelectOption selectoption in Model.Options)
               { %>
    
            <label for="<%: selectoption.Id %>">
                <%: Html.RadioButton(Model.Reference, Server.HtmlDecode(selectoption.Value) ?? string.Empty, selectoption.SelectedItem, new { id = selectoption.Id })%>
                <%: Html.Raw(selectoption.Text) %>
            </label>
            <% } %>
            <%: Html.ValidationMessage(Model.Reference)%>
        </div>
    </fieldset>

        

    #65127 Edited, Jan 21, 2013 17:19