Tak
1
BubbleのGroup Focusでメニューなどを表現したいときに、レスポンシブにメニューのサイズを変えることができますか？
例えば画像のように、PCサイズでは適当なサイズのメニュー。
スマホサイズでは横幅をできるだけ使いたい場合です。（赤枠のような感じにしたい）
Bubbleのレスポンシブのデザイン設定をする画面では、
Group Focusに対してのデザイン設定が、Reference Elementを反映せずに表示されるのも現状ではこうなってしまうものなのでしょうか？
UI BuilderではReference Elementに設定した位置に表示されますが、
Responsiveでは、Group Focusが左上に表示される。レスポンシブ設定が一切できない。
あまりGroup Focusはレスポンシブに（現状）対応していないと思ったほうがよいでしょうか。
設定方法の間違いや、代替案などがあれば教えていただきたいです。
「いいね！」 1
公式フォーラムを見ると、Group Focusはレスポンシブ対応できないので、CSSで調整しましょうという流れでした。
ご参考まで。
「いいね！」 3
Tak
3
回答ありがとうございます！
なるほど、そのままではとりあえずできないことが分かりました。
今回は他の方法で実現するようにします。
CSSを書く方法を知りませんでしたので、CSSでの実現もサンプルで試してみます。
- Group FocusのElementにIDをつける(SettingからID設定可能に変更)
- htmlエレメントでstyleタグを書く
- @mediaクエリで画面サイズに合わせてwidthを変える
という方向性で試してみて、できたらまた報告したいと思います！
「いいね！」 2
Tak
4
ちょっと強引でしたができましたので共有します。
GroupFocusのElementにIDをつけて、
HTML ElementでStyleを設定しました。
GroupFocusのCSS設定がelementのstyleに直接記述されているため、それを上書きするにはJavascriptで書き換えるか !importantで強引に書き換えるしかなかったです。
「いいね！」 7
