質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

6964閲覧

input-group の中で横にスライドするアコーディオン

退会済みユーザー

退会済みユーザー

総合スコア0

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

1クリップ

投稿2018/08/31 11:24

編集2018/09/01 15:44

bootstrap4 で input−group の中で横にアコーディオンしたいのですがどうすればいいでしょうか

html

1<div class="accordion"> 2 <div class="input-group"> 3 <button></button> 4 </div> 5</div>

の状態から

<div class="accordion"> <div class="input-group"> <div class="input-group-prepend"> <button>○</button> </div> <input type="text" class="form-control form-control-sm"> <input type="text" class="form-control form-control-sm"> <div class="input-group-append"> <button>×</button> </div> </div> </div>

の状態に横にひろがるようにしたいです

横にスライドさせるアニメーションは bootstrap のクラスをつけるだけでは無理でしょうか?

あと input-group でなければアニメーション以外はできそうなのですが
input-group の中だと余分な div をつけるとすぐデザインが崩れるのでなかなかうまくいきません

自分で <input type="checkbox" class="d-none" id="acc"> をつけて
CSS で

.acc:checked + .acc_body { display: block; }

みたいなことをしようとしても input-group のなかにラベルを入れるとデザインが崩れます

いろいろ試行錯誤しているんですがなかなかうまくいかないので助けていただけるとありがたいです

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

liveasnotes

2018/08/31 14:08

HTMLが表すのは文書構造でありビジュアルではないので,HTMLだけみせられても,どのようにしたいのか分かりません.CSSも少しだけ載せられていますが,該当部分のHTMLがないため状況はを把握できません.それから,checkboxタグなど存在しないので修正してください(<input type="checkbox">ならある)
liveasnotes

2018/08/31 14:09

どんなコードを書けばよいのかまったくわからないなら,せめてイラストだけでも載せてください.完成予想図が見えない状態ではコードは書けないので
退会済みユーザー

退会済みユーザー

2018/09/01 15:41 編集

input-group は https://cccabinet.jpn.org/bootstrap4/components/input-group にあるようなつながったフォームを作るクラスで 最初は小さなボタン1個(4つ角ともまるい)の状態からクリックすると右にのびて複数の入力欄が出現するというものを作りたいです(入力欄は質問では input x 2 + アイコンボタン にしてますがもっといろいろ入ります)
退会済みユーザー

退会済みユーザー

2018/09/01 15:45

checkbox は修正しました すいませんHTMLの生成自体はRailsのヘルパーを使ってるのでHTMLに関しては不正確なところがあるかもです
guest

回答1

0

ベストアンサー

要素の動きがいまいちわからないので,とりあえずボタンの実装だけ
(リンク先ページ右上の「リミックス」ボタンからソースの閲覧・編集ができます)
https://thimbleprojects.org/liveasnotes/537081/
イメージ説明
(※上のデモは下のデモに書き換えられました/20180904)
イメージ説明


もしかしたら参考になるかもしれないので,他で書いたものですが置いときます
元投稿

https://thimbleprojects.org/liveasnotes/536993/
イメージ説明


書き加えて良いなら,

html

1<!--書き加えた方--> 2<div class="input-group mb-3"> 3 <input type="checkbox" id="form_elm_1" dn> 4 <label for="form_elm_1"> 5 <div class="input-group-prepend"> 6 <span class="input-group-text" id="basic-addon1">@</span> 7 </div> 8 </label> 9 <div class="form_elm_wrapper"> 10 <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1"> 11 </div> 12</div> 13 14<!--書き加えてない方--> 15<div class="input-group mb-3"> 16 <div class="input-group-prepend"> 17 <span class="input-group-text" id="basic-addon1">@</span> 18 </div> 19 <input type="text" class="form-control" placeholder="ユーザー名" aria-label="ユーザー名" aria-describedby="basic-addon1"> 20</div>

css

1.form_elm_wrapper{ 2 width: 0; 3 overflow: hidden; 4 transition: .5s; 5} 6input[id^="form_elm"]:checked ~.form_elm_wrapper{ 7 width: calc(100% - 2.6em); 8}

イメージ説明
こんな感じでしょうか?


追記
書き忘れてましたが,<input><label>は離れてても良い(親子関係・兄弟関係は気にしなくて良い)みたいなので(仕様を読んだわけではないので実務で使うなら要確認),こういう入れ替えももちろんありです

あと,勝手に追加してるdn属性は属性セレクタでこういう指定をしています

css

1[dn]{ 2 display: none; 3}

html

1<div class="input-group mb-3"> 2 <label for="form_elm_1"> 3 <!--略--> 4 </label> 5 <input type="checkbox" id="form_elm_1" dn><!--入れ替えた--> 6 <div class="form_elm_wrapper"> 7 <!--略--> 8 </div> 9</div>

css

1/* "~"(間接セレクタ)を"+"(隣接セレクタ)に書き換え */ 2input[id^="form_elm"]:checked +.form_elm_wrapper{ 3 width: calc(100% - 2.6em); 4}

意外と大したことはしてないですし,height:auto;width:auto;にアニメーションが効かないところを考えると,見栄えを考慮するならもうひと工夫いるかもしれないですね

css

1/*イメージ:wrapperの中にcontentsがある*/ 2#wrapper{ 3 width: 0; 4 overflow: hidden; 5 transition: .5s .1s;/*!*/ 6} 7#contents{ 8 opacity: 0; 9 transition: .1s;/*!*/ 10} 11#btn:checked +#wrapper{ 12 width: 100px; 13 transition: .5s; 14} 15#btn:checked +#wrapper #contents{ 16 opacity: 1; 17 transition: .1s .5s; 18}

追記(20180905)
完全ではないですが,それっぽいものが出来たので通知しときます(デモページも更新しました)
HTMLの手直しも簡素になりました
イメージ説明
border-radiusはオリジナルのままにしました.

上下幅がずれる現象は,気が向いたら調べます

投稿2018/09/03 15:56

編集2018/09/05 14:49
liveasnotes

総合スコア1284

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/09/03 16:05

せっかく作ってくださったんですけど 下にでるんじゃなく たとえば作っていただいた一番上の入力フォームだと [ @ ] の状態から@ をクリックすると [ @ ][ input ] というふうに横にのびて input が出現するみたいな感じにしたかったのです 下に(ボタンの外部に)出すのであれば <div class="collapse" id="..."> の中にいれるだけでどんなコンテンツでもだせるんですが トリガー自身が input-group の中に入ってるのでなかなかうまくいかずに困ってます
退会済みユーザー

退会済みユーザー

2018/09/04 05:31

わー これです! ありがとうございます 今ちょっと別件をやっててコードを読めないのですが 時間があるときにゆっくりよませていただきます とりあえずベストアンサーにさせていただきますね
退会済みユーザー

退会済みユーザー

2018/09/04 10:25 編集

んー 中身が1こだとうまくいくんですけど 質問文のように右側の出現する入力欄を複数にすると縦にならんじゃうみたいですね あと回答のデモもよく見ると入力欄の角もまるくなっちゃってるので 本来 input-group は両端のみ丸くなるように自動で border の rounded を管理してくれるみたいですけど input-group が有効なのは 直下にある場合だけで form_elm_wrapper で囲んでる孫にはきいてないみたいですね IDを中身それぞれにつけて wapper でかこまずに + じゃなく ~ で選択しても padding や border がのこってうまく隠れないし… input-group が間にコンテナー div をはさめないのが使いにくすぎてもうあきらめるしかないかなと せっかく何度も作っていただいたのに申し訳ないです
退会済みユーザー

退会済みユーザー

2018/09/05 15:29

何度もありがとうございます オリジナルのスタイルと同じ状態のボタンを absoluteで重ねる感じなのですね ただあとでテーマやテンプレートをあてたり文字サイズ変更ボタンをつける可能性が高いので bootstrapのクラスを使わないと拡張性が… でもボタン1個の状態を bootstrap のクラスで作れればいけそうですね 自分でも時間ができたらまたさわってみます ほんとにありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問