- このトピックには6件の返信、2人の参加者があり、最後に
により4年、 10ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】v12.1.1
【お使いの Snow Monkey Blocks のバージョン】最新
【お使いの Snow Monkey Editor のバージョン】未使用
【お使いのブラウザ】Safari
【当該サイトのURL】ローカルホスト### 実現したいこと
どのような時でもアコーディオンを横幅フルにするには…### 発生している問題
親の要素の display の種類や組み方によっては、アコーディオンのタイトル部の横幅が親の領域より狭く表示されるなどデザインが崩れるケースが発生している。
(Snow Monkey blocksのみの使用ではほぼ起こらない)### 試したこと
その際には width: 100% をアコーディオン要素にスタイリング設定するなどで横幅を広げる事をすれば、ほぼ横幅100%となり問題を回避できている。が、カラムなどを組む際にはみ出す場合があるので、しっかり横幅100%で固定するにはどうするべきか…。
Who liked: No user検証してみたいと思うので「親の要素の display の種類や組み方によっては、アコーディオンのタイトル部の横幅が親の領域より狭く表示されるなどデザインが崩れる」を再現する方法を教えてください！
Who liked: No userブロック組むなりしないと駄目なので再現コードは結構大変と思います。
軽くやるなら、ボックスか何らかの子ブロック(インナーブロック)にアコーディオンを入れて、親ブロックで親ブロック > div { display: flex; }なりで、子ブロックのdivの詳細度を上げさせるようなスタイリングをしたらなるかと。
(親要素は横幅いっぱいだが、flexなどの詳細参照により、アコーディオンの横幅がデフォルトの幅でブラウザにレンダリングされるはず)Chromeだと再現されずSafariだとなるとかもあるのでChromeで再現されなければSafariで見てください。
Who liked: No userこのサイトのトップページの「よくあるご質問」でアコーディオンを使っていて、
.c-container.u-slim-width > .smb-section__body > .smb-accordionという入れ子になっているので、これを
.c-container > .smb-section__body > .smb-accordionとして幅を広く、そして
.smb-section__bodyにstyle属性でdisplay: flex; flex-direction: columnを追加してみたのですが、特にアコーディオンの幅が狭くなるということはありませんでした。イマイチどういう状況のことを指しているのかがわからないので、実際のページか具体的な再現方法をいただけないと適切な回答をするのが難しいと思います…。親要素の CSS が影響して、ということであれば個別に対応するしかないのではないですかね？
Who liked: No userその再現の場合、ボタン要素を消した上で
flex-direction: columnも定義をさせない場合、横幅が狭くなるかと（これは、かなり極端な条件だとも思いますが…）
その場合であっても、アコーディオン要素にwidth: 100%;を加えてやれば、正しく横幅いっぱいになると思います。親要素の CSS が影響して、ということであれば個別に対応するしかないのではないですかね？
アコーディオンの場合、個別に対応する方が良いのかは悩んでます。
個別にスタイルをガチガチに弄ることでチェックボックスとtitle部分やbodyの部分のズレも生じるので、可能な限りは 基礎で fix した方が良いのかなーと思ってます。
アコーディオンでもないような閲覧者が操作しない要素系はその部分部分を個別で対応しても良いと思いますが…。Who liked: No userその再現の場合、ボタン要素を消した上で flex-direction: column も定義をさせない場合、横幅が狭くなるかと
その挙動は
display: flexの仕様通りなので、Blocks 側でよしなに対応するよりユーザー側でflex-direction: columnやflexプロパティで都度対応するのが一般的だと思います。Who liked: No user
- トピック「アコーディオンの横幅に関して」には新しい返信をつけることはできません。