This is a migrated thread and some comments may be shown as answers.

Label at top

3 Answers 147 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Richard Wilde
Top achievements
Rank 1
Richard Wilde asked on 11 Jul 2012, 07:30 AM
I have the following screen shot of a grid with a popup and cannot figure out how I place the label to the top of the grid rather than at the bottom. See attachment.

My popup has the following editor template:-

var textEditorInitialize = function (container, options) {
    $('<textarea style="width:200px;height:100px;" />')
        .appendTo(container);
};

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 11 Jul 2012, 08:29 AM
Hi Richard,

You can use a vertical-align:top; style for the label's wrapper <div>.

Kind regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Richard Wilde
Top achievements
Rank 1
answered on 11 Jul 2012, 08:44 AM
Yes but where do I put this? The popup is triggered from the grid e.g.

I don't have access to the container label div.

$("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: false,
    height: 400,
    toolbar: ["create"],
    columns: [
        { field: "ReferenceName", title: "Reference Name", width: "120px" },
        { field: "Address", editor: textEditorInitialize },
        { field: "Telephone", title: "Position Held", width: "130px" },
        { command: ["edit", "destroy"], title: " ", width: "190px"}],
    editable: "popup"
});


0
Dimo
Telerik team
answered on 11 Jul 2012, 10:58 AM
Hello Richard,

If you inspect the HTML output of the popup edit form, you will notice that the <div> has the following HTML markup:

<div class="k-edit-label">
    <label for="field-name">field-name</label>
</div>

So you can use a CSS rule, which uses the above CSS class. You can additionally tweak the <div>'s position by using margins or relative positioning.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Richard Wilde
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Richard Wilde
Top achievements
Rank 1
Share this question
or