Используя расширения Telerik MVC, управление сеткой, почему вертикальная и / или горизонтальная прокрутка не появляется при изменении размера окна?

Question

Hy,

В своем приложении я использую расширения Telerik для управления сеткой MVC:

Telerik Grid

Кто-нибудь знает, почему при изменении размера окна (в любом браузере) вертикальная или горизонтальная прокрутка не появляется?

Я устанавливаю ширину и высоту сетки на 100%.

 @(Html.Telerik().Grid<MyViewModel>()
      .Name("MyGrid")
      .HtmlAttributes(new { style = "display:table; width:100%; height: 100%;" })
...)

Я пытался даже поместить сетку в div с шириной и высотой 100% ... все еще нет прокрутки при изменении размера окна.

Заранее спасибо,

Джефф.

Answer 1

Вы ищете полосы прокрутки во всем окне или только в таблице?

Я получил полосы прокрутки на сетке, когда я добавил div вокруг сетки, установил высоту 100px и установил переполнение на auto:

<div style="height: 100px; overflow:auto;">
    @(Html.Telerik().Grid<MyViewModel>()
      .Name("MyGrid")
    ...)
</div>

Это не похоже на проблему с сеткой, но с вашим HTML. Добавьте еще немного кода и больше подробностей о том, чего вы пытаетесь достичь.

Answer 2

Установить конкретную ширину, которая будет запускать полосу прокрутки.Пример;

.Scrollable (scr => scr.Height (430))

Надеюсь, это поможет!

Answer 3

Для вертикальной прокрутки мы можем использовать следующее, а для горизонтальной прокрутки просто используйте div

<div class="DataGridXScroll">

@(Html.Telerik().Grid(listCustomerStatus)
                .Name("grvSalesAdjustment")
                .DataKeys(keys => keys.Add(k => k.CustCode))
                .Columns(column =>
                {

                })
               .Selectable()
               .Pageable(page => page.PageSize(100))
               .Scrollable(scroll => scroll.Height(300))
)
 </div>

добавить следующее CSS

.DataGridXScroll
{
    width: 1000px;   
    overflow-x: scroll;
    text-align:left;
}

Это работа в Firefox и других браузерах. Для IE просто используйте следующее CSS

.t-grid
{
   position: static;
   overflow:hidden;
}

.t-grid-content
{
   overflow-x: hidden;
   position:static; 
   width:100%;  
}

.t-grid-header-wrap
{
   position:static;    
}

.t-grid-content
{
   overflow-x: hidden;    
}

.t-grid-footer-wrap
{
  position:static;
}

Answer 4

Я нашел решение. Каким-то образом стиль страницы был «переполнен: скрыт»; после установки 'auto' все свитки есть.