2011-01-04 5 views
0

のGoogle Chromeの公式デモは異なる見え alt text私のOmniGridが、これは公式のデモがどのように見えるかである

グリッドの上部にあるボタンはverticalyセンタリングされていません、私の鳥の底にあるページングバーも醜く見えます。

私のコードのhtml:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Insert title here</title> 
<link rel="stylesheet" media="screen" href="style.css" type="text/css" /> 
<link rel="stylesheet" media="screen" href="omnigrid.css" type="text/css" /> 
<style type="text/css"> 
body{font-size:11px} 
.omnigrid div.fbutton .add { 
background:transparent url(images/add.png) no-repeat scroll left center; 
} 
</style> 
<script type="text/javascript" src="mootools-1.2.1.js"></script> 
<script type="text/javascript" src="mootools-1.2-more.js"></script> 
<script type="text/javascript" src="omnigrid.js"></script> 
<script type="text/javascript" src="demo.js"></script> 
</head> 
<body> 
<div style="border:1px solid #cde;padding:25px 25px 25px 25px"> 
<div id="mygrid"></div> 
</div> 
</body> 

私のコードのjavascript:

function onGridSelect(evt) { 
var str = 'row: ' + evt.row + ' indices: ' + evt.indices; 
str += ' id: ' + evt.target.getDataByRow(evt.row).id; 
alert(str); 
} 

function gridButtonClick(button, grid) { 
alert(button); 
} 

var cmu = [ { 
header : "ID", 
dataIndex : 'help_category_id', 
dataType : 'number' 
}, { 
header : "Parent ID", 
dataIndex : 'parent_category_id', 
dataType : 'number', 
width : 50 
}, { 
header : "Name", 
dataIndex : 'name', 
dataType : 'string', 
width : 200 
} ]; 

window.addEvent("load", function() { 

datagrid = new omniGrid('mygrid', { 
    columnModel : cmu, 
    buttons : [ { 
    name : 'Add', 
    bclass : 'add', 
    onclick : gridButtonClick 
    }, { 
    name : 'Delete', 
    bclass : 'delete', 
    onclick : gridButtonClick 
    }, { 
    separator : true 
    }, { 
    name : 'Duplicate', 
    bclass : 'duplicate', 
    onclick : gridButtonClick 
    } ], 
    url : "data.jsp?" + Math.random(), 
    perPageOptions : [ 10, 20, 50, 100, 200 ], 
    perPage : 10, 
    page : 1, 
    pagination : true, 
    serverSort : true, 
    showHeader : true, 
    alternaterows : true, 
    sortHeader : false, 
    resizeColumns : true, 
    multipleSelection : true, 

    // uncomment this if you want accordion behavior for every row 
    /* 
    accordion:true, 
    accordionRenderer:accordionFunction, 
    autoSectionToggle:false, 
    */ 

    width : 600, 
    height : 220 
}); 

datagrid.addEvent('click', onGridSelect); 
$$(".omnigrid .pDiv").each(e,function(){ 
    e.setStyle('font-size','11px'); 
}); 
}); 
+0

にページをズームアウト。 –

答えて

0

それはCSSの行の高さの問題のように見えます。 Chromeのウェブインスペクタ([表示]> [デベロッパー]> [ウェブインスペクタ])を使用して、虫めがねをクリックし、表のヘッダーを選択します。 line-heightプロパティを確認してください。オムニグリッドのデモとはまったく違うのですか?迅速な汚い修正アドオンについては

.omnigrid { 
    line-height: 120% !important; 
} 
0

申し訳ありませんが、みんなが、問題は自分自身によって引き起こされ、私はこれはCSSのエラーではなく、MooToolsのの1のように見えるグーグルクローム

関連する問題