Большой заголовок в jqGrid - PullRequest
       11

Большой заголовок в jqGrid

2 голосов
/ 15 апреля 2011

Я возился с asp.net mvc 3 с новым механизмом просмотра бритвы.

Моя цель состоит в том, чтобы иметь 2 колонки с фиксированной текучей средой и jqGrid в каждой колонке. Мне не повезло, хотя! Как только я добавляю сетку к правому столбцу, его заголовок становится огромным. Я не думаю, что это ошибка jqGrids, потому что, если я удаляю стили, обе сетки отображаются, как и ожидалось.

Я вижу, что css для jqGrid применяет display: block к заголовку как часть класса ui-helper-clearfix.

У кого-нибудь есть какие-либо предложения, чтобы заставить это работать или другие фиксированные флюиды, с которыми я мог поэкспериментировать (я попробовал кучу шаблонов из онлайн без удачи)?

Код из файла шаблона:

 ...       <style type="text/css">           
            #left { float: left; width: 400px;}
            #content { margin-left: 400px;}               
        </style>
</head>
<body>
            <div>
                <div id="left">                
                    @RenderSection("SPTreeGrid")
                </div>
                <div id="content">
                    @RenderSection("ClientPickerGrid")
                </div>                         
           </div>
</body> 

enter image description here

Обновление:

Моя страница фактически должна была отображать 2 сетки фиксированной ширины слева и плавную справа.

Это была проблема с моим css (я до сих пор не знаю, почему), но в итоге я использовал следующую схему, которая работает (рельс - левый столбец):

#container{
overflow:hidden;
padding-left:400px; /* The width of the rail */
}
* html #container{
height:1%; /* So IE plays nice */
}
#content
{   
width:100%;
border-left:400px; /* The width and color of the rail */
margin-left:-400px; 
float:right;
}
#rail{
width:400px;
float:left;
margin-left:-400px;
display:inline; /* So IE plays nice */
}

cshtml:

 <div id="container">
    <div id="content">
        @RenderSection("ReportGrid")
    </div>
    <div id="rail">           
            @RenderSection("SPTreeGrid")           
            @RenderSection("ClientPickerGrid")           
    </div>
</div>

Ответы [ 2 ]

2 голосов
/ 19 ноября 2011

Хотя предложение Олега фиксирует высоту заголовка, оно не является решением - по крайней мере, если вы хотите, чтобы правый div был жидким и расширялся до ширины окна браузера.Проблема в том, что для использования float:left в правом контейнере сетки необходимо указать ширину.Плавающие элементы должны иметь явную ширину, связанную с ними (если нет, они принимают ширину самого широкого элемента внутри них).

Один из обходных путей, который мне помог, состоит в том, чтобы установить высоту плавающего элемента во что-тоsmall (1px) и установите явную высоту для содержимого этого div.

Я создал jsFiddle пример , который иллюстрирует проблему и обходной путь.

1 голос
/ 17 апреля 2011

Вы должны использовать

<div style="float:left">
    <table id="list1"><tr><td/></tr></table>
    <div id="pager1"></div>
</div>
<div style="float:left">
    <table id="list2"><tr><td/></tr></table>
    <div id="pager2"></div>
</div>

в качестве шаблона для сеток.Если это так, это должно быть

<style type="text/css">           
    #left { float: left; }
    #content { float: left; }
</style>

. Не забывайте включать «clear: left» в стиль следующего div, который должен быть после сетки, если вы хотите затормозить плавающее.

Смотрите демонстрацию с двумя сетками здесь

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