Can we add navigation bar with dropdown menu on single page website? if possible, how to handle navigation for that?
Yes, you can. For navigation try using Bootstrap's Scrollspy plugin
All you have to do then is populate your navbar with a elements who's href corresponds to the content div's id:
My Div
...
<div id="my_div_id">Content here</div>
Related
I want to make navbar for a landing page .
I used router-link for item like this
<router-link :to="#features" target="_self">
features
</router-link>
and when I click on the link it scroll the page and work perfectly
and every link that is clicked get exact-active-class
but if scroll manually it doesn't get this class .
How can I fix this ?
I am having trouble with v-bottom-navigation hide-on-scroll on route change. If I am on a route with scrollable content and I scroll down then up, it works as expected - the bottom nav is hidden. Then, on route change to a page with no scrollable content, the bottom nav is inaccessible. There is no obvious way to reset its tranform style that hide-on-scroll set, other than go to a page with scrollable content, then scroll down.
Repro:
codePen
scroll to bottom of page 1, then scroll up (bottom nav is transitioned)
nav to page 2 (hamburger button)
Nav is transitioned off-screen
<v-main>
<v-container fluid>
<v-fade-transition mode="out-in">
<router-view></router-view>
</v-fade-transition>
</v-container>
</v-main>
<v-bottom-navigation
hide-on-scroll
grow
app
>...</v-bottom-navigation>
Thanks.
Thanks to Kael in the Vuetify discord #help channel for the solution: use :input-value.sync to open it on route change.
<v-bottom-navigation
:input-value.sync="bottomNav"
hide-on-scroll
grow
app
>
watch: {
'$route.path' () {
this.bottomNav = true
}
I have used modal-ok slot available in b-modal slots to render the OK button of b-modal. I want to conditionally disable the OK button. I have tried 2 methods with no luck. Any suggestion is welcome on how to disable the OK button rendered using the slot.
Disabled prop
<div
slot="modal-ok"
:disabled="true"
#click.stop="uploadFile(item.id)"
>
Upload
</div>
ok-disabled prop of b-modal
<div
slot="modal-ok"
:ok-disabled="true"
#click.stop="uploadFile(item.id)"
>
Upload
</div>
Use the ok-disabled prop on <b-modal>, to conditionally enable/disable the ok button.
<b-modal :ok-disabled="true">
<!-- Content -->
</b-modal>
For more information check out this section of the documentation.
Just add hide-footer if you want to get rid of the buttons
<b-modal hide-footer>
<!-- Content -->
</b-modal>
model-ok scope can't modify button itself, it just change button content
You need to use modal-footer scope instead and declare buttons manually there.
I've been struggling on preventing the router link when clicked on the button inside it, e.g:
<router-link to="/a">
<div>...</div>
<button #click.prevent="somemethod()"></button>
</router-link>
When i click on the the child button, i don't want router-link to go on the route
You should have a button. I don't see any button text. Add a button text.Then press submit.
<button #click.prevent="somemethod()">SUBMIT</button>
I'm testing a form. When I click on a modal, a div modal appears and the background fades out and this new modal fades in that allows you to input information. For some reason selenium won't recognize elements on this modal. Its not listed as an iframe so I'm not sure if I'm suppose to use the switch to.
the modal
<div id="addressModal-20f95ac4-8a83-4c02-862d-a42d60a74b04" class="modal hide fade in"
style="display: block;" aria-hidden="false">
text are in modal
<textarea rows="2"name="viewModel.MortgageForm.BorrowerInformationSection.Borrowers[0].Dependents.modalTextArea-addressModal-20f95ac4-8a83-4c02-862d-a42d60a74b04" id="modalTextArea-addressModal-20f95ac4-8a83-4c02-862d-a42d60a74b04" cols="20" class="span valid"></textarea>
There may be multiple elements with that same DOM signature and webdriver picked up the one which is not context of the current user view.
Solution: Since it is not an iframe, you will have to locate the element in context of the modal box container. You can try the following to locate the textarea webelement:
JQuery:
$("div[id^='addressModal']:visible").find("textarea")
WebDriver(Java):
driver.findElement(By.cssSelector,"div[id^=addressModal] textarea")