I search how to deactivate the transition on compose data-bind,
because it not beautiful and little bug with my content html on chrome.
Because i have a scroll horizontal print on end on my transition and disaspear after move my mouse.
The content is in iFrame.
Thanks
You can disable transitions for compose by removing the "transition" option from the binding declaration.
Instead of:
<div data-bind="router: { cacheViews: false, transition: 'entrance' }"></div>
use:
<div data-bind="router: { cacheViews: false }"></div>
This example is for Durandal 2.0, although earlier versions work the same way.
There's more info in the docs here in the "Additional Settings" section.
(The transition framework is pluggable, so you can also write your own, using the default "entrance" transition as an example.)
Also need to remove the second parameter in setRoot call:
// Was
app.setRoot('viewmodels/shell', 'entrance');
// Done
app.setRoot('viewmodels/shell');
Related
I am using a dialog from Vue Material (https://vuematerial.io/components/dialog). If I follow the link and open the first custom dialog on the page, it moves to the top left of my screen, and I can only see a portion of the dialog. The same happens with the dialogs that I have in my Vue app, and no CSS seems to bring it to the center of my screen. I am trying to show an interactive map in a dialog. Is there any way to keep my Vue dialog in the center of the browser window so I could actually see all of it and use it?
My dialog has the following markup:
<md-dialog :md-active.sync="showDialog">
<md-dialog-title>Map</md-dialog-title>
<interactivemap :lat="lat" :lon="lon" />
<md-dialog-actions>
<md-button class="md-primary" #click="showDialog = false">Close</md-button>
</md-dialog-actions>
</md-dialog>
It works the same in my browser: both at the docs and code sandbox.
When it's off the screen, the inner div (with the class .md-dialog > .md-dialog-container) has transform: translate(-50%,-50%) scale(1);, pushing it off.
Edit: yea, every dialog box has this CSS bug. Try overriding it and/or notify the devs.
.md-dialog-container {
transform: translate(0%,0%) scale(1) !important;
}
Modified the answer given by https://stackoverflow.com/users/13602136/zed, and my dialogue now sits nicely in the centre of my screen
I'm working on a project using Nuxt.js as SSR engine and Vuetify as styling framework. In one of my templates I have such code:
<v-layout row wrap align-center
:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }">...</v-layout>
As you can see, I want to apply mb-4 class only if I am on small screens and smaller ones. But when I load this on desktop large screen and inspect element, this class is attached even though screen resolution does not match logic for applying this class. However, styling is back to expected when I resize browser window.
I've tried to manually dispatch 'resize' event in lifecycle hook:
mounted() {
window.dispatchEvent(new Event('resize'));
}
But it didn't help. Even if I wrap it in setTimeout, still no luck.
UPD: found a workaround, but still think it is not the best solution:
changed
:class="{ 'mb-4': $vuetify.breakpoint.smAndDown }"
to
:class="{ 'mb-4': isMounted && $vuetify.breakpoint.smAndDown }"
and in mounted lifecycle hook added: this.isMounted = true
UPDATE: while digging in Vuetify source code found out, that it checks window width with 200ms delay as window width check is costly operation. That is why we have delay.
you can give specific breakpoint for margin and padding attributes.
<v-layout row wrap align-center class="mb-sm-4">...</v-layout>
https://vuetifyjs.com/en/styles/spacing/#breakpoints
In elementUI the default background-color is white ; when choosing the them:dark , it is black, but how can I customise the bg-color by myself?
I have tried to add the style property at the el-menu tag , but it didn't work
<el-menu style="{background-color: rgb(36,36,36)!important}"
I try to find the source code of the css file of el-menu tag and I try to change some setting relating to background-color, don't work either
the menu component just like
somebody told me I can code like this
<el-menu style="{backgroundColor: yello}.." but it didn't work
The class for that particular element is not modifiable, have a look:
:class="{
'el-menu--horizontal': mode === 'horizontal',
'el-menu--dark': theme === 'dark',
'el-menu--collapse': collapse
}"
So your choices are:
Wrap it in a custom <div class="my-specific-selector and target it with .my-specific-selector .el-menu
Override the CSS for the dark theme
Copy + paste contents of component into your own file, adjust accordingly, use that instead.
you can try put background color directly like this
<el-menu
background-color="#304156"
text-color="#bfcbd9"
active-text-color="#409EFF"
style="height: 61px;"
></el-menu>
I'm having trouble understanding how data-binding works now.
On my index page I've got an object (obtained as JSON from a RESTful service), which works just fine when applied to a custom element like:
<main-menu class="tiles-container ofvertical flex layout horizontal start"
menuitems="{{menuitems}}">
</main-menu>
var maintemplate = document.querySelector('#fulltemplate');
maintemplate.menuitems = JSON.parse(data.GetDesktopResult);
This works as expected, and when I load my page with different users, main-menu changes as it should to show each user's desktop configuration. (This menuitems object reflects position and size of each desktop module for each user).
Now, users used to be able to change their configuration on the go, and on Polymer 0.5 I had no problem with that, just changed my maintemplate.menuitems object and that was that, it was reflected on the template instantly.
As I migrated to Polymer 1.0, I realized changes on an object wouldn't change anything visible, it's much more complicated than this, but just doing this doesn't work:
<paper-icon-button id="iconback" icon="favorite" onClick="testing()"></paper-icon-button>
function testing(){
debugger;
maintemplate = document.querySelector('#fulltemplate');
maintemplate.menuitems[0][0].ModuleSize = 'smamodule';
}
The object changes but nothing happens on the screen until I save it to DB and reload the page.
Am I missing something /Do I need to do something else on Polymer 1.0 to have elements update when I change an object passed as a property?
Before you ask, I've got those properties setted as notify: true, it was the inly thing I found different, but still doesn't work
Thanks for reading!
EDIT:
this is the code menuitems is used in:
<template is="dom-repeat" items="{{menuitems}}" as="poscol">
<div class="positioncolum horizontal layout wrap flex">
<template is="dom-repeat" items="{{poscol}}" as="mitem" index-as="j">
<main-menu-item class$="{{setitemclass(mitem)}}"
mitem="{{mitem}}"
index="{{mitem.TotalOrder}}"
on-click="itemclick"
id$="{{setitemid(index, j)}}">
</main-menu-item>
</template>
</div>
</template>
main-menu-item is just set of divs which changes size and color based on this object properties
You need to use the mutation helper functions if you want to modify elements inside an object or array otherwise dom-repeat won't be notified about the changes (check the docs):
function testing(){
debugger;
maintemplate = document.querySelector('#fulltemplate');
this.set('maintemplate.0.0.ModuleSize', 'smamodule');
}
In addition to the 'back' button functioning as expected, I need to asynchronously invoke a function to update some db tables and refresh the UI.
Prior to making this post, I did some research and tried the following on this...
<h1 data-dojo-type="dojox.mobile.Heading" id="hdgSettings" data-dojo-props="label:'Settings',back:'Done',moveTo:'svStart',fixed:'top'"></h1>
dojo.connect(dijit.registry.byId("hdgSettings"), "onclick",
function() {
if (gblLoggerOn) WL.Logger.debug(">> hdgSettings(onclick) fired...");
loadTopLvlStats();
});
Since my heading doesn't have any other widgets than the 'back' button, I thought that attaching this event to it would solve my problem... it did nothing. So I changed it to this...
dojo.connect(dijit.registry.byId("hdgSettings")._body, "onclick",
function() {
if (gblLoggerOn) WL.Logger.debug(">> hdgSettings(onclick) fired...");
loadTopLvlStats();
});
As it turns out, the '._body' attribute must be shared by the Accordion widget that I just happen to use as my app's main UI component, and any attempt to interact w the Accordion rendered my entire app useless.
As a last resort, I guess I could simply forgo using the built-in 'back' button, and simply place my own tabBarButton on the heading to control my app's transition and event processing.
If the community suggests that I use my own tabBarButton, then so be it, however there has to be a way to cleanly attach an event to the built-in 'back' button support.
Thoughts?
The following should do the trick:
var backButton = dijit.registry.byId("hdgSettings").backButton;
if (backButton) {
dojo.connect(backButton, "onClick", function() { ... });
}
Remarks:
The code above should be executed via a dojo/ready call, to avoid using dijit's widget registry before it gets filled. See http://dojotoolkit.org/reference-guide/1.9/dojo/ready.html.
Note the capitalization of the event name: "onClick" (not "onclick").
Not knowing what Dojo version you use (please always include the Dojo version information when asking questions), I kept your pre-AMD syntax, which is not recommended with recent Dojo versions (1.8, 1.9). See http://dojotoolkit.org/documentation/tutorials/1.9/modern_dojo/ for details.