# Hidden Containers

If you initialize a Grid inside a hidden container, the Grid may not adjust its layout correctly.

## Understanding Why the Issue Occurs

When you apply scrolling, virtual scrolling, or locked columns and initialize the Grid in a hidden container, the vertical layout can break. The JavaScript size calculations do not work for elements that use `display:none`. For more information about Grid scrolling, see [available scroll modes of the Grid HtmlHelper for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/scrolling/overview).

## Identifying Symptoms

You can identify that the Grid is initialized in a hidden state if any of the following symptoms occur:

* The Grid appears smaller than expected.
* The scrollable data area overflows the bottom border of the Grid.
* The vertical scrollbar is not visible even though [virtual scrolling](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/scrolling/virtual) is enabled.
* Frozen columns are too narrow and non-frozen columns are not visible.
* The pager may not appear or may be the smallest responsive pager instead of the full one.

## Applying Recommended Approaches

To handle the behavior that is related to the initialization of the Grid inside a hidden container, use any of the following approaches:

* Delay the initialization of the Grid or change the order in which various Kendo UI widgets are initialized, so that the Grid is initialized after its element becomes visible.

* Execute the Kendo UI for jQuery [`resize()`](https://docs.telerik.com/kendo-ui/api/kendo/methods/resize) method after the Grid becomes visible.

* Instead of setting an overall height for the Grid in its configuration, define the height for the scrollable data area only. In this case, no height calculations are made.

  > note This approach applies only when frozen columns and virtual scrolling are not enabled.

  ```css
    #GridID .k-grid-content
    {
        height: 270px;
    }
  ```

* Fetch the data source instead of calling the `resize()` method.

  > note This approach applies when virtual scrolling is enabled and the Kendo UI version is earlier than 2014.3.1119.

  ```js
  $("#GridID").data("kendoGrid").dataSource.fetch();
  ```

## See Also

* [Initializing the Grid HtmlHelper for ASP.NET MVC in a TabStrip component](https://www.telerik.com/aspnet-mvc/documentation/knowledge-base/grid-initialize-in-tabstrip)
* [Scrolling by the Grid HtmlHelper for ASP.NET MVC (Demos)](https://demos.telerik.com/aspnet-mvc/grid/virtualization-remote-data)
* [Scroll Modes of the Grid HtmlHelper for ASP.NET MVC](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/scrolling/overview)
* [Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/grid)