bubble |縦長のポップアップを表示した時のグレー部分の余白調整

bubbleで縦長のポップアップを表示した場合、グレー部分の余白がポップアップの上側によせられてしまいます。

実現したいことは、ポップアップのグレー部分の余白を均等にすることです。

よろしくお願い致します。


6cac0dbc7afc3faae00060dd0d66ca6e

「いいね!」 1

僕がやってみても同じ状態を再現できないのですが、
UIエディタやエレメントツリーがどうなっているかを共有していただけますか?:eyes:

「いいね!」 1

恐れ入ります、ありがとうございます!!

UIエディタやエレメントツリーがどうなっているかを共有していただけますか?

エレメント数が多いため、複数のキャプチャに分けさせて頂いております。
不足がございましたら教えて頂ければと思います。
ぜひよろしくお願い致します。



返信遅くなりました!

原因はheightです。
現在ページの高さが約2,000px、ポップアップを表示させるボタンのY軸が約1,500pxにあります。
この状態でボタンを押すと、ポップアップが表示される基準がボタンの位置であるY軸1,500pxになります。
そして、表示するポップアップの高さが約1,100pxです。

これらを前提として、Y軸1,500pxにあるボタンを押し、それを基準に1,100pxのポップアップを表示させているので、つまり現状は元ページの高さである2,000pxを突き破っている状態です。
これを回避するには、ポップアップを上の位置で表示させる必要があります。

まず、ボタンを押した瞬間にページをトップへスクロールさせましょう。
ボタンを押したワークフローのStep1で、Scroll to an elementでそのページを指定してください。
Step2でポップアップを表示させます。

ポップアップのY軸自体は変更することができないので、CSSを書きましょう。
該当ポップアップエレメントにIDを付け、そのIDに対してtopの位置を固定します。
たとえばポップアップに「popup」というIDを付けたら、追加するCSSは以下です。

#popup {
top: 56px !important;
}

CSSは、CSS Toolsというプラグインを導入するか、HTMLを置いてその中のstyleタブに書くか。
あるいは、有料プランならページ自体の「Page HTML Header」に書き込むことで使えます。

お試しください~。

「いいね!」 6

ありがとうございます!!
教えて頂いた通り実装ができました!

しかしもう1点実現可能であれば教えてください。
Scroll to an elementが実行された際、どうしても上へのスクロールの挙動がユーザーに見えてしまいます…
入力内容を確認するボタンをクリック後、スクロールされている間はPOPUPを非表示にしTOPまで到達したら表示する挙動は可能でしょうか。

よろしくお願い致します :bowing_man:

スクロールさせてからポップアップを表示する前に
「Add a pause before next action」で0.3秒ほどの間隔を開ければ、うまく表示されます。
この秒数は、ご自身のアプリに合わせて微調整してください◎

「いいね!」 3

ありがとうございます。

ポップアップ前の画面をhideにするロジックを組み合わせると上手くいきました!
これでユーザーに違和感なく使ってもらえそうです!
ありがとうございました :bowing_man:

「いいね!」 1