Skip to content

CSS pseudo selector :active (alias :highlighted) broken when a button is created with FormattedString #6431

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
NickIliev opened this issue Oct 19, 2018 · 3 comments
Closed

CSS pseudo selector :active (alias :highlighted) broken when a button is created with FormattedString #6431

NickIliev opened this issue Oct 19, 2018 · 3 comments
Labels
backlog bug css severity: low

Comments

@NickIliev
Copy link
Contributor

NickIliev commented Oct 19, 2018 •
edited by rdlauer
Loading

CSS pseudo selector :active (alias :highlighted) broken when btn created with FormattedString

Example
main-page.xml

<Button (tap)="login()" >
            <FormattedString>
                <Span [text]="loginText + '\n'" fontSize="28"></Span>
                <Span [text]="descText" fontSize="12" ></Span>
            </FormattedString>
</Button>

main-page.css

Button {
    background-color:#1b1d1d;
    color: #E8EAEB;
}

Button:active {
    background-color:#E8EAEB;
    color: #1b1d1d;
}

Note: The case seems to be reproducble only when using Button global styles in app.css and a Button created via FormattedString

app.css

Button {
    color: #343838;
}

Demo application demonstrating the above case canb e found here

Broken with tns-core-modules 5.0.0 - working with 4.2.0

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.
@NickIliev NickIliev changed the title CSS pseudo selector :active (alias :highlighted) broken when btn created with FormattedString CSS pseudo selector :active (alias :highlighted) broken when a button is created with FormattedString Oct 19, 2018
@NickIliev
Copy link
Contributor Author

Applicable workaround:

<Button width="70%" dock="left" (tap)="login()" class="m-8" (loaded)="onViewLoaded($event, 200, 0, 200, 0)">
    <!-- using  style="background-color: transparent" to workaround https://github.com/NativeScript/NativeScript/issues/6431-->
    <FormattedString style="background-color: transparent">
                <Span [text]="loginText + '\n'" fontSize="28" textWrap="true"></Span>
                <Span [text]="descText" fontSize="12" ></Span>
    </FormattedString>
</Button>

@bundyo
Copy link
Contributor

bundyo commented Jun 18, 2019

CSS only workaround in #4938.

@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 css severity: low
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@bundyo @tsonevn @NickIliev @CatchABus