Some DaisyUI screen modifiers not being applied

Created on 23 February 2025, 14 days ago

Problem/Motivation

Some DaisyUI responsive elements are not being displayed correctly when fetching CSS from Daisy CDN

Steps to reproduce

- Open the Components Library of the UI Suite DaisyUI theme
- Navigate to /admin/appearance/ui/components#ui_suite_daisyui:join

- The "Responsive" display of the joined (grouped) buttons should be horizontal on large screens, but vertical on smaller screens.
- the display is only vertical

By changing the configuration to locally build the projects CSS file, the "Responsive" display of the joined (grouped) buttons is horizontal on large screens, and vertical on smaller screens

Proposed resolution

On inspection of https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.8/daisyui.css there is no specific CSS for the class lg:join; whereas, when building the CSS for the project locally, the build process creates CSS that includes

        .lg\:join-horizontal > .join-item:first-child, .lg\:join-horizontal :first-child:not(:last-child) .join-item {
            --join-ss: var(--radius-field);
            --join-se: 0;
            --join-es: var(--radius-field);
            --join-ee:0
        }

This may be a by product of DaisyUI v5 being in beta.

Remaining tasks

Create a bug report with Daisy UI.

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Active

Version

5.0

Component

Code

Created by

🇱🇺Luxembourg paddy_deburca

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024