1

プロジェクトに GWTBootstrap Modal を使用していますが、幅が狭すぎて好みに合わないという問題があります。

firebug で取得するスタイルを調べたところ、これを見ました

.modal {
background-clip: padding-box;
background-color: #FFFFFF;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 6px 6px 6px 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
left: 50%;
margin: -250px 0 0 -280px;
outline: medium none;
position: fixed;
top: 50%;
width: 560px;
z-index: 1050;
}

Webapp/css ディレクトリに移動し、次の変更を加えましたbootstrap.min.css

.modal {
width : 960px;
max-height : 960px;
}

ただし、gwt コンパイラによって上書きされます。

次にこれを参考に cssファイル custom-overrides.css を作成しました

.modal {
    width : 960px;
    max-height : 960px;
}

それ も機能<stylesheet src="/custom-overrides.css" />しgwt.xml ません.Eclipseは、コンパイル時にファイルが変更または削除されたことを警告します。

モーダルを作成する UIBinder ファイルにも同じ変更を加えようとしました。

<ui:style>
    .modal{
        width : 960px;
    max-height : 960px;
    }
</ui:style>

それもうまくいきません。困惑しています。自分のスタイルを適用するにはどうすればよいですか?

4

2 に答える 2

1

3 つのソリューションはすべて機能するはずです。

  1. をオーバーライドできますがbootstrap.min.css、アプリをコンパイルすると上書きされることがわかったので、gwt-bootstrap ライブラリ自体でこれを行う必要があります。
  2. a を含めることもできcustom-override.css stylesheetますが、元のブートストラップ ファイルの .modal スタイルもオーバーライドするようにする必要があります。!important上書きされたcssスタイル（つまりwidth : 960px !important;）に追加することで、それを確実にすることができます
  3. .modalUiBinder ファイルでクラスをオーバーライドする場合は、 @externalアノテーション を使用する必要があります。

このようなもの：

<ui:style>
    @external .modal;
    .modal{
        width : 960px;
        max-height : 960px;
    }
</ui:style>

!importantただし、スタイルにルールを追加する必要がある場合もあります

于 2013-04-18T13:48:10.600 に答える