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.

     Example:

      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()
            .Content(@<text>
            <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>
                <div id="details-container" class="col-sm-3" style="background-color:lavenderblush;">
                    <div> <strong>A Response Message</strong></div>
                    <div id="myMessageResponse"></div>
                </div>
            </div>
        </div>
    </script>

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 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.

    Regards,
    Alexander Popov
    Telerik
     
    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
Back to Top