How to edit a custom DisplayWithIdFor?

Question

I have created a DisplayWithIdFor using the following code and it works showing the information I wish it to.

public static class DisplayWithIDHelper
{
    public static MvcHtmlString DisplayWithIdForApplication<TModel, TValue>(this HtmlHelper<TModel> helper, Expression<Func<TModel, TValue>> expression, string wrapperTag = "div")
    {
        var id = helper.ViewContext.ViewData.TemplateInfo.GetFullHtmlFieldId(ExpressionHelper.GetExpressionText(expression));
        return MvcHtmlString.Create(string.Format("<{0} style=\"color: #003F51; margin-left: 87px;\" class=\"{1}\">{2}</{0}>", wrapperTag, id, helper.DisplayFor(expression)));
    }
}

My problem is simple, when I use the custom helper I end up with the label saying Application and the displayfor holding the name of the application showing with no space between them. see below.

Lastly here is the code for the image above:

<form>
    <fieldset>
        <p>
            @Html.LabelFor(model => model.changeStatus.usersName)
            @Html.DisplayFor(model => model.changeStatus.usersName)
            @Html.HiddenFor(model => model.changeStatus.usersName)
            @Html.ValidationMessageFor(model => model.changeStatus.usersName)
        </p>
        <p style="display: inline; float: left">
            @Html.LabelFor(model => model.changeStatus.application)
            @Html.DisplayWithIdForApplication(model => model.changeStatus.application)
            @Html.HiddenFor(model => model.changeStatus.application)
            @Html.ValidationMessageFor(model => model.changeStatus.application)
        </p>
        <p>
            @Html.LabelFor(model => model.changeStatus.reasons)
            @Html.TextAreaFor(model => model.changeStatus.reasons, new { @cols = "80", @rows = "4", @class = "k-textbox" })
            <span style="color: red;"> @Html.ValidationMessageFor(model => model.changeStatus.reasons)</span>
        </p>

        <!-- Allow form submission with keyboard without duplicating the dialog button -->
        <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
    </fieldset>
</form>

Can anyone explain how to add the spacing between the two Html Helpers?

any additional code can be supplied like the Jquery popup code.

Thank you.

Edit:

Just to make things a little clearer I have to get the application name from the row of a kendo grid that is selected and set the name in the jquery using the following code:

$("div[class='changeStatus_application']").html(applicationName);

Answer 1

To simplify and ensure everything is acting the same, remove the:

style="display: inline; float: left"

from the second paragraph tag and use an element like a span instead of a div (block level element) in your helper.

You may then want to alter the margin left on your DisplayWithIDHelper.

Also try using classes instead of style attributes. You can then change the look of your site through your style sheet without having to recompile plus styles are centralised; easier to maintain.