2012-03-14 6 views
0

ユーザーがビューを「最大化」したときにサイズを変更しているTelerikグリッドがあります。トリガーされます機能は以下の通りです:Jquery、IE8、クラスセレクタ

//Happens whenever the window is resized 
    function sizeContent() { 
     var newHeight = $(window).height() - 191; 
     var calcHeight = newHeight + "px !Important"; 
     $("div.Gridfullscreen").css("height", calcHeight); 
    } 

    //Happens when a user goes into 'full screen' mode by clicking a button function 
    toggleFullScreen() { 

    $('div.grid').toggleClass('fullscreen') 

    //Height reset (just in case we are toggling back) 
    $('div.t-grid-content').css("height", "400px !Important") 
    $('div.t-grid-content').toggleClass('Gridfullscreen') 

    //If we are in full screen mode go ahead and update the grids size 
    sizeContent(); 
} 

これは、Chromeで見事に動作します、しかし、私たちの老朽化企業IE8には失敗します。 newHeight varには、ウィンドウの高さからヘッダーなどを差し引いた値が正しく設定されていますが、.cssの高さの行は有効ではなく、高さは変更されません。

それは、このよう生活を開始します。<div class="t-grid-content" style="height:400px">...</div>

そして、次のようになります。<div class="t-grid-content Gridfullscreen" style="height: 418px !important; ">...</div>

し、再び戻ります。私はこれを数時間見てきましたので、IE8でこれを行うにはどんな助けにも大いに感謝します。

敬具、

マーク

+0

私は、Chromeで '$(" div.Gridfullscreen ")。css(" height "、calcHeight);でオーバーライドされているCSSファイルにルールを残していましたが、IE 8ではそうではありませんでした。 – MagicalArmchair

答えて

0

不用意!

.Gridfullscreen 
    { 
    background-color:White; 
    height:400px !Important; 
    } 

2行目を削除し、IE8はChromeのように動作し始めました。

Timさんのお手伝いをありがとうございます。

1

は、この行を削除します。

$("div.Gridfullscreen").css("height", newHeight); 

var calcHeight = newHeight + "px !Important"; 

変更

$("div.Gridfullscreen").css("height", calcHeight); 

また、toggleFullScreen関数でロジックが実行されていない場所はありますか?試してみてください:私はChromeでjquerys $("div.Gridfullscreen").css("height", calcHeight);によって上書きされていたが、IE 8にはそれがありませんでしたCSSファイルでルールを去った

toggleFullScreen() { 

    $('div.grid').toggleClass('fullscreen') 

    if($('div.grid').hasClass('fullscreen')) { 

     //Height reset (just in case we are toggling back) 
     $('div.t-grid-content').css("height", "400px !Important") 
     $('div.t-grid-content').toggleClass('Gridfullscreen') 

     //If we are in full screen mode go ahead and update the grids size 
     sizeContent(); 
    } 
}