SmartGWT (エンタープライズ) でボタン付きのウィジェットを開発することを任されています。このデザインでは、ボタンの周りにボーダーが必要です。このための CSS を設計しました。ただし、SmartGWT は、生成された TD の「スタイル」属性を埋めることによって、CSS 境界定義をオーバーライドすることを主張します。Canvas.setBorder のドキュメントには、実際には「このプロパティは、このコンポーネントの 4 つの側面すべてに同じ境界線を適用します。側面ごとに異なる境界線を CSS スタイルで設定し、styleName を介して適用できます。」明らかに、CSS で境界線の定義を制御できるようにするためのものです。
具体的な境界線の定義で setBorder を呼び出すだけでよいことに気付きましたが、状態 (ホバー、ダウンなど) に基づいて異なる境界線を設定する必要があります。
たとえば、ボタンのラベルは「レビュー」です。生成された HTML は次のとおりです。
<td class="controlButton" style="border: currentColor; border-image: none; text-align: center; padding-top: 0px; padding-bottom: 0px; vertical-align: middle;">
<div style="vertical-align: middle; display: inline-block; white-space: nowrap; max-width: 100%;">
<div id="isc_1G" overflow: hidden; vertical-align: middle; display: inline-block; -ms-text-overflow: ellipsis; max-width: 100%; box-sizing: border-box;">Review</div></div></td>
私の CSS では、境界線で定義されたクラス (controlButton) がありますが、「スタイル」の明示的な境界線宣言がそれをオーバーライドします。
ボタンを作成するコードは次のとおりです。
Button button = new Button(“Review”);
button.setBaseStyle(“controlButton”);
button.setBorder("inherit");
button.setHeight(28);
また、setBorder を呼び出さずに setBorder(null) を呼び出し、上記のように setBorder(“inherit”) も試しました。インライン スタイルには何も影響しません。
CSS は次のとおりです (簡潔にするためにすべての状態定義を省略しています)。
.controlButton {
background-color: #353535;
text-align: center;
font-size: 14px;
vertical-align: middle;
padding: 2px;
margin: 2px;
border-radius: 5px;
border: 1px solid #b9b9b9;
color: #d5d5d5;
}
ブラウザーのプログラミング モードでは、「インライン スタイル」の境界線定義を手動でオフにすることができ、ボタンはクラス CSS を使用して正しく表示されます。
ところで、CSS で !important 修飾子を使用できることはわかっていますが、それなしで SmartGWT がオーバーライドを停止するようにする方法が必要です。
SmartGWT のバージョンは 4.0.5 です。GWT のバージョンは 2.7.0 です。