CODEWITHSUNDEEP
jquerycssasp.net-mvckendo-uikendo-asp.net-mvc
Gyuzal
Gyuzal

Reputation: 1591

Kendo window: prevent adjusting content to the window size

I'd appreciate any advice.

I have a kendo window:

@(Html.Kendo().Window()
.Name("detailsWindow")
.Title("..")
.Content("...")
.Draggable()
.Visible(false)
.Width(1350)
.Height(450)
.Resizable(r =>r.Enabled(true))    
)

And I open it with the handler:

<script>
    function Documents_Change(e)
    {
        var selected = this.select()[0],
          item = this.dataItem(selected);

        var window = $("#detailsWindow");

        window.load("@Url.Action("Details", "CustomEntry")" + "?gtdNo=" + item.ID);

        window.data("kendoWindow").center().open();
    }
</script>

When I try to resize the window, my content adjusts its size to the window. I want to prevent this, it should have scrollbars instead.

Thanks!

Upvotes: 0

Views: 4272

Answers (1)

OnaBai
OnaBai

Reputation: 40917

You should set a width to the top element of you window (that is not the window itself) and for this element set the desired width and overflow-x set to hidden.

Example: Given the following HTML

<div id="window">
    <div id="top-inner">
        <p> Content of the window</p>
        ...
    </div>
</div>

You should define the following CSS style:

#top-inner : {
    width: 550px;
    overflow-x: hidden;
}

See the following code snippet (despite it is in JavaScript it gives you the idea).

$(document).ready(function() {
  $("#window").kendoWindow({
    width: "450px",
    title: "About Alvar Aalto"
  });
});
html {
  font-size: 12px; 
  font-family: Arial, Helvetica, sans-serif; 
}

#top-inner {
  width: 400px;
  overflow-x: hidden;
}
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>

<div id="window">
  <div id="top-inner">
    <p>Alvar Aalto is one of the greatest names in modern architecture and design. Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, fluid organic shapes that let the end user decide the use. Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection that remains true to his original design.</p>

    <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>

    <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, and a member of the Congres Internationaux d'Architecture Moderne. Major architectural works include the Finlandia Hall in Helsinki, Finland, and the campus of Helsinki University of Technology.</p>

    <p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
  </div>
</div>

Upvotes: 1

Related Questions