Label at top

4 posts, 0 answers
  1. Richard Wilde
    Richard  Wilde avatar
    14 posts
    Member since:
    Jul 2009

    Posted 11 Jul 2012 Link to this post

    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);
    };
  2. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 11 Jul 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Richard Wilde
    Richard  Wilde avatar
    14 posts
    Member since:
    Jul 2009

    Posted 11 Jul 2012 Link to this post

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


  5. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 11 Jul 2012 Link to this post

    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!
Back to Top
Kendo UI is VS 2017 Ready