Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug: Responsive stat component not functional with CDN import #1205

Closed
adrian-nilsson-fcc opened this issue Oct 4, 2022 · 3 comments
Closed

Bug: Responsive stat component not functional with CDN import #1205

adrian-nilsson-fcc opened this issue Oct 4, 2022 · 3 comments

Comments

@adrian-nilsson-fcc
Copy link

Current behaviour

Tailwind breakpoints do not seem to apply to the responsive stat classes when Daisy and Tailwind are imported via CDN.

An MWE using the example component from the documentation with some added margin:

<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=devide-width, initial-scale=1.0" />
  <link href="https://cdn.jsdelivr.net/npm/daisyui@2.31.0/dist/full.css" rel="stylesheet" type="text/css" />
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class="m-10 stats stats-vertical lg:stats-horizontal shadow">

    <div class="stat">
      <div class="stat-title">Downloads</div>
      <div class="stat-value">31K</div>
      <div class="stat-desc">Jan 1st - Feb 1st</div>
    </div>

    <div class="stat">
      <div class="stat-title">New Users</div>
      <div class="stat-value">4,200</div>
      <div class="stat-desc">↗︎ 400 (22%)</div>
    </div>

    <div class="stat">
      <div class="stat-title">New Registers</div>
      <div class="stat-value">1,200</div>
      <div class="stat-desc">↘︎ 90 (14%)</div>
    </div>

  </div>
</body>

</html>

This stat component is displayed vertically regardless of the size of the window.
Tested on several browsers (Firefox, Edge, and Chrome).

Expected behaviour

The component works as expected in Tailwind Play.
That is, horizontal for large screens and vertical otherwise.

Other

I noted that #807 looks like a similar issue for a different component.
@NikarashiHatsu NikarashiHatsu mentioned this issue Oct 6, 2022
Merged
@NikarashiHatsu
Copy link
Contributor

Yea, this is definitely the CDN build issue.
It's a simple fix so I did a PR to fix this issue.

@NikarashiHatsu
Copy link
Contributor

Ah, I forgot to mention @saadeghi I have worked into this issue, I'm sorry for skipping the contribution guideline.
I did make a PR in #1211 regarding this issue.

@saadeghi
Copy link
Owner

Fixed in 2.36.1

Thank you @NikarashiHatsu

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@saadeghi @NikarashiHatsu @adrian-nilsson-fcc