2012-02-27 11 views
1

Web上のどこでも答えが見つかりませんでしたので、私自身の質問にお答えします:TooltipDialogポップアップの内部パディングをオーバーライドするにはどうすればよいですか?Dojo ToolTipDialogのパディングを変更する

挑戦:dijit.TooltipDialogを使用している場合 クラロスタイルシートからdijitTooltipContainerクラスに割り当てられた計6Px 8px 8px計6Px の内部パディングがあります。私は同じページでいくつかのツールチップを使用し、このパッドを1つから削除したいだけでした(したがって、デフォルトのスタイルシートを上書きしたくない)。この特定のツールヒントには、0から100までの右揃え番号の整形されていないリストが含まれています。dijitTooltipContainerの余分な余白はあまりにも大きかったです。

残念ながら、次は親要素に影響を与える(そしてその時、それの混乱を作り)、動作しません。

var dialog = new dijit.TooltipDialog({ 
     content: string, 
     style: "padding: 0;", 
     id: "newDialog" 
    },""); 

答え:は、ここで私は0に内部パディングを変更する方法です(JavaScriptを使用して):

// Create the ToolTip 
var dialog = new dijit.TooltipDialog({ 
     content: string, 
     id: "newDialog" 
    },""); 

// Open the popup 
dijit.popup.open({ 
    around: "someNode", 
    orient: ["below"], 
    popup: dialog 
}); 

// Remove the padding from dijitTooltipContainer 
    // Get our main Widget node 
    var mainNode = document.getElementById("newDialog"); 

    // Get all the child DIV nodes created by Dojo 
    var divChildren = mainNode.getElementsByTagName("div"); 

    // Set the element padding to zero 
    // dijitTooltipContainer is the first child node 
    dojo.attr(divChildren[0], "style", {padding: "0px"}); 

他の誰かがこれを行うためのより良い方法を持っている可能性があります。私はそれを見つけることができませんでした。ハハ。

答えて

1

私はDojoを使用しているときに、カスタムテーマをセットアップし、claro(または出荷されているもの)と私のカスタムテーマの両方を使用します。その後、私のカスタムテーマでこれらのオーバーライドをセットアップしました。私はすべてのツールチップを無効にしたい場合

<body class="claro myTheme"> 

だから、私は私のcss

.myTheme .dijitTooltipContainer { 
    padding: 0; 
} 

でこれを持っている可能性がしかし、あなたはあなたがこの

// Create the ToolTip 
var dialog = new dijit.TooltipDialog({ 
    content: string, 
    id: "newDialog" 
},""); 
dojo.addClass(dialog.domNode, 'noPadding'); 

を行うことができるように、1を上書きしたいですとのCSS

.myTheme .noPadding .dijitTooltipContainer { 
    padding: 0; 
} 
関連する問題