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.

Sign up for GitHub

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

Jump to bottom

Loading class on buttons with tooltip create wrong effect #649

Open
endorama opened this issue Sep 21, 2020 · 3 comments · May be fixed by #650
Open

Loading class on buttons with tooltip create wrong effect #649

endorama opened this issue Sep 21, 2020 · 3 comments · May be fixed by #650

Comments

@endorama
Copy link

Hello, while applying loading to a btn with a tooltip configured I observe this behaviour:

Screenshot from 2020-09-21 23-38-10

Apart from the tooltip class, all other tooltip position modifier are affecting the loader.

I'm using spectre.css v0.5.9.
@endorama
Copy link
Author

This is due to the left: 100% rule assigned to tooltip-<mod>::after. The rule is applied to move the tooltip away from the button itself, but breaks the loader.

I was able to solve this by setting left: 50% !important and top: 50% !important in the .loading::after class.

Screenshot from 2020-09-21 23-47-18

A (probably unwanted) side effect of applying the loading class to a btn with tooltip is also that the tooltip is not displayed, I suspect due to a conflict of CSS rules. I don't think this is an issue (is somewhat expected due to the CSS only nature of the framework).

I can provide a PR if interested in the fix.

@nodgear
Copy link

nodgear commented Sep 26, 2020

@endorama can you make a pull request with the fix?

@endorama
Copy link
Author

endorama commented Oct 7, 2020

Absolutely yes. I just wanted to open an issue first to discuss it before rushing an implementation.

PS: I see this repo is not participating in Hacktoberfest (from this year is opt-in), you may be interested in checking that out.

endorama added a commit to endorama/spectre that referenced this issue Oct 7, 2020
@endorama
make loading element position important
f2fd745 
When the `.loading` class is applied to a `.tooltip`, the loading element
is wrongly positioned. This is due to the `left` and `top` rules in the
`.tooltip::after` class.

Solution to this issue is to set `!important` to `left` and `top` rules
in the `.loading::after` class.

Fixes picturepan2#649
@endorama endorama linked a pull request Oct 7, 2020 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

make loading element position important endorama/spectre
2 participants
@endorama @nodgear