# RepeatingGroup内に表示される文字数によってGroupの幅を可変にしたい

**URL:** <https://www.nocode-faq.com/t/topic/2948>\
**Category:** bubble\
**Tags:** フロントエンド\
**Created:** [2022 年 6 月 17 日午前 9:30 UTC](https://www.nocode-faq.com/t/topic/2948 "2022-06-17T09:30:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2022 年 6 月 17 日午前 9:30 UTC](https://www.nocode-faq.com/t/topic/2948/1 "2022-06-17T09:30:22Z")

</div>

### 前提条件

投稿するテキスト文字数によって、表示されるGroup幅を可変に設定したいと思っています。  
階層構造は下記画像の通りです。

 ![2022-06-17_18h23_21](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/d/d3553c4fb450b7cb48d19d493a9a97de81306963.png)

### 発生している問題

可変幅にするために、RepeatingGroupを固定幅（px固定）  
RepeatingGroupに入っているGroupを可変（Fit with to content）にすることで想定通りの動きができると思ったんですが、画像の画像のような表示になってしまいました。

 ![2022-06-17_18h14_47](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/a/ac334ae5a68a2c94c9a813e797fb12828752fdc7.png)

検証①  
RepeatingGroup  
Min width: 0;  
Max width: 1000px;  
Group  
Min width: 0;  
Max width: inf;  
Fit width to content チェック

 ![2022-06-17_18h22_10](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/0/04d24d30dcb3e5b80b0b84484cff86675c29e262.png)

検証②  
RepeatingGroup  
width: 100%;  
Group  
min width: 200px  
Max width: inf;  
Fit width to content チェック

 ![2022-06-17_18h18_46](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/a/afe4b7d958934aaf24dbf64a1d53705668b19599.png)  
d://uHEfthJ0uLTnrfAfzU9QCGFMzpg.png)

### 実装したい機能

画像のようにタイトルの長さによってGroup幅を変更し、左上から順に表示させていきたいと考えています。

 ![2022-06-17_18h10_37](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/5/54f104edd8a1167bee7e8e13ba9b449e084ccb5f.png)

### 試したこと

Repeating GroupのMin width of columnsを200pxに設定しているのが原因なのでは？と仮説を立てて設定変えていますが、なかなか思い通りの挙動になってくれません。  
他にも必要な画像があれば添付します。  
よろしくお願いします。

### スクリーンショット（現状のRepeatingGroupとGroupの設定値）

 ![2022-06-17_18h28_20](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/4/4014b9009d10f5cef14884e3d9ac99cad300481c.png)  
 ![2022-06-17_18h28_54](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/1/1bfc08e0260cee32256a5f74bd1eab1f15b7a93b.png)  
 ![2022-06-17_18h29_30](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/6/6235913238479831eb68d8e8415f0c5b2d5b6d9b.png)

---

<div class="post-metadata">

**Author:** ![Turtle01](https://avatars.discourse-cdn.com/v4/letter/t/96bed5/32.png) [@Turtle01](https://www.nocode-faq.com/u/Turtle01)\
**Post date:** [2022 年 6 月 18 日午前 5:57 UTC](https://www.nocode-faq.com/t/topic/2948/2 "2022-06-18T05:57:40Z")

</div>

"Chippify"というプラグインを使うと解決しそうですね。  
以下、Forumからの引用ですが、

最初にレイアウトをcolumnにする  
プラグインインストール後  
可変させたいRGの直前にChippifyエレメントを置きます。

RGのIDに{addClass: “flex-box-repeating-group”}  
ページにHTMLエレメントに

.inline-repeating-group { display: flex; flex-flow: wrap; }

を記入

 ![スクリーンショット 2022-06-18 145341](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/9/946a6f3b5b23a503cd1a3e96ae9b4ad9c3935aac.png)

でこのような形になりました！

---

<div class="post-metadata">

**Author:** ![john03tgck01a](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/john03tgck01a/32/4558_2.png) [@john03tgck01a](https://www.nocode-faq.com/u/john03tgck01a)\
**Post date:** [2022 年 6 月 18 日午前 10:29 UTC](https://www.nocode-faq.com/t/topic/2948/3 "2022-06-18T10:29:18Z")

</div>

ありがとうございます！  
実現できました！

 ![スクリーンショット 2022-06-18 19.28.06](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/8/8343861c84de2d0fb8194f0a900f4d976a23d808.png)