Unabel to perform actions on buttons (disable/enable - collapse/expand - hide/show)

Ask the community
,
1

Hey, I have had problems in the new (text/vector) button for a long time, being unable to to hide, show, collapse, expand, enable and disable.

Setting the button’s ’ collapsed on load ’ properity to true shifts the button to the far left gridline, also disabling the button doesn’t have any “visual” effect, the button looks as if it’s enabled - I’ve reported this bug previously in my “Wishlist App” post - , and now for some reasons, I can’t change any of their properties through the element properties panel or by code.

Here’s an example, setting the buttons labels works just fine:

$w('#articlesDataset').onReady(async () => {
        let total = $w('#articlesDataset').getTotalCount();

        if (total <= 7) { $w('#goToAllArticles').hide(); }
                $w('#articlesDataset').getItems(0, 7).then((result) => {
                let items = result.items;
                let totalCount = result.totalCount;
 
                for (let i = 0; i < totalCount; i++) {
                               let label = items[i].title;
                               let link = items[i]['link-support-articles-title'];

                               // Set the label and link based on the element Id;
                               let elementId = `#topArt${String(i+1)}`;
                               $w(elementId).label = label;
                               $w(elementId).link = link;                          
            }
        })

    })

But setting any other property of the buttons failed and had no effects whatsoever.
Here’s the code that it’s not working:

function hideButtons() {

 // Hide articles buttons - These are the 7 buttons in the picture above
       for (let i = 0; i < 7; i++) {
             let topArt = `#topArt${String(i+1)}`;
             let knownIssues = `#knownIssues${String(i+1)}`;
             let solvedArt = `#solvedArt${String(i+1)}`;
             $w(topArt, knownIssues, solvedArt).hide();        
    }
// These are the buttons that shows "View More"
    $w('#goToAllArticles, #toKnownIssues, #goToSolvedIssues').hide();
 
}

And yes I did try to hide them individually but that didn’t work either.

Please fix these and/or other bugs before rushing to release new features.
This button is so powerful, but it’s buggy as hell. It’d be nice if we can change the vector inside the button, but this is a topic for another day.

Thanks all for reading, hope this issue get fixed soon.
Ahamd

2

Please post the editor URL of your site. Only authorized Wix personnel can get access to your site in the editor. Please include the name of the page involved.

3

Hey @yisrael-wix , thanks for your reply.
You can access the editor here .

The page is “Contact Us” > “Help Center”.
The targeted part:

  • Lines 10-12.

  • Lines 50-63

Thanks:
Ahmad

4

@ahmadnasriya It’s a bit difficult following what’s going on since there are many component and a lot of code. I took a look and…

First, the $w(‘#topBox’) shows invalid selector since it does not have an exposed API.

The issue with the buttons is a little strange. I tried a test page with a Hoverbox with buttons and I as able to hide/show the buttons. Perhaps it’s because the buttons are inside a Hoverbox which is inside a Column, which is inside a Strip.

I am sending this on to QA for evaluation to see what they have to say.

5

@yisrael-wix Thank you for checking it out.

It’s really weird, I’ve replaced the the hover boxes with Multi-State Boxes and created my own hover boxes, and used repeaters inside each new box - Since you can’t add repeaters inside hover boxes - and used the built-in animation feature in the Multi-State Boxes to create a transition effect, it’s working on Preview Mode, but the transition is not working on the live site, I get this error on the live website:

Required skin wasn’t loaded yet wysiwyg.viewer.skins.area.DefaultAreaSkin

I don’t know if it’s the reason though.

Thanks.
Ahmad

6

Hi @ahmadnasriya . It looks like there is a bug with hiding components, which are placed inside “hover” state of the hoverbox component. I’ve reported this case to our development team to fix.

As a possible workaround I’d suggest to use collapse() function instead of hide() and secure the perimeter of the hover-box component from collapsing by extending the title text component with the lower handle bar . Or use a different type of container (regular box, multistate, slideshow box) instead of the hover-box.

Please let me know if any of the above is suitable for your case.

Regards, Alex

7

Thank you Alexander, I used the multi-state box, which is an amazing and powerful tool.

But regarding the buttons, I still don’t know what’s wrong with it.

Anyway, thanks for checking on. :blush: