Background I have a header component having [ngClass] attached to top div.
Question Is it possible to delay displaying of page until [ngClass] has been evaluated? We used to have ng-cloak in AngularJs. Do we have something similar in Angular?
Why I need it This would help me in avoiding the undesirable flicker effect.
Header template
<div [ngClass]="{'no-hero': headerType === 400, 'restaurant-page': headerType === 200, 'restaurant-list': headerType === 300}"
class="top-section">
<div class="top-section-bg">
</div>
// Code removed for brevity
</div>
Related
I have a DIV which holds background images, and I change them by bootstrap carousel item change by passing data-bg attribute like below:
HTML
<div class="bg-holder" data-bg="bg-1">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS
const bgHolder= document.querySelector(".bg-holder");
$('#carousel').on('slide.bs.carousel', function (e) {
bgHolder.dataset.bg = e.relatedTarget.dataset.bg;
})
CSS
.bg-holder[data-bg="bg-1"] {
background-image: url(image1.jpg)
}
.bg-holder[data-bg="bg-2"] {
background-image: url(image2.jpg)
}
I set data-bg="bg-1" by default and then on every carousel change i pass the new data-bg value. it works great in all modern browsers except IE11 which do not refresh the images from css, and it keeps displaying the one i loaded by default. When I open developers tools and uncheck/check the declaration it displays the proper image. Any ideas ?
I test in IE and reproduce the issue. As a workaround, you could set the background-image as inline style of bg-holder and change it on every carousel change according to bg value. The sample code is like below:
HTML:
<div class="bg-holder" style="background-image: url(image1.jpg)">
<div id="carousel">
<div class="carousel-item active" data-bg="bg-1">
.... some slider content
</div>
<div class="carousel-item" data-bg="bg-2">
.... some slider content
</div>
</div>
</div>
JS:
$('#carousel').on('slide.bs.carousel', function (e) {
if (e.relatedTarget.dataset.bg == "bg-2") {
$(".bg-holder").css("background-image", "url(image2.jpg)");
}
else {
$(".bg-holder").css("background-image", "url(image1.jpg)");
}
})
You could also check this online demo in IE 11.
The progress circle will be there until the codition sending is false. what happens is that after the dive goes away the below element will jump up to where the div dissapeared making it seem "jumpy". What would be the best way to display it in a stable manner.
<v-progress-circular
color="#64B5F6"
indeterminate
></v-progress-circular>
</div>
//rest of stuff
I suspect that you are using v-if="sending" on the parent <div>. When sending==false the v-if directive will completely remove it from the DOM. You can't even use v-show because although this will keep it in the DOM, it will have "display: none" css so it it still wont take up any space.
Instead, you need to set the visibility: hidden css to hide the spinner without collapsing the space it takes up.
You can do this in two ways:
<div :style="{visibility: sending ? 'visible' : 'hidden'}">
<v-progress-circular ...>
<div>
Or, create a re-usable custom directive:
Vue.directive('visible', function(el, binding) {
el.style.visibility = !!binding.value ? 'visible' : 'hidden';
});
Then use it like so:
<div v-visible="sending">
<v-progress-circular ...>
<div>
I want to add a class only on mobile. I have done this before using vuetify however it seems more difficult with vue:
code:
<div class="{'mobileSnackBar': breakpoint.xs}">
<p> This is my snackbar </p>
</div>
in vuetify you have the $vuetify.breakpoint.xs however how would i get a similar effect with bootstrap? Or please recommend an alternative.
With vuetify you can do:
computed: {
is_screen_small() {
return this.$vuetify.breakpoint.smOnly
},
}
And combine it like this:
<div class="{'mobileSnackBar': is_screen_small}">
<p> This is my snackbar </p>
</div>
Please make sure you read vuetify docs for breakpoints to know more.
However as I know with bootstrap the only way is to use media queries:
// Small devices
#media (max-width: 760px) {
//Add your style here
}
Though, there is a solution which is not related to bootstrap:
computed: {
is_mobile() {
const isMobile = window.matchMedia("only screen and (max-width: 760px)")
return isMobile.matches ? true : false
}
}
And combine it like :
<div class="{'mobileSnackBar': is_mobile}">
<p> This is my snackbar </p>
</div>
Another way with bootstrap is to use the breakpoint classes to show/hide elements, something like this:
<div class="mobileSnackBar d-sm-none">
<p> This is my snackbar </p>
</div>
<div class="d-none d-sm-block">
<p> This is my snackbar </p>
</div>
Makes more sense with components rather than html, and maybe even then not the cleanest solution, but it does work.
I have a modal that is being imported and added to a page as a component. The modal is called into the page as
<TwoFactorStatus v-show="showTwoFactoreModal"></TwoFactorStatus>
Then a button has a click event as such
<button class="btn btn-danger pull-right" #click="ShowTwoFactoreModal()" type="danger">Disable two-factor authentication</button>
Which then calls a method to
ShowTwoFactoreModal() {
this.showTwoFactoreModal = true;
}
The Modal looks like so
<template>
<div class="modal fade" id="showTwoFactoreModal" data-keyboard="false" data-backdrop="static" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
Two Factor Switch Off
</div>
<div class="modal-body">
<p>This modal must pass</p>
</div>
</div>
</div>
</div>
</template>
Change your ShowTwoFactoreModal function to something like this:
ShowTwoFactoreModal() {
this.showTwoFactoreModal = true;
$('#showTwoFactoreModal').modal('show');
}
Either that or maybe using :class bindings and appending the active class, but this is more straight. I usually do it with an eventBus, but it might be overkill for your project... if you were to do it with an event bus, you could attach an eventListener to the modal component, and attach a showModal function callback to that listener where you don't need to set IDs you can just call it like: $(this.$el).modal('show'); ... but thats another story...
Bootstrap modal is using its own js functions to handle show and hide modal. Vue v-show can only show and hide the components which you programmed its logic. But bootstrap modal is showing and hiding by appending class to modal component.
If you want to use without bootstrap.js to toggle you can use jQuery with Vue as below. (if just want show then change method .show())
//200 is duration of fade animation.
<button #click="toggleModal"></button>
function toggleModal() {
$('#your_modal_id').fadeToggle(200)
}
If you want to use bootstrap own modal with their js then you can copy and paste modal code
here. https://getbootstrap.com/docs/4.0/components/modal/
If you want Vue v-show to handle all process then write logic to do it. If need help just ask.
I have expandoPane which consists of some buttons.
When I perform other operations in the project and then expand this expandoPane, its contents goes hidden and those are visble after resizing it using splitter only.
I want to solve this.
Do you have any idea why the content goes invisible?
You need to call .startup and .resize() on the content pane when it's shown.
Something like:
expandoPane.connect(this, "onClick", function() {
that.createContent();
that.startup();
that.container.resize()
});
Post your code and I'll probably be able to give you something more specific.
Adding sample code:
<div id="expandableConsole" dojoType="dojox.layout.ExpandoPane" region="bottom" showTitle='true' maxHeight="250px" maxWidth="280px" style="height:200px; width:100%;" doLayout='true' startExpanded='false' splitter="true">
<div>
<input type="button" id="btnSubmit" style="width:88px;height:20px" onclick="update()">
</div>
<div dojoType="dijit.layout.ContentPane" id="infoBar" style="height:150px">
</div>
</div>
When I expand the expandopane after few operations,button and contentpane go invisible.