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

Removes border from form input elements #9

Open
tr33m4n opened this issue Aug 26, 2018 · 8 comments
Open

Removes border from form input elements #9

tr33m4n opened this issue Aug 26, 2018 · 8 comments
Assignees
Labels
bug Something isn't working possible fix

Comments

@tr33m4n
Copy link

tr33m4n commented Aug 26, 2018

Hi there,

I've encountered a bug whilst using your fork. When using the steps in conjunction with a form, it appears that some of the default input border styles get overridden, although the input hover border remains, see the following:

Missing Input Border Input Hover
image image

Bulma version: 0.7.1

@octoshrimpy
Copy link
Owner

@tr33m4n noted! Will look into it. Thank you!

@octoshrimpy octoshrimpy self-assigned this Aug 29, 2018
@octoshrimpy octoshrimpy added the bug Something isn't working label Aug 29, 2018
@shazha
Copy link

shazha commented Sep 17, 2018

same problem here, do you have any workaround?

@octoshrimpy
Copy link
Owner

@tr33m4n @shazha could you show the offending HTML? I cannot replicate.

@shazha
Copy link

shazha commented Sep 25, 2018

@octoshrimpy ,here's how I reproduce the bug:

  1. create a empty project using The Vue-cli v3
  2. add bulma and bulimia-o-steps as dependencies and import them in App.vue
  3. add a new route and a clean view page with the following template:
<template>
        <div class="field">
                        <div class="control">
                            <label>field</label>
                            <input
                                class="input"
                                type="text" placeholder="type here">
                        </div>
    </div>
</template>
  1. navigate to the newly added page and you can now see the input border is gone

screen shot 2018-09-25 at 9 06 27 am

Seems it's caused by the border: 1px solid transparent line as shown below:
screen shot 2018-09-25 at 9 07 00 am

I guess it's introduced by the following code in bulma-o-steps/styles/utilies/controls.sass:

%control
  -moz-appearance: none
  -webkit-appearance: none
  align-items: center
  border: $control-border-width solid transparent
  border-radius: $control-radius

Hope it helps

@octoshrimpy
Copy link
Owner

The utilities folder is code copied straight from bulma's own utilities... hmm... I still haven't managed to replicate, so I can't test for a fix. I've removed the offending line, and nothing seems broken. Will be pushing to npm later today. Please let me know if it is fixed. :)

@octoshrimpy
Copy link
Owner

@shazha and @tr33m4n can one of you confirm if the latest version has the same bug?

@tr33m4n
Copy link
Author

tr33m4n commented Jan 17, 2019

@octoshrimpy I'm a bit tied up at the moment to test this unfortunately, I'll update if I get chance over the weekend 👍

@zaclem01
Copy link

I'm not sure if this is still an issue for people, but the import order can cause this if you're using Bulma modularly. Make sure to import the utilities before importing the forms. If the order is switched, you'll see this behavior.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working possible fix
Projects
None yet
Development

No branches or pull requests

4 participants