Angular 7 wrong CSS file being used when moving between pages with duplicate components

up vote
-1
down vote

favorite

I have an angular single page application where when I load the homepage the correct css is applied from homepage.component.css to a table, then i move to another page which has an identical table but with different css but the same classes the new css is applied from dashboard.component.css.
However now when i move back to homepage the css from the dashboard is applied to the table and it looks different.

edited Dec 4 at 14:03

Goncalo Peres

1,3111314

asked Nov 22 at 16:26

Arthur Le Calvez

89111

1

Did you turn off View Encapsulation? Are these different components? Or are this global files? could you provide more details regarding that? usually styles may collide like that; you could solve it by just wrapping the whole content with an id and on the css you just specify everything with the id first
– IvanS95
Nov 22 at 16:32

Yes i did turn off view View Encapsulation because otherwise my CSS wasn't being applied correctly, which makes sense as the issue actually, i will put a class in front
– Arthur Le Calvez
Nov 22 at 16:36

Yeah, wouldn't really recommend turning it off as it may cause more harm than good, but good to know! Let us know if the issue is solved with that!
– IvanS95
Nov 22 at 16:39

putting an id in front worked perfectly, really obvious solution thanks. If i wanted to turn view encapsulationg back on, do you have any idea how i could get my css to work properly, i guess its quite hard to diagnose the issue without seeing my code, but im not really sure which elements would be of use for you to see. I am using the priming library which already has a lot of styling which may be contributing to the issue.
– Arthur Le Calvez
Nov 22 at 16:45

What I usually do in cases where I want to use global styles like that, I go to the styles.css file, and set every rule to apply to the specific id I need, so whenever I need to kinda exclude global styles I just wrap my content with an id like I told you, this is even easier if you use scss, as you just open a css rule with the #id selector first and everything inside will apply only to elements contained in that id
– IvanS95
Nov 22 at 16:50

|
show 2 more comments

up vote
-1
down vote

favorite

edited Dec 4 at 14:03

Goncalo Peres

1,3111314

asked Nov 22 at 16:26

Arthur Le Calvez

89111

1

Did you turn off View Encapsulation? Are these different components? Or are this global files? could you provide more details regarding that? usually styles may collide like that; you could solve it by just wrapping the whole content with an id and on the css you just specify everything with the id first
– IvanS95
Nov 22 at 16:32

Yes i did turn off view View Encapsulation because otherwise my CSS wasn't being applied correctly, which makes sense as the issue actually, i will put a class in front
– Arthur Le Calvez
Nov 22 at 16:36

Yeah, wouldn't really recommend turning it off as it may cause more harm than good, but good to know! Let us know if the issue is solved with that!
– IvanS95
Nov 22 at 16:39

putting an id in front worked perfectly, really obvious solution thanks. If i wanted to turn view encapsulationg back on, do you have any idea how i could get my css to work properly, i guess its quite hard to diagnose the issue without seeing my code, but im not really sure which elements would be of use for you to see. I am using the priming library which already has a lot of styling which may be contributing to the issue.
– Arthur Le Calvez
Nov 22 at 16:45

What I usually do in cases where I want to use global styles like that, I go to the styles.css file, and set every rule to apply to the specific id I need, so whenever I need to kinda exclude global styles I just wrap my content with an id like I told you, this is even easier if you use scss, as you just open a css rule with the #id selector first and everything inside will apply only to elements contained in that id
– IvanS95
Nov 22 at 16:50

|
show 2 more comments

up vote
-1
down vote

favorite

edited Dec 4 at 14:03

Goncalo Peres

1,3111314

asked Nov 22 at 16:26

Arthur Le Calvez

89111

html css angular angular7

edited Dec 4 at 14:03

Goncalo Peres

1,3111314

asked Nov 22 at 16:26

Arthur Le Calvez

89111

edited Dec 4 at 14:03

Goncalo Peres

1,3111314

asked Nov 22 at 16:26

Arthur Le Calvez

89111

edited Dec 4 at 14:03

Goncalo Peres

1,3111314

edited Dec 4 at 14:03

Goncalo Peres

1,3111314

edited Dec 4 at 14:03

Goncalo Peres

1,3111314

asked Nov 22 at 16:26

Arthur Le Calvez

89111

asked Nov 22 at 16:26

Arthur Le Calvez

89111

asked Nov 22 at 16:26

