How to Hide Useless "Next" and "Back" Buttons in UNA CMS Modules

📌 Next and Back Buttons (or Arrows) Still Visible When No More Content Is Available in UNA

In UNA 14.0.0-RC2, I noticed that pagination buttons like “Next”, “Back”, and image navigation arrows remain visible even when there’s no more content to display. This issue existed before in Dolphin CMS and was fixed there, but it still persists in UNA.

These buttons don’t cause any errors, but they also don’t do anything which makes them useless and confusing for users when there’s nothing left to show.

🔍 Steps to Reproduce:

For paginated content modules (like Albums, Videos, Files, Posts):

1. Open any module that uses pagination (e.g. an image album).
2. Navigate through the pages using the Next and Back buttons.
3. Once you reach the last page or first page, notice that the buttons remain visible even though there’s no more content.

For image galleries in albums:

1. Open an image album.
2. Click through images using the Next Image arrow.
3. When you reach the last image, the arrow is still visible, even though there’s no more images.
4. The same happens with the Previous Image arrow at the first image.

✅ Expected Behavior:

• Next and Back buttons should disappear or be disabled when no further pages are available.
• Next Image and Previous Image arrows in albums should also disappear or be disabled when reaching the last or first image.

🛠️ Temporary CSS Fix for Pagination Buttons:

Thanks to a suggestion from @LeonidS on the UNA forums, this can be quickly addressed by adding a simple CSS rule.

Add this code inside the main.css file located at:

modules/boonex/albums/template/css/

CSS Code:

.bx-btn-disabled {
    display: none !important;
}

Explanation:

The .bx-btn-disabled class is already applied to these buttons when there’s no content left. However, due to how tailwind.css and other styles load, the buttons might still show.

Adding this custom rule with !important ensures that disabled buttons are completely hidden when needed.

📌 Applies to Other Modules Too:

This fix is not only for the Albums module it can be applied to any other UNA module that uses pagination.

Modules like Videos, Photos, Files, Posts, and others with paginated lists can all benefit from this small tweak to improve UX and avoid showing buttons that don’t work.

💡 Suggestion for Core Improvement:

Ideally, this should be handled at the template at css level, by either:

• Hiding the button or arrow entirely when it’s not needed, or
• Disabling it visually and functionally (with proper opacity and cursor changes).

That way, the interface remains clean, intuitive, and consistent across all UNA modules.

Although I reported this issue back in UNA 14.0.0-RC2, and now we’re at the so-called final release 14.0.0, I can see it still hasn’t been resolved. While it’s not a critical bug, it’s an important functionality issue seeing buttons or arrows that do nothing is not a pleasant user experience. I accidentally deleted that post, but it's time to repost it.

https://web.archive.org/web/20250121021523/https://unacms.com/d/next-image-arrow-still-visible-at-the-end

🛠️ Temporary CSS Fix: Command to Apply This CSS Rule to All BoonEx Modules in UNA (experimental)

If you want to automatically add this CSS rule to the main.css file inside every BoonEx module in UNA, you can use the following command:

SSH Command:

find modules/boonex/ -type f -path "*/template/css/main.css" -exec sed -i '$ a\
.bx-btn-disabled {\n    display: none !important;\n}' {} \;

📖 Explanation:

• find modules/boonex/ -type f -path "*/template/css/main.css" → searches for all main.css files inside the template/css/ folders of every BoonEx module.
• -exec sed -i → directly edits each file in place.
• '$ a\ ...' → appends the following lines to the end of each file:

.bx-btn-disabled {
    display: none !important;
}

🔍 If you want to check which files will be affected first:

find modules/boonex/ -type f -path "*/template/css/main.css"

If everything looks good, run the main command to apply the changes.

Optional:

If you want this to work for all modules under modules/ (not just boonex/), simply replace modules/boonex/ with modules/custom/ in the command.

⚠️ IMPORTANT NOTICE

• 🚨 These commands and configuration changes are for informational purposes or development.
• 💾 They DO NOT represent an official setup guide.
• ⚙️ Run them ONLY if you fully understand what they do.
• ❗ Use at your own risk. Adjust if necessary.
• 👉 This example is intended for advanced users only.