Skip to content

FormattedString inside Button has wrong background color after animation #4938

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
Closed
doumr opened this issue Oct 11, 2017 · 9 comments
Closed

FormattedString inside Button has wrong background color after animation #4938

doumr opened this issue Oct 11, 2017 · 9 comments
Labels
backlog bug help wanted severity: low

Comments

@doumr
Copy link

doumr commented Oct 11, 2017 •
edited by rdlauer
Loading

Did you verify this is a real problem by searching Stack Overflow and the other open issues in this repo?

Yes, I did not found any.

Tell us about the problem

When using Button with FormattedString inside it and the background color of the Button is changed via animation, the background color of the FormattedString is not changed.
obrazek

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

  • CLI: 3.2.1
  • Cross-platform modules: 3.1.1
  • Runtime(s): 3.2.0
  • Plugin(s):
"dependencies": {
    "@angular/animations": "~4.2.0",
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/router": "~4.2.0",
    "nativescript-angular": "~4.2.0",
    "nativescript-theme-core": "~1.0.2",
    "reflect-metadata": "~0.1.8",
    "rxjs": "~5.4.2",
    "tns-core-modules": "~3.1.0",
    "zone.js": "~0.8.2"
  }

This problem was not occuring with the cross-platform modules 3.0.0 and android runtime 3.1.1.

Please tell us how to recreate the issue in as much detail as possible.

Reproduced behavior in playground: https://play.nativescript.org/?id=8cArU2Fb8w0jPjDWXtvV0

  1. Create new {N} application: tns create MyApp --ng
  2. Add Button with FormattedString in it
  3. Animate the background color of the button
  4. The background color of the FormattedString is not changed

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

view:

<Button>
  <FormattedString>
    <Span text="button text"></Span>
  </FormattedString>
</Button>

css:

Button {
    background-color: green;
    animation-name: button-highligh;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

@keyframes button-highligh {
    from { background-color: green; }
    to { background-color: blue; }
}

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
@tsonevn
Copy link
Contributor

tsonevn commented Oct 12, 2017

Hi @doumr,
Thank you for reporting this issue.
I tested this scenario and indeed the backgroundColor of the Span will not be changed properly while using FormattedString with animations. This issue could be reproduced also with non-Angular project while using modules 3.2.0 and @next. I am attaching a project, which could be used for debugging.

For further info, please keep track on the issue.
Archive.zip

@RadouaneRoufid
Copy link

Any solution or workaround for this ?

@tsonevn
Copy link
Contributor

tsonevn commented Feb 9, 2018

Hi @RadouaneRoufid,
At this time there is no available workaround, which could be used for this scenario. However, any PR, which provides a fix will be highly appreciated. For further info, you could also review our contributing guidelines.

@doumr
Copy link
Author

doumr commented Feb 10, 2018

@RadouaneRoufid Actually, I have found a workaround with the tns-core-modules@3.4.0 and tns-android@3.4.1. When you set the background-color property of the FormattedString to transparent (like so <FormattedString style="background-color: transparent;">) then it works as expected.
You can see the workaround in action here: https://play.nativescript.org/?template=play-ng&id=DypmBB&v=3

Therefore I guess this issue can be closed as there is a workaround for this. Do you agree @tsonevn ?

@tsonevn
Copy link
Contributor

tsonevn commented Feb 12, 2018

Hi @doumr,
I am glad to hear that you have found a workaround. However, I think that we should keep the issue open until it is fixed. Also, it would help the other user to find the suggested temporary solution.

@felixkrautschuk
Copy link
Contributor

I also want to use this workaround, but I don't want to define the css in the xml with the style-property.

I tried to write <FormattedString className="formtattedstr-btn"> ... </FormattedString> but the styles are not applied to the Button. The className property is a valid property for FormattedString, so I wonder why this does not work...?

@rynop
Copy link
Contributor

rynop commented Jan 16, 2019

This same bug exists on iOS

@bundyo
Copy link
Contributor

bundyo commented Jun 18, 2019 •
edited
Loading

One possible workaround for all buttons in SCSS can be this:

Button {
    > *,
    > * > * {
        background-color: transparent;
    }
}

FormattedString and Span element selectors do not work, but child selectors still do.

@felix-idf Probably didn't work as the background is set on the Span, not the FormattedString. Setting a class on the Span and using it for the background-color works.

Nevertheless, it would be great if this is fixed.

@bundyo bundyo mentioned this issue Jun 18, 2019
Closed
@CatchABus
Copy link
Contributor

Closed by #10701

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
backlog bug help wanted severity: low
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@bundyo @rynop @felixkrautschuk @doumr @tsonevn @RadouaneRoufid @CatchABus