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

Ask the community
,
11

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.