When the app has been inactive for a while and I click on a navigation link, I see my "page isnavigating" spinner rotating for a few seconds and then just before the new page loads, the old page I navigated away from flashes on screen for a split second and it's highly distracting.
My content section in my shell.html page is:
<section>
<!--<section id="content" class="main"> -->
<!--ko router: { transition:'entrance', cacheViews:true }--><!--/ko-->
<!--</section>-->
</section>
It happens whether cacheviews is set to true or false, so it's not that. It also happens whether transitions are turned on or not.
Once the app is loaded and actively being used, it is responsive, fast and the transitions work perfectly.
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'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.
I want to make a delay before triggering the next page when clicking a link opening a new route.
So I want the current page to fade out - then wait a small second before starting the fadeIn of the next page.
Current Transition below using Animate.css's Fade library.
<transition leave-active-class="animated fadeOut" enter-active-class="animated fadeInDown">
<router-view></router-view>
</transition>
It's working nicely, but the change of page is too instant. The two routes are intersecting/fading into each others.
I want a clean fadeout -> full blank -> then open new page.
How to achive this?
You should change the transition mode from the default to out-in (https://v2.vuejs.org/v2/guide/transitions.html#Transition-Modes)
<transition
mode="out-in"
leave-active-class="animated fadeOut"
enter-active-class="animated fadeInDown">
<router-view></router-view>
</transition>
I am using bootstrap modal for showing modal window. For modal body I am using iframe so that if I submit form I can get response on the same modal window.
My iframe is like :
<div class="embed-responsive embed-responsive-4by3">
<iframe seamless="seamless" class="embed-responsive-item" src="schedule"></iframe>
</div>
I am using ClockPicker plugin to pick the time. But when Clock Picker appears it hides behind the scroll. I have changed z-Index of clock picker but it doesn't seem to work.
Any help ?
I am attempting to put a weekly agenda in a row of thumbnails using Fullcalendar, but the resizing doesn't seem consistent.
1) On my work monitor, the agenda table renders correctly at full screen width, then changes to being taller than the neighboring thumbnails when the screen is narrowed, and then returns to correct rendering at full width. It also renders correctly when in mobile emulation and the row switches from horizontal to vertical configuration. The screen resolution is 1920x1080.
2) At home, the agenda renders initially as taller than the neighboring thumbnails at full width, then remains taller as the horizontal dimension decreases, renders correctly in mobile emulation, then renders correctly when the screen is restored to full-width. Screen resolution is 1366x768.
The base dimensions of the neighboring images are 465x300.
Relevant code bits. The jQuery calling the calendar (in the $(document).ready() section).
$('#calendar-index').fullCalendar({
defaultView: 'basicWeek',
height: $("#imgSource").height(),
width: $("#imgSource").width(),
windowResize: function(view) {
this.height() = $("#imgSource").height();
this.width() = $('#imgSource').width();
}
});
The HTML section:
<div class="row">
<div class="col-md-4">
<div class="thumbnail text-center"><div id="calendar-index"></div>Button Text</div>
</div>
<div class="col-md-4">
<div class="thumbnail text-center"><img id="imgSource" src="image1.png">Button Text</div>
</div>
<div class="col-md-4">
<div class="thumbnail text-center"><img src="image2.png">Button Text</div>
</div>
I've got a feeling that connecting it to a $("#imgSource").load() rather than $(document).ready() call would work, but I'm avoiding using deprecated functions if possible.
http://jsfiddle.net/sidhenimh/63e0h54o/
I found a fix for this, in case anyone else runs into a similar issue; it doesn't work perfectly, but it does at least make the horizontal scaling a lot more stable. There's a free jQuery plugin called "Datatables" that enables automatic horizontal scaling. Vertical scaling doesn't work still, but the table at least displays correctly initially regardless of monitor resolution/size.
Datatables Plugin