Can you design the disabled state on prev/next buttons?

[Aaron_Johns]

Hello. I have a dynamic page with ‘Previous’ and ‘Next’ buttons. When you’re either at the start or end of the list the relevant button is disabled. How does one change the styling of that disabled state? At the moment it has an ugly white background, but I’d rather it have a transparent or coloured background to match the page. What am I missing?

Wix Studio

[Dan_Suhr]

What editor are you using ? There should be a disabled state section that you can edit the button.

[Aaron_Johns]

This is Wix Studio. if I look under ‘Button State’ there’s only Regular and Hover…

[Dan_Suhr]

Is that from a template ? the previous next buttons ?

if you add your own buttons, either basic or styled. connect them to the cms action for next and previous. You can then edit to suit your requirements.

[Aaron_Johns]

How odd. Even if I add a brand new custom button I only get the two options. Connecting to CMS and assigning next or previous makes no difference. Is there a setting for this somewhere? Or do those state options only show under certain circumstances?

[Dan_Suhr]

weird…the disabled state always shows on the editor for me. What browser are you using ?

[Aaron_Johns]

Chrome on Mac. My colleague is using Chrome on Windows and sees the same two options. I’ve tried multiple sites both old and new, none of them give me the disabled option. Could this be a new feature that only some users can see? Or an old one they’ve taken away? Very strange.

[user3829]

i have the same problem with firefox on windows. wish i was making this up.

[aaron-jackson]

Turning on Developer Mode helped for me.

[so1]

This is the fix everyone!

[Jessica_W]

This solution no longer works. Dev mode is no longer where it used to be, and after consulting this thread: Dev Mode is not available any more on Wix Editor , turning on coding does not reveal the disabled state for the previous/next buttons on dynamic pages. Because (I think) Wix buttons render inside a shadow DOM, external CSS isn’t working. I had a little bit of success with this code:

.hidewhitebg.button:disabled {
  background-color: transparent;
}

But it doesn’t always work and seems to break if the system is ever updated. On one of my sites, it is currently only hiding the white background on the first item page, but the last item page the disabled “next” button still shows the white background.

Below, this code collapses/hides the disabled previous/next buttons altogether but it does not make for a great UX and can be super confusing (replace your button IDs with your own, replace your dynamic dataset ID with your own, and your wix.Data.query with the name of your own CMS database.

import wixData from 'wix-data';

$w.onReady(async function () {
    const prevBtn = $w('#button13');
    const nextBtn = $w('#button2');

    prevBtn.collapse();
    nextBtn.collapse();

    $w('#dynamicDataset').onReady(async () => {
        const currentItem = $w('#dynamicDataset').getCurrentItem();

        const result = await wixData.query('Leadership')
            .ascending('_manualSort_44f6ddbe-2b88-48bf-a087-3976ae429015')
            .find();

        if (result.items.length > 0) {
            const firstItem = result.items[0];
            const lastItem = result.items[result.items.length - 1];

            if (currentItem._id !== firstItem._id) prevBtn.expand();
            if (currentItem._id !== lastItem._id) nextBtn.expand();
        }
    });
});

Would be super nice if we could just edit the design of the disabled buttons right in the editor. I can’t see anything in the project roadmap that addresses this and my request to add one was denied.