2 Column Layout of Template

2 posts, 0 answers
  1. Jim
    Jim avatar
    1 posts
    Member since:
    Jun 2014

    Posted 09 Jun 2015 Link to this post

    Is it possible to layout a template to display my data in 2 columns?


    I am using a Kendo window with a Kendo template (similar to the online examples)


    No matter what I try I am getting the 2 columns to stack on top of each other.


      I am message

      I am message response

    Where I want to see

    I am message     I am message response


     Currently I have the following:

        @(Html.Kendo().Window().Name("MessageModal").Title("View Message").Visible(false).Modal(true).Draggable(true).Width(1200).Resizable()
            <script type="text/x-kendo-template" id="messageTemplate">
        <div class="container-fluid">
            <div class="row">
                <div id="details-container" class="col-sm-6" style="background-color:lavender;">
                        <div><strong>A Message</strong> </div>*@
                    <div id="myMessage"></div>
                <div id="details-container" class="col-sm-3" style="background-color:lavenderblush;">
                    <div> <strong>A Response Message</strong></div>
                    <div id="myMessageResponse"></div>

  2. Alexander Popov
    Alexander Popov avatar
    1411 posts

    Posted 11 Jun 2015 Link to this post

    Hi Jim,

    You would need some CSS rules to take care of the containers' positioning. I would suggest checking if the Bootstrap CSS and JavaScript files are properly included in the page, as I noticed that Bootstrap classes are already present in the template's content.

    Alexander Popov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top