bootstrap-vue/bootstrap-vuePublic

NotificationsYou must be signed in to change notification settings
Fork1.9k
Star14.5k

Giving the value to "to" prop inside "b-navbar-nav" makes the web page behave in a weird way#6258

AnsweredbyHiws

platput asked this question inQ&A

platput

Dec 27, 2020

· 6 comments· 2 replies

AnsweredbyHiwsReturn to top

Discussion options

platput
Dec 27, 2020

Hello,
So I am using bootstrap-vue in a couple of projects and this is the first and only time I have come across something. I don't understand why. I have the below code inside a component called SiteHeader.

<template><b-navbar toggleable="lg" type="dark" variant="secondary"><b-navbar-brand href="/">Sample Webpage</b-navbar-brand><b-navbar-toggle></b-navbar-toggle><b-collapse is-nav><b-navbar-nav><b-nav-item to="/admin/product/list">Products</b-nav-item><b-nav-item href="#">Orders</b-nav-item></b-navbar-nav><!-- Right aligned nav items --><b-navbar-nav><b-nav-item-dropdown right><!-- Using 'button-content' slot --><template #button-content><em>User Full Name</em></template><b-dropdown-item href="#">Profile</b-dropdown-item><b-dropdown-item href="#">Sign Out</b-dropdown-item></b-nav-item-dropdown></b-navbar-nav></b-collapse></b-navbar></template>

When I load the page, I see the following errors in the console:

Source map error: Error: request failed with status 404 Resource URL:http://localhost:3000/ Source Map URL: bootstrap.css.map
Error while fetching an original source: request failed with status 404 Source URL:

This is what the whole page looks like:

Now as soon as I remove the 'to' prop and use 'href' in the below line the page looks as how it is supposed to look.
<b-nav-item to="/admin/product/list">Products</b-nav-item>

This is what the page looks like now:

Versions

BootstrapVue: 2.21.1
Bootstrap: 4.5.3
Vue: 2.6.12
Nuxt: 2.14.12

Environment:

Device: Mac
OS: macOS Big Sur
Browser: Firefox and Safari

You must be logged in to vote

Answered by Hiws

Dec 28, 2020

Nevermind, I forked the codesandbox and removedcore-js which removed all the errors.

The issue you're having is because of the unscoped styles found inpages/index.vue.
Mainly the styling applied to.container

.container {margin:0 auto;min-height:100vh;display: flex;justify-content: center;align-items: center;text-align: center;}

When you don't usescoped on your<style> tags, in a component it will bleed into other components/pages. To avoid this you have to addscoped to the<style> tag.<style scoped>.

The reason this is only happening when using theto drop, is because theto prop renderes a<nuxt-link>, which doesn't cause a page redirect, but instead just swaps…

View full answer

Replies: 6 comments 2 replies

Comment options

jacobmllr95
Dec 27, 2020
Maintainer

@platoputhur Can you please create a minimal reproduction of the issue on CodeSandbox or CodePen.

You must be logged in to vote

0 replies

Comment options

platput
Dec 27, 2020
Author

@platoputhur Can you please create a minimal reproduction of the issue on CodeSandbox or CodePen.

Here is the link to code sandbox:https://codesandbox.io/s/condescending-dubinsky-9k8f0?file=/components/SiteHeader.vue

If you change theto in line number 9 tohref, the issue will be gone.

You must be logged in to vote

0 replies

Comment options

Hiws
Dec 28, 2020
Maintainer

I can't seem to run your codesandbox, looks like there's some errors while compiling.

You must be logged in to vote

0 replies

Comment options

Hiws
Dec 28, 2020
Maintainer

Nevermind, I forked the codesandbox and removedcore-js which removed all the errors.

The issue you're having is because of the unscoped styles found inpages/index.vue.
Mainly the styling applied to.container

.container {margin:0 auto;min-height:100vh;display: flex;justify-content: center;align-items: center;text-align: center;}

When you don't usescoped on your<style> tags, in a component it will bleed into other components/pages. To avoid this you have to addscoped to the<style> tag.<style scoped>.

The reason this is only happening when using theto drop, is because theto prop renderes a<nuxt-link>, which doesn't cause a page redirect, but instead just swaps out the content on the page. Meaning the style from theindex.vue page is still loaded, and is now affecting your other page too since you're not using<scoped>.

You must be logged in to vote

0 replies

Answer selected byplatput

Comment options

platput
Dec 28, 2020
Author

@Hiws Thanks a lot. I wasted a lot of time on this one. Anyway index.vue is the only page missingscoped. I don't think I would have figured it out anytime soon. Really appreciate your help.

You must be logged in to vote

0 replies

Comment options