I came across a small bug today.
I have an accordion and want to include a button in each item heading so added a xs button within the Heading section of each heading. That works fine but now the Show/Hide buttons for each item are disabled so I can't display the item content for editing purposes. As soon as I remove the extra button, the show/hide buttons are enabled again.
Expanding/Collapsing the items works fine in the preview, just not within Bootstrap STudio.
Pete
I don't seem to be able to recreate this problem.
I created a new project and drag/dropped an accordion component then drag/dropped a button to the heading(s) of the accordion. I can select anyone of the heading and use the accordion toolbar to show/hide any of the accordion groups. The only time I can't is if I select the accordion container element the one with the id="accordion-1"
Did you possibly manually add the class "in" to the element that has the role="tabpanel" because if you did then the show/hide don't do anything. Yet you can click them, they aren't greyed out, they just don't change the state though.
Or is the Show/Hide actually greyed out icons?
You can check the manual adding of the class by selecting the element with the role="tabpanel" in the HTML pane and then expand the ATTRIBUTE pane. In the class item do you have a class of "in" in the locked class section and a class of "in" outside the locked class section? If so just delete the "in" class outside the locked section then.
Saj
I checked for the "in" attribute and it's not on any of the tabpanel divs - they just have panel-collapse collapse item-n classes.
The show/hide buttons are greyed out and don't do anything when clicked.
Very strange. If I remove the extra button form the first accordion item, the show/hide buttons work again for all the accordion items even the ones that still have an extra button in them!
I can live with it, especially if it's not reproducable.
I do have one other issue with the extra button. If I simple add the button so it's right next to the button that standard in the heading, it lines up well with the standard button (I set the button type to xs). What I really want is for the button to be at the right end of the heading so I added a pull-right class to it and now it doesn't line up with the standard button - it's lower and is partially over the seperator line of the item heading.
Pete
That is weird. What if you delete that extra button of your on the first item and drag in a new one and see if that works.
Also it does make sense that the button when pulled to the right would overlap, because it's a float method that sort of take that element out of the normal flow. Just not to the extent that something like an absolutely position element. However, in my test bed setting the button as extra small i.e. the app adds the class "btn-xs" to the button, the button no longer overlaps. But something you can do is add the class of "clearfix" to the element(s) that have the class of "panel-title". That should get rid of the overlapping for you. If you need to sort of re-position the button you can add a negative margin-top to the button.
Saj
I deleted the original button and added a new one as you suggested and all worked fine. I then changed the text of the button by selecting it and typing the new text - show/hide is disabled again.
The margin-top setting worked fine, buttons lined up nicely now.
Thanks, Pete