bulma-o-steps
bulma-o-steps copied to clipboard
Removes border from form input elements
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 |
---|---|
![]() |
![]() |
Bulma version: 0.7.1
@tr33m4n noted! Will look into it. Thank you!
same problem here, do you have any workaround?
@tr33m4n @shazha could you show the offending HTML? I cannot replicate.
@octoshrimpy ,here's how I reproduce the bug:
- create a empty project using The Vue-cli v3
- add
bulma
andbulimia-o-steps
as dependencies and import them in App.vue - 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>
- navigate to the newly added page and you can now see the input border is gone
Seems it's caused by the border: 1px solid transparent
line as shown below:
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
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. :)
@shazha and @tr33m4n can one of you confirm if the latest version has the same bug?
@octoshrimpy I'm a bit tied up at the moment to test this unfortunately, I'll update if I get chance over the weekend 👍
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.