Styling PrimeNG p-tabView
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
1
I fail to style the text of a PrimeNG TabView.
Here's the Stackblitz showing the problem.
What am I missing?
css primeng tabview
edited Dec 2 '18 at 17:20
Antikhippe
3,45911332
asked Nov 22 '18 at 11:49
Horse BadortiesHorse Badorties
687
add a comment |
1
I fail to style the text of a PrimeNG TabView.
Here's the Stackblitz showing the problem.
What am I missing?
css primeng tabview
edited Dec 2 '18 at 17:20
Antikhippe
3,45911332
asked Nov 22 '18 at 11:49
Horse BadortiesHorse Badorties
687
add a comment |
1
1
1
0
I fail to style the text of a PrimeNG TabView.
Here's the Stackblitz showing the problem.
What am I missing?
css primeng tabview
edited Dec 2 '18 at 17:20
Antikhippe
3,45911332
asked Nov 22 '18 at 11:49
Horse BadortiesHorse Badorties
687
I fail to style the text of a PrimeNG TabView.
Here's the Stackblitz showing the problem.
What am I missing?
css primeng tabview
css primeng tabview
edited Dec 2 '18 at 17:20
Antikhippe
3,45911332
asked Nov 22 '18 at 11:49
Horse BadortiesHorse Badorties
687
edited Dec 2 '18 at 17:20
Antikhippe
3,45911332
asked Nov 22 '18 at 11:49
Horse BadortiesHorse Badorties
687
edited Dec 2 '18 at 17:20
Antikhippe
3,45911332
edited Dec 2 '18 at 17:20
Antikhippe
3,45911332
edited Dec 2 '18 at 17:20
Antikhippe
3,45911332
3,45911332
asked Nov 22 '18 at 11:49
Horse BadortiesHorse Badorties
687
asked Nov 22 '18 at 11:49
Horse BadortiesHorse Badorties
687
asked Nov 22 '18 at 11:49
Horse BadortiesHorse Badorties
687
687
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
1
One way to solve your problem is to override PrimeNG class concerning tabview title : ui-tabview-title.
So something like
.ui-tabview-title {
color: red;
}
should do the trick. Be sure to call that CSS after PrimeNG one.
Edit
You can apply CSS on first tab header with :first-child property :
ul.ui-tabview-nav li:first-child span {
color: red;
}
See working StackBlitz.
answered Dec 2 '18 at 17:23
AntikhippeAntikhippe
3,45911332
Thanks for your answer. Not sure I get what you mean by "call that CSS after PrimeNG one" though. Putting it into app.component.css does not change anything. And wouldn't overriding the class make all three tab captions red? I wanted to have it for the first tab only.
– Horse Badorties
Dec 2 '18 at 19:03
I forked your StackBlitz to give more details.
– Antikhippe
Dec 2 '18 at 20:44
I've accepted your answer since it's at least a workaround, thanks. Although I'm not happy to "pollute" my app-global style.css with component-specific styles and if I'd happen to have another tab pane in another component that would pick up that style as well. Could you imaging a solution isolated to that very component?
– Horse Badorties
Dec 3 '18 at 7:28
I edited the StackBlitz. Addencapsulation: ViewEncapsulation.Nonein your component. ;)
– Antikhippe
Dec 3 '18 at 7:44
perfect, thanks!
– Horse Badorties
Dec 3 '18 at 8:06
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53430376%2fstyling-primeng-p-tabview%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
One way to solve your problem is to override PrimeNG class concerning tabview title : ui-tabview-title.
So something like
.ui-tabview-title {
color: red;
}
should do the trick. Be sure to call that CSS after PrimeNG one.
Edit
You can apply CSS on first tab header with :first-child property :
ul.ui-tabview-nav li:first-child span {
color: red;
}
See working StackBlitz.
answered Dec 2 '18 at 17:23
AntikhippeAntikhippe
3,45911332
Thanks for your answer. Not sure I get what you mean by "call that CSS after PrimeNG one" though. Putting it into app.component.css does not change anything. And wouldn't overriding the class make all three tab captions red? I wanted to have it for the first tab only.
– Horse Badorties
Dec 2 '18 at 19:03
I forked your StackBlitz to give more details.
– Antikhippe
Dec 2 '18 at 20:44
I've accepted your answer since it's at least a workaround, thanks. Although I'm not happy to "pollute" my app-global style.css with component-specific styles and if I'd happen to have another tab pane in another component that would pick up that style as well. Could you imaging a solution isolated to that very component?
– Horse Badorties
Dec 3 '18 at 7:28
I edited the StackBlitz. Addencapsulation: ViewEncapsulation.Nonein your component. ;)
– Antikhippe
Dec 3 '18 at 7:44
perfect, thanks!
– Horse Badorties
Dec 3 '18 at 8:06
add a comment |
1
One way to solve your problem is to override PrimeNG class concerning tabview title : ui-tabview-title.
So something like
.ui-tabview-title {
color: red;
}
should do the trick. Be sure to call that CSS after PrimeNG one.
Edit
You can apply CSS on first tab header with :first-child property :
ul.ui-tabview-nav li:first-child span {
color: red;
}
See working StackBlitz.
answered Dec 2 '18 at 17:23
AntikhippeAntikhippe
3,45911332
Thanks for your answer. Not sure I get what you mean by "call that CSS after PrimeNG one" though. Putting it into app.component.css does not change anything. And wouldn't overriding the class make all three tab captions red? I wanted to have it for the first tab only.
– Horse Badorties
Dec 2 '18 at 19:03
I forked your StackBlitz to give more details.
– Antikhippe
Dec 2 '18 at 20:44
I've accepted your answer since it's at least a workaround, thanks. Although I'm not happy to "pollute" my app-global style.css with component-specific styles and if I'd happen to have another tab pane in another component that would pick up that style as well. Could you imaging a solution isolated to that very component?
– Horse Badorties
Dec 3 '18 at 7:28
I edited the StackBlitz. Addencapsulation: ViewEncapsulation.Nonein your component. ;)
– Antikhippe
Dec 3 '18 at 7:44
perfect, thanks!
– Horse Badorties
Dec 3 '18 at 8:06
add a comment |
1
1
1
One way to solve your problem is to override PrimeNG class concerning tabview title : ui-tabview-title.
So something like
.ui-tabview-title {
color: red;
}
should do the trick. Be sure to call that CSS after PrimeNG one.
Edit
You can apply CSS on first tab header with :first-child property :
ul.ui-tabview-nav li:first-child span {
color: red;
}
See working StackBlitz.
answered Dec 2 '18 at 17:23
AntikhippeAntikhippe
3,45911332
One way to solve your problem is to override PrimeNG class concerning tabview title : ui-tabview-title.
So something like
.ui-tabview-title {
color: red;
}
should do the trick. Be sure to call that CSS after PrimeNG one.
Edit
You can apply CSS on first tab header with :first-child property :
ul.ui-tabview-nav li:first-child span {
color: red;
}
See working StackBlitz.
answered Dec 2 '18 at 17:23
AntikhippeAntikhippe
3,45911332
edited Dec 3 '18 at 7:43
answered Dec 2 '18 at 17:23
AntikhippeAntikhippe
3,45911332
answered Dec 2 '18 at 17:23
AntikhippeAntikhippe
3,45911332
answered Dec 2 '18 at 17:23
AntikhippeAntikhippe
3,45911332
3,45911332
Thanks for your answer. Not sure I get what you mean by "call that CSS after PrimeNG one" though. Putting it into app.component.css does not change anything. And wouldn't overriding the class make all three tab captions red? I wanted to have it for the first tab only.
– Horse Badorties
Dec 2 '18 at 19:03
I forked your StackBlitz to give more details.
– Antikhippe
Dec 2 '18 at 20:44
I've accepted your answer since it's at least a workaround, thanks. Although I'm not happy to "pollute" my app-global style.css with component-specific styles and if I'd happen to have another tab pane in another component that would pick up that style as well. Could you imaging a solution isolated to that very component?
– Horse Badorties
Dec 3 '18 at 7:28
I edited the StackBlitz. Addencapsulation: ViewEncapsulation.Nonein your component. ;)
– Antikhippe
Dec 3 '18 at 7:44
perfect, thanks!
– Horse Badorties
Dec 3 '18 at 8:06
add a comment |
Thanks for your answer. Not sure I get what you mean by "call that CSS after PrimeNG one" though. Putting it into app.component.css does not change anything. And wouldn't overriding the class make all three tab captions red? I wanted to have it for the first tab only.
– Horse Badorties
Dec 2 '18 at 19:03
I forked your StackBlitz to give more details.
– Antikhippe
Dec 2 '18 at 20:44
I've accepted your answer since it's at least a workaround, thanks. Although I'm not happy to "pollute" my app-global style.css with component-specific styles and if I'd happen to have another tab pane in another component that would pick up that style as well. Could you imaging a solution isolated to that very component?
– Horse Badorties
Dec 3 '18 at 7:28
I edited the StackBlitz. Addencapsulation: ViewEncapsulation.Nonein your component. ;)
– Antikhippe
Dec 3 '18 at 7:44
perfect, thanks!
– Horse Badorties
Dec 3 '18 at 8:06
Thanks for your answer. Not sure I get what you mean by "call that CSS after PrimeNG one" though. Putting it into app.component.css does not change anything. And wouldn't overriding the class make all three tab captions red? I wanted to have it for the first tab only.
– Horse Badorties
Dec 2 '18 at 19:03
Thanks for your answer. Not sure I get what you mean by "call that CSS after PrimeNG one" though. Putting it into app.component.css does not change anything. And wouldn't overriding the class make all three tab captions red? I wanted to have it for the first tab only.
– Horse Badorties
Dec 2 '18 at 19:03
I forked your StackBlitz to give more details.
– Antikhippe
Dec 2 '18 at 20:44
I forked your StackBlitz to give more details.
– Antikhippe
Dec 2 '18 at 20:44
I've accepted your answer since it's at least a workaround, thanks. Although I'm not happy to "pollute" my app-global style.css with component-specific styles and if I'd happen to have another tab pane in another component that would pick up that style as well. Could you imaging a solution isolated to that very component?
– Horse Badorties
Dec 3 '18 at 7:28
I've accepted your answer since it's at least a workaround, thanks. Although I'm not happy to "pollute" my app-global style.css with component-specific styles and if I'd happen to have another tab pane in another component that would pick up that style as well. Could you imaging a solution isolated to that very component?
– Horse Badorties
Dec 3 '18 at 7:28
I edited the StackBlitz. Add
encapsulation: ViewEncapsulation.None in your component. ;)– Antikhippe
Dec 3 '18 at 7:44
I edited the StackBlitz. Add
encapsulation: ViewEncapsulation.None in your component. ;)– Antikhippe
Dec 3 '18 at 7:44
perfect, thanks!
– Horse Badorties
Dec 3 '18 at 8:06
perfect, thanks!
– Horse Badorties
Dec 3 '18 at 8:06
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53430376%2fstyling-primeng-p-tabview%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
