Styling of dropdown item changes when I inspect it in Chrome Devtools
Background
I'm working on an early-in-development Django + Vue website that uses the Maisonette Bootstrap theme. Part of the website is regular Django-rendered templates, and part of the website is a single-page app.
I've been tasked with making the navbar for the Vue single-page app match the navbar in the Maisonette theme.
The Problem
When I view the navbar dropdown in the SPA and hover over the different items, the styling is not correct; each dropdown item, when hovered over, should have a purple background. Instead the font color changes to a brighter white (see image below):
What's bizarre is that when I try to inspect the element in Chrome Devtools, it immediately switches to using the correct styling (see image below):
This behavior is only occurring in the SPA; the strictly-Django part of the website is displaying the dropdown items correctly.
My guess at what's going on
My suspicion is that this has something to do with the bundling of the app, but I'm not sure.
css bootstrap-4
google-chrome-devtools bootstrap-vue asked Nov 22 at 9:42
Nathan Wailes
1,50721133
add a comment |
Background
I'm working on an early-in-development Django + Vue website that uses the Maisonette Bootstrap theme. Part of the website is regular Django-rendered templates, and part of the website is a single-page app.
I've been tasked with making the navbar for the Vue single-page app match the navbar in the Maisonette theme.
The Problem
When I view the navbar dropdown in the SPA and hover over the different items, the styling is not correct; each dropdown item, when hovered over, should have a purple background. Instead the font color changes to a brighter white (see image below):
What's bizarre is that when I try to inspect the element in Chrome Devtools, it immediately switches to using the correct styling (see image below):
This behavior is only occurring in the SPA; the strictly-Django part of the website is displaying the dropdown items correctly.
My guess at what's going on
My suspicion is that this has something to do with the bundling of the app, but I'm not sure.
css bootstrap-4
google-chrome-devtools bootstrap-vue asked Nov 22 at 9:42
Nathan Wailes
1,50721133
add a comment |
Background
I'm working on an early-in-development Django + Vue website that uses the Maisonette Bootstrap theme. Part of the website is regular Django-rendered templates, and part of the website is a single-page app.
I've been tasked with making the navbar for the Vue single-page app match the navbar in the Maisonette theme.
The Problem
When I view the navbar dropdown in the SPA and hover over the different items, the styling is not correct; each dropdown item, when hovered over, should have a purple background. Instead the font color changes to a brighter white (see image below):
What's bizarre is that when I try to inspect the element in Chrome Devtools, it immediately switches to using the correct styling (see image below):
This behavior is only occurring in the SPA; the strictly-Django part of the website is displaying the dropdown items correctly.
My guess at what's going on
My suspicion is that this has something to do with the bundling of the app, but I'm not sure.
css bootstrap-4
google-chrome-devtools bootstrap-vue asked Nov 22 at 9:42
Nathan Wailes
1,50721133
Background
I'm working on an early-in-development Django + Vue website that uses the Maisonette Bootstrap theme. Part of the website is regular Django-rendered templates, and part of the website is a single-page app.
I've been tasked with making the navbar for the Vue single-page app match the navbar in the Maisonette theme.
The Problem
When I view the navbar dropdown in the SPA and hover over the different items, the styling is not correct; each dropdown item, when hovered over, should have a purple background. Instead the font color changes to a brighter white (see image below):
What's bizarre is that when I try to inspect the element in Chrome Devtools, it immediately switches to using the correct styling (see image below):
This behavior is only occurring in the SPA; the strictly-Django part of the website is displaying the dropdown items correctly.
My guess at what's going on
My suspicion is that this has something to do with the bundling of the app, but I'm not sure.
css bootstrap-4
google-chrome-devtools bootstrap-vue css bootstrap-4
google-chrome-devtools bootstrap-vue asked Nov 22 at 9:42
Nathan Wailes
1,50721133
asked Nov 22 at 9:42
Nathan Wailes
1,50721133
asked Nov 22 at 9:42
Nathan Wailes
1,50721133
asked Nov 22 at 9:42
Nathan Wailes
1,50721133
asked Nov 22 at 9:42
Nathan Wailes
1,50721133
1,50721133
add a comment |
add a comment |
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',
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
});
}
});
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%2f53427930%2fstyling-of-dropdown-item-changes-when-i-inspect-it-in-chrome-devtools%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
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%2f53427930%2fstyling-of-dropdown-item-changes-when-i-inspect-it-in-chrome-devtools%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
