2

HighChartsを既存のASP.NETサイトに統合する作業を行っており、既知のバグに遭遇しました。このバグは、最初にdisplay：noneに設定され、次に表示されるように切り替えられた要素が正しく表示されないことです。これは、一部のブラウザーが非表示のオブジェクト（IE8など）のサイズを計算できないためです。こことここ（ページの下部）で提案された修正は、これを行うことです。

.hidden-container {
   position: absolute;
   top: -9999em;
}

jQuery CSSを使用して場所を設定している場合、これはすべてうまくいきます。次のように、コードビハインドで場所とその他の属性を設定しています。

    If showExpanded Then
        collapsedPanel.Style.Item("Display") = "none"
        expandedPanel.Style.Item("Display") = "block"
    Else
        collapsedPanel.Style.Item("Display") = "block"
        expandedPanel.Style.Item("Display") = "none"
    End If

これは、これらのグラフパネル用に次のように編集できます。

    If showExpanded Then
        collapsedPanel.Style.Item("Display") = "none"
        expandedPanel.Style.Item("Display") = "block"
    Else
        collapsedPanel.Style.Item("Display") = "block"
        expandedPanel.Style.Item("position") = "absolute"
        expandedPanel.Style.Item("top") = "-9999em"
    End If

javascriptファイルのように非表示/表示パネルを切り替えています。

function showHidePanelToggle(ctlID, sPnlID, hPnlID) {
    var chkBoxID = $('#' + chkID);
    var controlID = $('#' + ctlID);
    var showPanelID = $('#' + sPnlID);
    var hidePanelID = $('#' + hPnlID);
    if (controlID.attr('type') == 'checkbox') {
        chkID = false;
        if (controlID.is(':checked')) {
            showPanelID.slideUp('normal');
            hidePanelID.slideDown('normal');
        }
        else {
            showPanelID.slideDown('normal');
            hidePanelID.slideUp('normal');
        }
    }
    else {
        ctlID = false;
        if ((hidePanelID).is(':hidden')) {
            showPanelID.slideUp('normal');
            hidePanelID.slideDown('normal');
            chkBoxID.attr('checked', true);
            return false;
        }
        else {
            showPanelID.slideDown('normal');
            hidePanelID.slideUp('normal');
            chkBoxID.attr('checked', false);
            return false;
        }
    }
}

特別なパネル（グラフ）にいるかどうかを確認するためのチェックを追加しました。これを行っています。

if ((hidePanelID).position(':absolute')) {
                showPanelID.slideUp('normal');
                hidePanelID.slideDown('normal');
                chkBoxID.attr('checked', true);
                return false;
            }
            else {
                showPanelID.slideDown('normal');
                hidePanelID.slideUp('normal');
                chkBoxID.attr('checked', false);
                return false;
            }

これは私のパネルを再表示していません（まだ-9999emに設定されているので推測しています。

私の質問は、オフスクリーンパネルを正しく表示するにはどうすればよいですか？残念ながら、jQuery CSSファイルを使用して非表示/表示を設定していません。この新しいCSSを使用するようにシステム全体を書き直すことは、初心者ではありません。

4

1 に答える 1

0

次のコード ブロック内で、「位置」と「上部」の値をデフォルトにリセットしてみてください。

If showExpanded Then
    collapsedPanel.Style.Item("Display") = "none"
    expandedPanel.Style.Item("Display") = "block" // No need for this line?
    expandedPanel.Style.Item("position") = "static"
    expandedPanel.Style.Item("top") = "auto"
Else
    collapsedPanel.Style.Item("Display") = "block"
    expandedPanel.Style.Item("position") = "absolute"
    expandedPanel.Style.Item("top") = "-9999em"
End If
于 2012-07-06T11:52:55.650 に答える