Problems with buttons in accordion panels

[m0bius37]

Hello All, I am new to muse and have been teaching myself through tutorials, videos, and forums for a few weeks. I am trying to create an accordion panel that has responsive state buttons inside of it. When I try to "Preview" this, the buttons do not keep the size I set them as in "Design", and also will not appear where I wanted inside of the accordion panel "text box".

For example: if I have an accordion panel with "option 1" as the first panel, and I want to be able to click this, have it open, and expose 3 buttons that say "A", "B", and "C" inside of where there would normally be text (each button stretching the width of the text box, with 1/3 of the height)...when i preview, the buttons will all be stacked on top of each other in the upper left of the text box. I checked to make sure the buttons are not pinned to any particular direction, and when i experiment with pinning, or with setting width to be responsive or not, the end result is still the same. When I move the buttons outside of the acccordian to see how they look on the main page, the buttons still resize themselves, stacking in the upper left of the page. This is all done on a regular page, nothing involved in this scenario is in a master page. Does anyone have any suggestions?

All i want to do is create an accordion panel that has responsive buttons inside of it.

THANK YOU!!!!

[mdmerric]

Hello MinoritiesAndSuccess,

I too am having this issue however mine is slightly different and without anything I can figure out to fix it.  I have one single accordion button (for mobile view) that will expand and contract the menu for my site.  I have stretched the content box to be page with (i.e. width of mobile screen I have mine set to 640px, 480px, and 320px, theoretically all the major dimensions of mobile devices).  At these page widths, everything looks great.  The standard out of the box vertical menu I have set is to fill the entire expanded content area from the accordion click of the user and display the menu.  The buttons have no fill on all states except for the active state with a small border at the bottom of the button so you know what page you are on with the menu expanded.  I am new as well to Adobe Muse however not new to website creation and coding.  I just need to figure out how to have the button text of the vertical menu which is placed into an accordion widget to be responsive to the page.  Hopefully someone will see our posts and help us out.  Thanks!

[m0bius37]

Hi mdmerric,

I'm not sure if this helps, but when you select your accordian panel, it will automatically be in the "active" state. So if you edit how you want the state to change, it will only pertain to the active state. You have to manually change it to "Normal" or anything else if you want to change that.

I too hope someone sees our lonely posts. I have decided to go with a composition instead of accordian (at least until someone answers this post), because what i'm currently working on is in browser and composition works very well.

Cheers!

[Preran]

I checked with the team, and they have these questions for you?

• How did you add the buttons?
• Did you use pinning of any sort?
• Are you using a Fluid Grid layout or fixed layout?
• Would it be possible for you to share screenshots, or even better, a URL that we could use for testing?

Thanks,

Preran

[m0bius37]

Hi Preran,

thank you for replying. I added the buttons from a widget i downloaded. I moved them from the widget library as I would anything else, and placed them inside the accordian panel openings. The pinning is probably something I am doing wrong, I tried with it pinned to center, and unpinned, but got same result. I am embarrased to ask: how do i tell if I have a flud grid layout or fixed layout?

Thank you.

[Preran]

It's possible that the third-party buttons are causing the issue. I checked with a product team member, and he showed me how he had no issues with using responsive buttons in Muse. You can try checking with the developer from whom you purchased the widget.

When you select File > New to create a new site, you are asked to choose between Fluid Width and Fixed Width.  Fluid width corresponds to responsive layouts using breakpoints for creating layouts for different dimensions.

I have not tried using buttons in an Accordion panel before, and if you are unable to proceed, I suggest getting in touch with Adobe Customer Care Contact Customer Care for help.

It would help other contributors here if they could see screenshots, or a URL that they could use to test your site.

Thanks,

Preran

[m0bius37]

I am trying an alternate method of getting what I want. In using the "featured news" widget under "compositions", I can create responsive tabs in a similar way, but end up having the same issue!

This time i did not use any third party widgets, specifically to see if that was what is causing the issue. when I resize and position the tabs using the "featured news" widget, they are automatically resized and positioned at the bottom of the page, with their content display boxes being somewhere else completely disconnected. I have tried pinned and unpinned, but the tabs still end up in the same spots as the wrong sizes.

There is a similarity between these two issues, so I think i must be doing something wrong that is causing placement in "design" to fail in displaying properly in "preview". Any ideas as to what might cause this? Again, I have tried pinning, and it does nothing to solve this.

[Preran]

I am asking around to see if anyone has any ideas. Will update this post as soon as I get some info.

[m0bius37 · Accepted solution]

Thank you for your help, but it has been solved!

The issue was breakpoints. because there was an 1160 px breakpoint that i didn't know was there, and my monitor width is very large, the widget wasn't configured for a 1160 px page, and so resized itself. When i deleted the 1160 breakpoint, the problem was solved.

I appreciate your time. I hope this can help any other noobs like myself who are having a similar issue.

[mdmerric]

I thought the whole point of muse was to easily be able to define these break points and have the widgets work at all break points?  I'm not really sure I understand your logic or statement. Is there any way you could explain further?  If I have all my break points set on the master page wouldn't you just need to configure the content in each of the break points without a worry? Whereas I want to apply the same menu to all of my pages hints why I made everything for the header and footer on the master page. Where is the extra breakpoint coming from?  Your screen size shouldn't make any difference  how the break points work it should scale accordingly. Thanks

[Suraj Panigrahi]

This answer is not useful.

[mdmerric]

Hello,  would you be able to reach out with a solution if you find one for me?  Thanks

[mdmerric]

Hello,

i use the accordion widget from adobe muse and place this on the page in a fluid layout set at 768px. I then add the vertical menu from adobe muse to the accordion widget and get the dark blue lines that let me know I am placing the vertical menu in The accordion widget. I drag the bounding box of the vertical menu and resize it to the width and height of the accordion widget so that when only one accordion button is selected it "pops down" the menu for the user and vice Vera's to hide it. I have tried using both no resize and resize to width without anything working. Once I get to an size below the 768px (mobile view) the wording within the buttons do not stay in the middle of the accordion like it should be.  I have tried pinning as well without anything working. I have also tried to reduce the width of the vertical menu to just be the same width as the button words and place this in the middle of the accordion with again nothing working. The weird thing about it is that it will resize correctly within muse but not in the actual web browser. I have tried it on Firefox, chrome and IE and still nothing works. I am not using third party widgets just everything out of the box muse has to offer. I have a fixed width site at 1200px 1024px 840px and fluid a fluid breakpoint at 768px that will take care of mobile.  Please help whereas I have been working on this issue now for over 2 weeks and can get nothing to work. Thanks for the help and quick responses.

i can add screen shots later however do not have hosting paid for yet just have the URL bought. Wanted to template everything out first.