次の CSS プロパティを持つラッパー DIV があります。
height: auto !important;
margin: 0 auto -125px;
min-height: 100%;
その DIV の中に、他に 2 つの DIV があります。1 つ目は、次の CSS プロパティを使用してページの左側に配置されたメニューです。
float: left;
width: 160px;
メニューの右側にページ コンテンツが表示されます。別のDIVです。そこにコンテンツ (静的テキスト) を入力するだけで問題ありません (つまり、メニューの右側に表示され、画面の残りの部分に広がります)。ただし、Kendo グリッドに入力を許可すると、メニューが上書きされ、(CSS プロパティを使用しない場合) 画面全体を占有し、メニューの下に拡張します (1 行しか含まれていない場合でも)。データの）、または「表示」の設定に応じて、メニューの右側に小さな小さな領域として表示されます。
この DIV は IE で問題なく表示されます (つまり、メニューの右側に表示され、ブラウザーの幅に関係なく、画面の残りのスペースを占有します。ブラウザーのサイズを変更すると、グリッド列もサイズ変更されます)。これを Chrome でも動作させるにはどうすればよいですか?
アップデート：
IE のブラウザ データを削除しましたが、これは IE でも壊れていることがわかりました。
アップデート：
ここにいくつかのコードといくつかのスクリーンショットがあります:
<body>
<div class="wrapper">
<div id="sidebar" class="hidden">
<ul id="sidebarItems">
<li><a href="/Labor/1234" id="navMenuItemLabor">Labor</a></li>
<li><a href="/Sales/1234" id="navMenuItemSales">Sales</a></li>
<li><a href="/Quotes/1234" id="navMenuItemQuotes">Quotes</a></li>
<li><a href="/Price/1234" id="navMenuItemPrice">Price</a></li>
<li><a href="/PurchaseOrder/1234" id="navMenuItemPurchaseOrder">Purchase Order</a></li>
<li><a href="/Catalog/1234" id="navMenuItemCatalog">Catalog</a></li>
</ul>
</div>
<div id="grid"></div>
<script type="text/javascript">
$("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: '/Sales/GetSalesHistory/1234',
dataType: "json",
type: "GET",
data: { id: "1234" }
}
},
pageSize: 15,
schema: {
data: "data",
total: "total"
}
},
columns: [
{ field: "DateString", title: "Date" }
],
pageable: true,
sortable: true
});
</script>
<script type="text/javascript">
// Show the side menu.
$("#sidebar").removeClass("hidden").addClass("visible");
// Highlight menu item for current page.
$("#sidebar a").removeClass("SelectedNavItem").addClass("UnselectedNavItem");
$("#navMenuItemSales").removeClass("UnselectedNavItem").addClass("SelectedNavItem");
</script>
<div class="push"></div>
</div>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript"> </script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$("#topmenu").kendoMenu({
dataSource:
[
{
text: "Home",
url: "/"
},
{
text: "Search",
url: ""
},
{
text: "Admin",
url: ""
}
]
});
$("div.detailsMenuItem").hover(
function ()
{
$(this).addClass("HoverSidebar");
},
function ()
{
$(this).removeClass("HoverSidebar");
}
);
</script>
</body>
</html>
スクリーンショット
どのように見えるべきか (利用可能な画面幅を自動的に広げることを除く) -- この CSS は次のとおりです: Float left, width 500
フロート右、幅 500
ここにあります：フロート左
プロパティを指定しない場合は次のようになります (テキストを少し入力するだけで、グリッドがなくても機能します)。
