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

Button icons not centered in v0.8.12 #2257

Closed
chris-doco opened this issue Feb 22, 2020 · 10 comments
Closed

Button icons not centered in v0.8.12 #2257

chris-doco opened this issue Feb 22, 2020 · 10 comments

Comments

@chris-doco
Copy link

Overview of the problem

Buefy version: [0.8.12]
Vuejs version: [2.6.11]
OS/Browser: MacOS 10.15.3/Google Chrome 79.0.3945.130

Description

In the new version 0.8.12 if you have a button with just an icon: e.g.
<b-button type="is-danger" icon-right="delete" />
The button isn't centered anymore.
You can see it here: https://buefy.org/documentation/button/

Steps to reproduce

Create a b-button with just an icon and no text or anything else.
<b-button type="is-danger" icon-right="delete" />

Expected behavior

The icon inside the button should be centered.

Actual behavior

The icon inside the button isn't centered. It is either on the left if you use icon-left or on the right if you use icon-right.

@jtommy jtommy added the bug label Feb 22, 2020
@jtommy
Copy link
Member

jtommy commented Feb 22, 2020

At the moment you might put a b-icon into the button as workaround

@francoism90
Copy link
Contributor

francoism90 commented Feb 24, 2020

This is a bit breaking, I'm using icon-right on a lot on buttons that only should display an icon.
What's the reason behind adding an extra span before the icon?

@jtommy
Copy link
Member

jtommy commented Feb 24, 2020

Only a my fault, I'm sorry

@francoism90
Copy link
Contributor

@jtommy No worries! I was just wondering if one should switch to the workaround as permanent solution. :)

I'll revert the upgrade and wait for a fix. (Y)

@jtommy
Copy link
Member

jtommy commented Feb 24, 2020

No no, I'll restore it

@service-paradis
Copy link
Collaborator

There is an additional space before any content (ex. icons) as seen in the documentation:
image

There is an empty span who should not be there:
image

Needed to use a hack right now to solve buttons having single icon:

.button {
  > span {
    &:empty {
      display: none;

      + span {
        margin-left: -.5rem!important;
      }
    }
  }
}

jtommy added a commit that referenced this issue Feb 25, 2020
@lmarciano9
Copy link

This might be causing the same misalignment if you center a column in a table because of the sorting arrow icon. Taken from the documentation page:

Screenshot_18

@bender-a
Copy link
Contributor

We could fix all of this with the updates to the vue-template-compiler, vue-loader etc.
We can try to handle it with the version we are currently on, but i could not get it to work
See template-compiler options

@sookoll
Copy link

sookoll commented Feb 28, 2020

This workaround doesn't seems to fix it. When we can hope for fixed release?

@emielmolenaar
Copy link

Fix is already in master (454c206) so expect a release anytime soon.

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

No branches or pull requests

8 participants