Prevent TextArea label from rendering

[Chris]

I have a form split into sections, and within one of the sections I have a TextArea, which I want to render as the full width of the form - even when I suppress the label text, the container and spacing is still rendered and so I lose a chunk of space to the left of the text area (horizantal form layout)

My form code :

@(
Html.Kendo().Form<Customer>()
        .Name("detailForm")
        .HtmlAttributes(new { action = @Url.Action("EditCustomer", "Customer"), method = "POST" })
        .Orientation("horizontal")
        .Items(items =>
        {
            items.AddGroup()
            .Label("Information")
            .Layout("grid")
            .Grid(g => g.Cols(2).Gutter(10))
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.CompanyName)
                        .Label(l => l.Text("Company Name:").Optional(false));
                    i.Add()
                        .Field(f => f.CustomerStatusId)
                        .Label(l => l.Text("Status:").Optional(false))
                        .Editor(e =>
                        {
                            e.DropDownList()
                                .HtmlAttributes(new { })
                                .DataTextField("KeyDescription")
                                .DataValueField("KeyValue")
                                .HtmlAttributes(new { style = "width:100%" })
                                .Size(ComponentSize.Small)
                                .FillMode(FillMode.Outline)
                                .DataSource(source =>
                                {
                                    source.Read(read =>
                                    {
                                        read.Action("LookupValues", "Lookup", new { type = "CustomerStatus" });
                                    })
                                    .ServerFiltering(true);
                                });
                        });
                });
            items.AddGroup()
            .Label("Description")
                .Items(i =>
                {
                    i.Add()
                        .Field(f => f.Description)                        
                        .Label(l => l.Text(" "))
                        .Editor(e =>
                        {
                            e.TextArea()
                                .Size(ComponentSize.Small)
                                .Overflow(TextAreaOverflow.Scroll)
                                .Rows(8);
                        });
                });

        })
        )

I have tried using the EditorTemplateHandler but that still seems to render the label section?

Thanks

 

 

 

[Ivaylo]

Hello Chris,

Thank you for the provided code. I made a demo app to see why the Text Area is not rendering as the full width of the form. Actually, when I started the app and opened the form, I found that, by default, when the form orientation is set to horizontal, the labels have width set to 25%. And this is why there is spacing that is rendered to the left of the Text Area. I came up with a solution for this problem. You can alter the CSS of the label and the Text Area. Here I will give you the code I used for solving this problem.

<style>
    #Description-form-label {
        display: none;
    }

    .k-form-horizontal .k-form-field-wrap {
        max-width: 100%;
    }

</style>

This way, I am hiding the label, and I am setting the max width of the text area to 100%. 

Regards,
Ivaylo
Progress Telerik

[Chris]

Perfect - thanks that has worked