[Solved] Label at top

[Richard Wilde]

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);

};

[Dimo]

Hi Richard,

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

Kind regards,
Dimo
the Telerik team

[Richard Wilde]

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"

});

[Dimo]

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