# sweetalertのメッセージ表示位置について

**URL:** <https://community.cybozu.dev/t/topic/6846>\
**Category:** kintone 開発相談\
**Created:** [2020 年 11 月 16 日午前 3:26 UTC](https://community.cybozu.dev/t/topic/6846 "2020-11-16T03:26:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account2004](https://avatars.discourse-cdn.com/v4/letter/l/6a8cbe/32.png) [@Legacy\_Account2004](https://community.cybozu.dev/u/Legacy_Account2004)\
**Post date:** [2020 年 11 月 16 日午前 3:26 UTC](https://community.cybozu.dev/t/topic/6846/1 "2020-11-16T03:26:16Z")

</div>

詳細画面にボタンを配置し、ボタン押下時に確認メッセージをsweetalertで表示しています。

一覧画面から詳細画面を開いてボタン押下時は、メッセージが画面真ん中あたりに表示され違和感がないのですが、

そのレコードの通知画面からボタン押下した際は、画面をスクロールしないとメッセージが表示されません。

通知画面からボタン押下した際も画面の真ん中あたりにメッセージを表示したいのですが、

制御可能でしょうか。可能な場合、どう制御したらよいでしょうか。

sweetalertは[https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.jsを使用しています。](https://js.cybozu.com/sweetalert/v2.1.2/sweetalert.min.js%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2275](https://avatars.discourse-cdn.com/v4/letter/l/a4c791/32.png) [@Legacy\_Account2275](https://community.cybozu.dev/u/Legacy_Account2275)\
**Post date:** [2020 年 11 月 18 日午前 8:48 UTC](https://community.cybozu.dev/t/topic/6846/2 "2020-11-18T08:48:02Z")

</div>

こんにちは。  
私も同じような経験があったのですが、運用で回避している状況です。

```
.swal-modal {
position: relative;
top: -300px;
}

```

などのように全体 CSS で指定して上寄せに表示させることは可能です。

ただ、全ての画面で同じように上寄せになってしまうのと、kintone や SweetAlert のバージョンアップなどによって  
思わぬ表示崩れを起こすこともあるので注意が必要です。

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2004](https://avatars.discourse-cdn.com/v4/letter/l/6a8cbe/32.png) [@Legacy\_Account2004](https://community.cybozu.dev/u/Legacy_Account2004)\
**Post date:** [2020 年 11 月 18 日午前 9:03 UTC](https://community.cybozu.dev/t/topic/6846/3 "2020-11-18T09:03:02Z")

</div>

y\_jedi様

回答ありがとうございます。

教えていただいた内容踏まえ、どうするか検討したいと思います。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2025 年 5 月 15 日午前 6:36 UTC](https://community.cybozu.dev/t/topic/6846/4 "2025-05-15T06:36:34Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。