Sign in Register
Go to solution
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Kerri Mallinson 113 posts 497 karma points
    Aug 27, 2014 @ 11:20
    Kerri Mallinson
    0

    Custom Markup using placeholders

    Hi,

    I'm using Umbraco 7.1.4, Contour 3.1.21 (trial)

    I'm trying to customise the display for one of my forms, i have removed the 'label for' from the form.cshtml and added a placeholder to the fieldtype cshtml.  It's worked fine for the text field but the text area seems to be adding spaces and carriage return in the field on the page, if i click in the field and delete the spaces the placeholder shows,

    form.cshtml:

    <div class="@f.CssClass" @{if (hidden){<text> style="display: none"</text>}}>

            @* EDITED OUT LABLE@if(!f.HideLabel){<label for="@f.Id" class="fieldLabel">@Html.Raw(f.Caption) @if (f.ShowIndicator){<span class="contourIndicator">@Model.Indicator</span>}</label>}*@

    <div>@Html.Partial(FieldViewResolver.GetFieldView(Model.FormId, f.FieldTypeName, f.Caption), f)

    @if (Model.ShowFieldValidaton){@Html.ValidationMessage(f.Id)}</div>

    @if (!string.IsNullOrEmpty(f.ToolTip)){<small>@f.ToolTip</small>}

    </div> 

    FieldType.Textarea.cshtml:

    @model Umbraco.Forms.Mvc.Models.FieldViewModel

    <textarea name="@Model.Name" id="@Model.Id" placeholder="@Html.Raw(Model.Caption)"

              @{if (Model.Mandatory || Model.Validate) { <text> data-val="true" </text>    }}

              @{if (Model.Mandatory) { <text> data-val-required="@Model.RequiredErrorMessage" </text>    }}

              @{if (Model.Validate) { <text> data-val-regex="@Model.InvalidErrorMessage" data-regex="@Html.Raw(Model.Regex)" </text>    }}>

        @Model.Value

     

    </textarea>

    Thanks

    Copy Link
  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Aug 28, 2014 @ 13:12
    Jan Skovgaard
    0

    Hi Kerri

    Is it possible for you to show a screendump of the issue or link to a page where it can be seen? I think it will make it easier to understand it.

    Also please don't remove the label - Even though you don't want it to be visible you don't wanna remove it! It makes the form inaccessible - a better idea is to hide it using CSS. Use a technique like the below rather than just doing display:none or visibility:hidden since this hides the element from screen readers and crawlers etc.

    label {
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

    /Jan

    Copy Link
  • Michael Lykke 12 posts 75 karma points
    Aug 29, 2014 @ 11:45
    Michael Lykke
    100

    I faced this particular issue (with white spaces in the textarea element on load) as well and figured out that you need to edit the markup for the file FieldType.Textarea.cshtml in the /umbraco/plugins/umbracoContour/Views folder.

    Specifically, you need to make sure that the opening and closing tags are placed on the same line (when you make changes to the file, Visual Studio (2013 in my case) will alter the markup (clean it up)).

    <textarea name="@Model.Name" id="@Model.Id" rows="2" cols="20"
@{if (Model.Mandatory || Model.Validate) { <text> data-val="true" </text> }}
@{if (Model.Mandatory) { <text> data-val-required="@Model.RequiredErrorMessage" </text> }}
@{if (Model.Validate) { <text> data-val-regex="@Model.InvalidErrorMessage" data-regex="@Model.Regex" </text> }}>@Model.Value</textarea>
    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft