Je suis en train de créer une application Rails et j'essaie de réaliser une fonctionnalité particulière liée à Bootstrap de Twitter. effondrement . Soyez indulgent avec moi pendant que je l'explique.
J'ai actuellement la vue suivante :
Lorsque vous cliquez sur chacun de ces boutons, leur div data-toggle est développée. La vue est configurée comme suit :
<button class="btn dropdown" data-toggle="collapse" data-target="#keys"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right"><%= @app.keys.count %></span></button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit"><i class="icon-chevron-right"></i> Edit Details</button>
<div class="collapse indent" id="keys">
<!--content-->
</div>
<div class="collapse indent" id="attrs">
<!--content-->
</div>
<div class="collapse" id="edit">
<!--content-->
</div>Je les ai configurés comme ça, parce que je veux que les boutons soient côte à côte, en ligne. Si je déplace les boutons pour qu'ils soient juste au-dessus de la vue qu'ils développent/réduisent, les boutons s'empilent les uns sur les autres.
Mon objectif final est donc d'avoir les trois boutons côte à côte et de faire en sorte qu'ils réduisent et développent leurs sections respectives. La configuration actuelle fonctionne, mais elle est un peu gênante. Par exemple, si quelqu'un développe la section des clés et développe ensuite la section des attributs, il doit faire défiler la page sous la section des clés.
Il existe deux solutions possibles à ce problème. La première consiste à appuyer sur un bouton pour que les deux autres s'effondrent d'eux-mêmes. Cela signifie qu'à tout moment, une seule de ces sections est développée.
La meilleure solution, je pense, serait de faire en sorte que lorsque les clés sont développées, les boutons de droite se déplacent vers le bas de la division des clés, et lorsque les attributs sont développés, le bouton de modification des détails se déplace vers le bas de cette division. Est-ce possible ? J'ai déjà essayé de le faire en laissant les boutons s'empiler les uns sur les autres et en modifiant leur emplacement relatif par le biais de css, mais cela n'a pas fonctionné parce que lorsqu'une des sections était développée, les autres boutons se retrouvaient dans des endroits gênants au milieu de la section développée.
Enfin, je voudrais essayer de faire cela sans le comportement de style accordéon comme mentionné sur la page bootstrap de twitter, mais si quelqu'un peut me convaincre d'un point de vue design que c'est préférable, je vais certainement reconsidérer la question.