Arthur Le Calvez

89111

1

Did you turn off View Encapsulation? Are these different components? Or are this global files? could you provide more details regarding that? usually styles may collide like that; you could solve it by just wrapping the whole content with an id and on the css you just specify everything with the id first
– IvanS95
Nov 22 at 16:32

Yes i did turn off view View Encapsulation because otherwise my CSS wasn't being applied correctly, which makes sense as the issue actually, i will put a class in front
– Arthur Le Calvez
Nov 22 at 16:36

Yeah, wouldn't really recommend turning it off as it may cause more harm than good, but good to know! Let us know if the issue is solved with that!
– IvanS95
Nov 22 at 16:39

putting an id in front worked perfectly, really obvious solution thanks. If i wanted to turn view encapsulationg back on, do you have any idea how i could get my css to work properly, i guess its quite hard to diagnose the issue without seeing my code, but im not really sure which elements would be of use for you to see. I am using the priming library which already has a lot of styling which may be contributing to the issue.
– Arthur Le Calvez
Nov 22 at 16:45

What I usually do in cases where I want to use global styles like that, I go to the styles.css file, and set every rule to apply to the specific id I need, so whenever I need to kinda exclude global styles I just wrap my content with an id like I told you, this is even easier if you use scss, as you just open a css rule with the #id selector first and everything inside will apply only to elements contained in that id
– IvanS95
Nov 22 at 16:50

|
show 2 more comments

1

Did you turn off View Encapsulation? Are these different components? Or are this global files? could you provide more details regarding that? usually styles may collide like that; you could solve it by just wrapping the whole content with an id and on the css you just specify everything with the id first
– IvanS95
Nov 22 at 16:32

Yes i did turn off view View Encapsulation because otherwise my CSS wasn't being applied correctly, which makes sense as the issue actually, i will put a class in front
– Arthur Le Calvez
Nov 22 at 16:36

Yeah, wouldn't really recommend turning it off as it may cause more harm than good, but good to know! Let us know if the issue is solved with that!
– IvanS95
Nov 22 at 16:39

putting an id in front worked perfectly, really obvious solution thanks. If i wanted to turn view encapsulationg back on, do you have any idea how i could get my css to work properly, i guess its quite hard to diagnose the issue without seeing my code, but im not really sure which elements would be of use for you to see. I am using the priming library which already has a lot of styling which may be contributing to the issue.
– Arthur Le Calvez
Nov 22 at 16:45

What I usually do in cases where I want to use global styles like that, I go to the styles.css file, and set every rule to apply to the specific id I need, so whenever I need to kinda exclude global styles I just wrap my content with an id like I told you, this is even easier if you use scss, as you just open a css rule with the #id selector first and everything inside will apply only to elements contained in that id
– IvanS95
Nov 22 at 16:50

Did you turn off View Encapsulation? Are these different components? Or are this global files? could you provide more details regarding that? usually styles may collide like that; you could solve it by just wrapping the whole content with an id and on the css you just specify everything with the id first
– IvanS95
Nov 22 at 16:32

Yes i did turn off view View Encapsulation because otherwise my CSS wasn't being applied correctly, which makes sense as the issue actually, i will put a class in front
– Arthur Le Calvez
Nov 22 at 16:36

Yeah, wouldn't really recommend turning it off as it may cause more harm than good, but good to know! Let us know if the issue is solved with that!
– IvanS95
Nov 22 at 16:39

putting an id in front worked perfectly, really obvious solution thanks. If i wanted to turn view encapsulationg back on, do you have any idea how i could get my css to work properly, i guess its quite hard to diagnose the issue without seeing my code, but im not really sure which elements would be of use for you to see. I am using the priming library which already has a lot of styling which may be contributing to the issue.
– Arthur Le Calvez
Nov 22 at 16:45

What I usually do in cases where I want to use global styles like that, I go to the styles.css file, and set every rule to apply to the specific id I need, so whenever I need to kinda exclude global styles I just wrap my content with an id like I told you, this is even easier if you use scss, as you just open a css rule with the #id selector first and everything inside will apply only to elements contained in that id
– IvanS95
Nov 22 at 16:50

|
show 2 more comments

active

oldest

votes

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',
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');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53435001%2fangular-7-wrong-css-file-being-used-when-moving-between-pages-with-duplicate-com%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

active

oldest

votes

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi