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.

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

Not applying color to select #3755

Closed
lolzivkovic opened this issue Mar 26, 2024 · 4 comments
Closed

Not applying color to select #3755

lolzivkovic opened this issue Mar 26, 2024 · 4 comments

Comments

@lolzivkovic
Copy link
Contributor

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma v1.0.0
My browser is: Firefox & Chromium

I am sure this issue is not a duplicate

Description

Select colors like: is-success, is-primary, is-warning, is-danger are not changing color of the select in any way

Steps to Reproduce

Apply "select is-danger" to the div which is a parent of select element.

Expected behavior

Expecting to change the border color and carret down icon color to red.

Actual behavior

It stays the same as no "is-danger" class is being applied.

@veelci
Copy link

veelci commented Mar 28, 2024

This can also be seen in the documentation for select colors.

@brussens
Copy link

@veelci apparently the documentation indicates the class assignment incorrectly.
The following code works fine.

<div class="field">
    <label class="label" for="my-dropdown">My Dropdown</label>
    <div class="control select">
        <select id="my-dropdown" class="select is-danger">
            <option value="">Select value...</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
</div>

In any case, the situation with the need to use an additional wrapper around the select tag is not clear

@willoma
Copy link

willoma commented Apr 23, 2024

With the previous version of Bulma, we did exactly as explained in the docs:

<div class="select is-primary">
  <select>
    <option>Select dropdown</option>
    <option>With options</option>
  </select>
</div>

I think the Bulma v1.0 SASS code is wrong, the previous method should be kept (because of https://bulma.io/documentation/start/migrating-to-v1/#what-remains-the-same).

@willoma
Copy link

willoma commented Apr 23, 2024

The problem is here:

.#{iv.$class-prefix}select select {

this line must be changes to:

.#{iv.$class-prefix}select {

I was about to make a PR, but I don't have the tools installed on my computer right now to generate the CSS files, therefore I think there is no point in doing a partial PR only on this file.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants