I want to positioning "property panel" in topleft of the autodesk forge viewer while loading itself with default main property.
A couple of approaches to go here - adjust the specific styling below to your needs:
<style>
#ViewerPropertyPanel{top:0px!important;left:0px!important}
</style>
//or
<script>
viewer.getPropertyPanel(true).container.style.left=0
viewer.getPropertyPanel(true).container.style.top=0
</script>
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
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've seen the new navbar control in winJs 2.0 for windows 8.1, is fantastic an simple.
But how did they develop the weather app navbar in windows 8? I mean the nice big squared buttons instead of the small round ones?
The only way I found is to have an appbar and don't use any AppBarCommands (because I can't find a way to change the shape of those) but only divs and do all the styling manually.
Is that the only solution or is it possible to square the circle?
I found it myself in the end, changing those classes can change entirely the style of the AppBarCommand:
CSS class Description
win-command Styles the entire AppBarCommand.
win-commandicon Styles the icon box for the AppBarCommand.
win-commandimage Styles the image for the AppBarCommand.
win-commandring Styles the icon ring for the AppBarCommand.
win-label Styles the label for the AppBarCommand.
for example to square the circle:
.win-appbar .win-commandring
{
border-radius: 0;
}
.win-appbar:hover .win-commandring
{
border-radius: 0;
}
It's a hard job to ovverride all the default behaviour but it can be done.
Have a look at this for an example of the main styles: http://msdn.microsoft.com/en-us/library/windows/apps/jj839733.aspx
I'm working on an Adobe Air application. It's base on html and js. So there are img, input and textarea tags, which will show a native menu when right-click. For example, right click on the img tag, It shows a native menu with save image menu-item.
I've tried using normal javascript methods, like event.preventDefault(), and It doesn't work at all.
So how to prevent those native menus?
I found it very easy to solve this problem after 7 months. It's something about contextmenu.
Example:
Here is an <img> now.
<img src="https://www.google.com/images/srpr/logo4w.png">
Add a contextmenu event listener for it, and prevent its default bebaviour.
<img id="a" src="https://www.google.com/images/srpr/logo4w.png" >
<script>
$('#a').on('contextmenu', function(e) {
e.preventDefault();
e.stopPropagation();
});
</script>
Then the default menu disappears.
Demo jsfiddle.net
does anyone know how to create a loading mask over a XUL panel with JQuery or normal Javascript?
i am developing a firefox extension and i need the loading mask over some of the panels to avoid the user from making any further input while information is being submitted.
First of, i don't really know if mozilla supports loading masks over XUL panels because all the JQuery scripts i tried so far make the panel disappear instead of masking it.
thanks for reading
XUL uses box layout which makes typical techniques from HTML like absolutely positioned divs malfunction. You should use a XUL <stack> tag (see https://developer.mozilla.org/en/XUL/stack) and put both your content and your half-transparent layer as its children. When you make the half-transparent layer visible it will appear on top of the content. For example:
<stack flex="1">
<hbox id="content" align="center" pack="center">
<button label="Click here" oncommand="document.getElementById('busy').hidden = false;"/>
</hbox>
<hbox id="busy" hidden="true"/>
</stack>
And some CSS code:
#busy {
background-color: black;
opacity: 0.5;
}