bulma-o-steps icon indicating copy to clipboard operation
bulma-o-steps copied to clipboard

Removes border from form input elements

Open tr33m4n opened this issue 6 years ago • 8 comments

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

tr33m4n avatar Aug 26 '18 22:08 tr33m4n

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

octoshrimpy avatar Aug 29 '18 22:08 octoshrimpy

same problem here, do you have any workaround?

shazha avatar Sep 17 '18 10:09 shazha

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

octoshrimpy avatar Sep 20 '18 19:09 octoshrimpy

@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

shazha avatar Sep 25 '18 01:09 shazha

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 avatar Oct 01 '18 19:10 octoshrimpy

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

octoshrimpy avatar Jan 16 '19 23:01 octoshrimpy

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

tr33m4n avatar Jan 17 '19 08:01 tr33m4n

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.

zaclem01 avatar Jul 15 '21 04:07 zaclem01