0

アプリケーションでポップアップ通知のレスポンシブ デザインを行いたいと考えています。通知には Angular Toaster を使用しています。

たとえば、toaster-container 要素を画面の中央に配置しましたが、絶対位置を使用しているため、小さい画面では通知が同じ位置にとどまり、表示されません。通知が含まれている親要素 (この場合はコンテナー グリッド) に関連する通知を作成したいと思います。CSSを使用してそれを達成するにはどうすればよいですか? これは私のhtmlコードです:

<body data-ng-controller="AppController">


    <div id="container" class="container">

   <toaster-container toaster-options="{'position-class': 'toast-container-custo','time-out': 3000, 'close-button':true}"></toaster-container>

        <div id="header" data-ng-include="'partials/header/header.html'" ></div>



        <div data-ng-view></div>
        <div id="footer" data-ng-include="'partials/footer/footer.html'"></div>

    <!-- This is the div with the overlay css class, so no matter where it is located this div inside the screen, it will cover the whole screen-->
        <div id="loader" class="loading overlay" data-ng-if="loader.loading">
            <p>We are loading the products. Please wait...</p>
            <img alt="" src="images/ajax-loader.gif">
         </div>   

    </div>

    <div id="loginPanel" data-ng-include="'partials/content/panels/login.html'"></div>
</body>

toaster-container 要素に使用するカスタム CSS ルールは次のとおりです。

.toast-container-custo
 {
position: absolute;
top:100px;
left: 780px;
}
4

2 に答える 2

1
  • ピクセルの代わりにパーセンテージを使用する

幅/高さと上/左の値の両方にパーセンテージを使用して、div をコンテナーに関連付けることができます。ここで使用するパーセンテージは、親コンテナーのサイズに関連します。したがって、親コンテナがに設定されwidth:300px、子がに設定されてwidth:50%いる場合、子はでレンダリングされますwidth:150px;

  • 要素の相対位置を使用します。

相対的な配置は、ラベルに記載されているとおりです。要素を他の要素に対して相対的に配置します。したがって、要素を次のように設定する必要もありますposition:relative;

これが私がこれについて行く方法です：

.toast-container-custo{
  position: relative;
  margin: 0 auto;
  width: 30%;
  height:30px;
}
  • margin:0 autoコンテナ内の子要素を水平方向に中央揃えにします
  • width現在は親コンテナの 30%です
  • 、heightまあ、私はこれを固定px値に設定することを好みますが、%ここでも明確に使用できます
于 2015-01-21T12:10:04.153 に答える
0

コンテナを次のように変更できます。

.toast-container-custo{
    position: absolute;
    top: 100px;
    margin-left: auto;
    float: none;
    margin-right: auto;
    left: 0;
    right: 0;
}

一般に、これは絶対要素を水平方向に中央揃えするのに適した方法です。

于 2015-01-21T12:15:18.267 に答える