mercredi 21 janvier 2015

Checkbox/text alignment in a form using CHTML

I have created a form to be used in a mobile GIS product called GeoMedia Smart Client. The backend of this product uses HTML/CSS but up until now I haven't needed to touch this.


I needed to alter the form so that text sat on the right of checkboxes. I was given a cshtml file for this to work. The code is below.


There are some issues but I am no html guru and have struggled to find the solution. Going by the code below are these easily answered? I can't attach images here as I don't have 10 reputation points.



  1. This form has checkboxes followed by text. If the text goes over two lines the second line begins under the checkbox, which looks ugly. I want the first and second line to have the same alignment.


  2. Some checkboxes have a help button on the right but long text clashes with these. Can I avoid these clashes with some sort of wrap?



    @using Intergraph.Emea.Workflows
    @model FormField

    @{
    HtmlFormFieldClassModel classModel = HtmlHelperExtensions.MaxLengthToClassModel(25);

    FormHelp formHelp = Html.GetFormHelp(Model.Name, Model.Name, Model.Label, Model.Help);
    if (formHelp != null)
    {
    classModel.InputHelpClass = FormHelp.GetInputClass(classModel.InputHelpClass);
    }

    string labelValue = Html.Encode(Html.Raw(Model.Label));
    string labelTitle = labelValue;
    }

    @using (Html.BeginFormFieldWrapper(Model.Name, Model.DisplayType))
    {
    <div class="@HtmlHelperExtensions.ClassForWrapper("label")">
    </div>
    using (Html.BeginFormFieldInputWrapper(Model.Name, classModel.InputDivClass))
    {
    using (Html.BeginFormFieldWidgetWrapper())
    {
    <input data-bind="@HtmlHelperExtensions.DataBindModel(Model.Name, "checked"), @HtmlHelperExtensions.DataBindModel(Model.Name, "enable", "editable")"
    type="checkbox"
    id="@Model.Name"
    name="@Model.Name" />

    <label for="@Model.Name" title="@labelTitle">
    <span class="@HtmlHelperExtensions.ClassForWrapper("label-span")">@labelValue</span>
    <span class="@HtmlHelperExtensions.ClassForWrapper("isrequired")" data-bind="@HtmlHelperExtensions.DataBindModel(Model.Name, "visible", "required")">*</span>
    </label>
    }

    if (formHelp != null)
    {
    @Html.EditorFor(m => formHelp, formHelp.Template)
    }
    }
    using (Html.BeginFormFieldActionWrapper("field"))
    {
    @Html.EditorForFormActions(Model.Actions)
    }
    }



Sorry if I didn't explain it clearly enough.





Aucun commentaire:

Enregistrer un commentaire