I'm tryin to add a bar at the bottom of my ElectronJS application and I'd like it to be positioned in the same way as the blue bottom bar in VSCode, where the scroll bar ends/stops above it.
Unfortunately, there always seems to be a small space on the right side where the scroll bar would appear when the content overflows (I don't want to disable the scroll bar / behavior with things such as overflow: hidden; See Edit 2).
I did some testing and with the code below you can see my desired behavior seems to happen with the nav-drawer, i.e. its scroll bar stops right above the v-bottom-navigation, which would be my bottom bar (the thick grey line you see is the scroll bar).
I'm semi-new to this, but I can't figure out why exactly that happens and how to modify it in order to get the same behavior for the whole application.
VueComponent.vue
<template>
<div id="nav-drawer">
<v-navigation-drawer
v-model="drawer"
app
color="white darken-3"
mini-variant
permanent
>
<v-avatar
v-for="n in 30"
:key="n"
:color="`grey ${n === 1 ? 'darken' : 'lighten'}-1`"
size="36"
class="d-block text-center mx-auto my-3"
>
<span>TT</span>
</v-avatar>
<v-avatar class="d-block mx-auto">
<v-btn icon small color="primary">
<v-icon>fas fa-window-maximize</v-icon>
</v-btn>
</v-avatar>
</v-navigation-drawer>
<v-bottom-navigation v-model="value" height="20px" background-color="primary" app>
<v-spacer></v-spacer>
<v-btn icon small>
Button
</v-btn>
</v-bottom-navigation>
</div>
</template>
<script>
export default {
name: "NavDrawer",
components: {
//
},
data: () => ({
drawer: true,
})
}
</script>
P.S. I'm using ElectronJS with VueJS+VuetifyJS - I set it up as described here. Any help is appreciated.
Edit 1: I went through the VSCode source code and found the UI elements (vscode/src/vs/base/browser/ui/). Unfortunately, I wasn't able to figure out which of those is the bar at the bottom (apparently called System Bar, according to some threads I found here and there).
I think it might be the toolbar, but that seems to be part of the actionbar, which is the menu on the left (by default) and doesn't seem to have much CSS to indicate that it's the bar at the bottom.
Edit 2: I tried adding html {overflow: hidden;} in the style section of the main index.html file. It removes the bar of the main page section (the scrollbar you see in the second picture with the two arrows and green button) and the possibility to scroll, but the scrollbar of the nav-drawer remains and the scrolling still works. So, I guess this would be an option if I could still have the scrollbar in the main page section with the code above with the hidden feature enabled as well. Not sure if that's possible though.
Edit 3: Using html {overflow-y: auto;} in the index.html file, removes the scrollbar when there isn't content that is overflowing and it looks just like I want it, but when there is, it still taking up space and looks like the the second image in my post.
Found this example: CodePen
For my case the solution is adapting the :root {...} part to my application, which means to mark the bottom bar as the footer and calculate the content area depending on its size.
The html {overflow: hidden;} must also be in the index.html file's style section.
Related
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 wanted to make a custom button that basically when clicked on would make a v-data-table pop out below it. I am basically making a data table show up when a button is clicked and using this transition
https://vuetifyjs.com/en/styles/transitions/#scale
But the transition sort of makes the table go to the right more and also has an active state with a background with opacity, basically there is a lot of built in styles that are making it hard to make a table drop down below the button as the default behavior is when you click on the transition, the item that pops up covers the button.
Below is the code that causes this
<v-menu transition="scroll-y-transition" class="scroll-button">
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on">
Scrolling Y Transition
</v-btn>
</template>
<v-data-table> </v-data-table>
</v-menu>
Is there a better way to implement this?
I don't recommend using menu. Maybe you are looking for this kind of animation.
<v-btn #click="show = !show">
{{ show ? 'Hide' ? 'Show' }}
</v-btn>
<v-expand-transition>
<div v-show="show">
<v-table></v-table>
</div>
</v-expand-transition>
And in the script
data() {
return {
show: false
}
}
You should use the native props for v-menu to reposition the menu how you like. See this snippet: https://codepen.io/bgtor/pen/BaWdBMO .
Note the use of offset-y which allow you to offset the menu on the Y axis, and bottom which tell it to offset to the bottom. Also, nudge-left="200px" is translating the menu to the left by "200px". You can find more props for customisation on the vuetify site: https://vuetifyjs.com/en/api/v-menu/.
Other than that, I agree with #scar-2018, it seems odd to display a table in a menu.
A Vuetify question. Something has just started appearing in my app. On several views/components, I have a v-dialog. Up until a short while ago, the dialog would open correctly but as it was often taller than the screen I could comfortably scroll. Now the dialog seems to have taken control in the respect that I cannot scroll at all when a dialog is open.
This won’t scroll, so I can’t move to the bottom of the dialog. As I said, this is a “new” thing:
What I did, maybe this helps. I put a vue-youtube inside a new component (which is in a v-dialog), I was not happy with exactly where it was, I wanted it higher on the screen so I did the following:
<style scoped>
.v-dialog {
position: absolute;
top: 10%;
}
</style>
However, I initially forgot to use scoped. Not sure if this is the cause but all my dialogs have been affected.
What you need is a scrollable dialog, Please check the link https://vuetifyjs.com/en/components/dialogs/#scrollable
<v-dialog v-model="dialog" scrollable>
<v-card class="pa-3">
<v-card-text>
<v-form>
<!-- Add your form here -->
</v-form>
</v-card-text>
</v-card>
</v-dialog>
How do I make this expansion-panel open content only on clicking icon?
Tried using readonly but it didn't help.
Thanks in advance!
https://vuetifyjs.com/en/components/expansion-panels#expansion-panel
You can put online the argument in all collapse like: expanded={!expanded}
and in the icon you put the onClick={toggle}
I was having the same problem and just found a solution for that.
You need to implement a custom button on the expansion panel, so it will accept custom events. You can achieve that using template and v-slot:
<v-expansion-panel #click.prevent="onClick()">
<v-expansion-panel-header>
...your expansion panel code here
<template v-slot:actions>
<v-btn icon #click.stop="onClick()">
<v-icon>mdi-filter-variant</v-icon>
</v-btn>
</template>
</v-expansion-panel-header>
</v-expansion-panel>
...and your onClick method would be like this:
onClick() {
/*this will toggle only by icon click. at the same time, will prevent toggle
by clicking on header. */
const curr = this.panel
this.panel = curr === undefined ? 0 : undefined
}
It may seem a little magical that the same function is toggling on icon click and preventing toggle on header click, but this happens because the custom icon button does not toggle itself, so we force that using the onClick method. On the other hand, the expansion panel header has its native property of toggling the panel. So when we click it, its value will automatically change and we need to change it back to what it was before the click.
To make the expansion-panel open only on clicking icon you can use css that disables all clicks on the header and only allows clicks on the icon:
<style>
.v-expansion-panel-header{
pointer-events: none;
}
.v-expansion-panel-header__icon{
pointer-events: All;
}
</style>
Keep in mind if you are using scoped style you have use >>>:
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
Here is the template example, I added #click to provide btn like experience when user clicks on an icon, it's not necessary:
<template>
<v-expansion-panel>
<v-expansion-panel-header>
<template #actions>
<v-icon class="icon Icon Icon--32 icon-utility-arrows-carrot_down-32"
#click/>
</template>
</v-expansion-panel-header>
<v-expansion-panels >
<v-expansion-panel-content >
<!--content here-->
</v-expansion-panel-content>
</v-expansion-panels>
</v-expansion-panel>
</template>
What I want is that to fill the width of the entire mobile screen with vuetify
with this code :
<v-content>
<router-view>
<v-container fluid></v-container>
</router-view>
</v-content>
the router view has a margin on both left and right side
and that bottom-nav is already fitted on the screen and I won't be dragging the screen to show the bottom-nav
I needed to dynamically remove padding only on mobile, this works for me:
<v-container :class="{'px-0': $vuetify.breakpoint.xsOnly }">
<router-view> </router-view>
</v-container>
There is not much documentation that I could find as of now, but looking at the code I found these:
// Breakpoint ranges.
xsOnly,
smOnly,
smAndDown,
smAndUp,
mdOnly,
mdAndDown,
mdAndUp,
lgOnly,
lgAndDown,
lgAndUp,
xlOnly,
you can also try this, vuetify has helper classes to set padding and margin
<v-container fluid class="pa-0 ma-0">
</v-container>
v-container creates a div with the class container. This class gives your div padding on all sides. (The amount changes depending on the viewport breakpoint; it's 2px for xs, 24px for xl). If you include the below in your css, your side padding should go away.
.container {
padding: 0!important
}