web-dev-qa-db-ja.com

マテリアライズCSS-トーストダイアログの位置の変更

Materialize css（www.materializecss.com）を使用しています。トーストダイアログの位置を変更したい。小さな画面では、適切な位置にあります。ワイドスクリーンとボックスレイアウトの場合、レイアウトの右隅に移動します。 （ http://materializecss.com/dialogs.html ）

トーストがトリガーされると、「<div id="toast-container"></div> "本文に追加します。本文に追加しません。特定のdivに追加します。

javascripthtmlcsshtml5materialize
18
Manish Rane

トーストダイアログの位置は、_#toast-container_のdafault値を_!important_でautoに設定することで変更できます。

たとえば、デスクトップ画面でデフォルトの反対の位置が必要な場合は、次のように変更します。

_#toast-container {
  top: auto !important;
  right: auto !important;
  bottom: 10%;
  left:7%;  
}
_
  • _!important_の使用はisが必要です。それ以外の場合は_materialize.css_がオーバーライドします
  • _position:absolute;_または_position:fixed;_の使用はnotが必要です

バージョン0.97.6のデモ

Materialize.toast('I am a toast!', 4000);
_#toast-container {
  top: auto !important;
  right: auto !important;
  bottom: 10%;
  left:7%;
}_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css" rel="stylesheet"/>_
31
NiZa

ドキュメントの中心にトーストの位置を設定するには、このスタイルを追加できます。

#toast-container {
    min-width: 10%;
    top: 50%;
    right: 50%;
    transform: translateX(50%) translateY(50%);
}
2
Alexander Goncharov

ダイアログの位置を変更する場合は、cssを直接使用してスタイルを設定できます。

#toast-container {
    position: fixed !important;
    bottom: 0px !important;
    left: 0px !important;
}

「！important」は不要な場合があります。

1
asker

相対divにそれを投げるだけで、libが作成されないように見えます。既に存在する場合、body endに追加します。

<div style="position: relative">
....
<div id="toast-container"></div>
</div>
0
user2174835