I'm trying to set opacity for extjs (4.2.1) panel (whose id is myPanel) as Ext.get('myPanel').el.setOpacity(0.65). It works fine in firefox and chrome but not in IE 8. The ultimate goal is to make the panel transparent so that the user can see through it. Could any one please help me with this...
Ext will simply apply the CSS property "opacity" or alpha transparency to an HTML element. In IE8 this is almost in no case supported.
You could however use a plugin or hack to make IE 8 compatible with it.
Check http://css3pie.com/ or http://modernizr.com/ for example.
Also check http://www.electrictoolbox.com/opacity-internet-explorer-css3-pie-alpha-transparency/ for an example of your issue, and how it is solved using PIE
When you dont want to use 3rd party plugins, you can also try this:
Add the following rules to the CSS of your property
/* IE8 */-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* IE 5-7 */ filter: alpha(opacity=50);
You can also do this with Ext.js using Ext.get('myPanel').el.setStyle()
e.g.
Ext.get('myPanel').el.setStyle('-ms-filter','progid:DXImageTransform.Microsoft.Alpha(Opacity=50)');
Finally..after breaking my head for as while..I came up with 2 solutions...
1) Apply x-panel-ghost (which is an extjs in build css applied during the drag process) for baseCls or componentCls gave the transparency. But all the other default css for a extjs panel are lost and so we have to manually write them up..
2) The best solution would be to set an image which is made transparent (through photoshop or something) as a background image for the panel header and body and apply it to the cls config of the panel as below:
In panel:
cls: 'transparency',
In css file:
.transparency .x-panel-header{
background: transparent url('../image.png') no-repeat center !important;
}
And in the same way, for the body as well..
Hope this helps someone...
Related
When I try to add link to very left text in quill editor the popUp opened is hiding in the left side.And I am using Snow theme.
The below image shows my issue.
Not the most elegant solution, but you may need to override the css:
.ql-tooltip {
left: 0!important;
}
Sometimes quilljs doesn't play nice with theming libraries like certain versions of bootstrap (which was the issue in my case).
Currently, I am using a directive from a third-party library for a UI toggle button. I changed the background color and left/right positions of the toggle button a bit to meet my business specifications. E.g. the out-of-the-box style came as light green for true, light red for false; I changed this to a darker green for true, and a light grey for false. I also moved the toggle positionally a bit to the left. All of this works fine.
The one issue I'm experiencing is that for a split millisecond when the page with the toggle button renders, I see the old style quickly change from what came out-of-the-box, to my updated style. There aren't any other glitches in style after this fact, just the initial loading shows some quick shifting around on the element. This isn't a huge issue but I can't seem to pinpoint the issue or know why it is happening. Any thoughts? Something in an issue for CSS hierarchy perhaps?
Notes relevant to the issue:
I used the inspector to find the classes I needed to override, since the directive itself just uses an nz-toggle tag.
I am using !important to override. I've read that this is bad practice in itself but it is being used across the entire project and has been established as "our standard" of overriding styles
Here's an example of one rule from my CSS file compared to what comes out of the box:
.nz-toggle-wrap.true {
background-color: #089900 !important;
right: -16px !important;
width: 50px !important;
height: 28px !important;
}
vs.
.nz-toggle-wrap.true {background-color: #60bd68;}
Any thoughts?
This happens because your "new" CSS loads after the "old" CSS.
Of course that should be true anyway, because you want to override the old style, but it seems that the old and new code are too far away from each other hence you manage to see it change.
To solve this you have to move the new style "closer" to the old style.
The way to do it depends on your project architecture and your build process.
Another option is that the class "true" is added only after page load, and so only then your new style kicks in.
If you are loading this "third party library" locally, you might have to directly edit the CSS files of the plug-in.
With the plug-in you linked, maybe you need to edit this file directly to prevent the "flicker", which is caused by the styles loading in sequence:
https://github.com/tannerlinsley/nz-toggle/blob/master/src/nz-toggle.styl
I am working on a chrome extension that would display an overlay over any tabs the user is working on. I need it to operate within the full viewport.
I'm using vanilla javascript and content script to inject a full viewport-size div (to the body since I want it to be used on any website) and then append my template to the div I created and injecting them with Angular. It works very well.
The Problem
However, this overlay is somewhat blocking since the div I create has to have a z-index of at least 0 to be seen. Let's imagine you perform a google search, you will be able to search since the google search bar has z-index > 0 but you won't be able able to click on the results ... The problem appears in pretty much any website.
Now I tried to play with z-index: I apply z-index = -1 so I won't see the main overlay div but the problem with that is that the content I append to it seems to inherit the z-index -1 no matter what so I never see my template!
I've followed quite some topics here but I didn't find an answer to my problem!
The Question at last ...!
How do I create a non-blocking chrome overlay ? :)
Remember: I need to be able to interact with the overlay at any given moment, not simply when I click on the icon related with the BrowserAction!
The trick is simply to add the css property
pointer-events: none;
to the main div and
pointer-events: auto;
to the template
Just wanted to find out, to change the height of Foundation 5's Top Bar Navigation, what is the correct way to do it without it breaking on mobile?
Adding any sort of padding or height works only for desktop but on mobile views it breaks the navigation.
Thanks for the help.
Nick
The safest way will be using Sass version and modifying the line with // $topbar-height: rem-calc(45); in _settings.scss (don't forget to uncomment it)
Just add some lines of styles in your app.css
.top-bar, .title-area{height:46px; line-height:46px}
.top-bar-section li:not(.has-form) a:not(.button){padding:16px 22px;
.top-bar-section .has-dropdown > a{padding-right:22px!important;}
And you are done.
I have a multiselect component in Ext js 3. I have a number of entries in it. Now i want to select an entry and scroll multiselect to make it visible to the user. I am able to select an entry but i cannot scroll multiselect.
I have used dataview component and i do this same function using following:
dataviewObj.container.dom.scrollTop = (42 * index);
but cannot implement this is multiselect.
Can someone please tell me how to achieve this with multiselect????
Thank you a lot for help.
There is no need to edit the Ext extension code itself.
Ext MultiSelect will do scrolling out of the box. You just need to make sure you have added the CSS that it needs:
.ux-mselect{
overflow:auto;
background:white;
position:relative; /* for calculating scroll offsets */
zoom:1;
overflow:auto;
}
The full set of CSS rules to include in your document is here:
http://dev.sencha.com/deploy/dev/examples/ux/css/MultiSelect.css
Ok, after a lot of hacking I think I've found the solution to this.
Open the Multiselect.js file in an editor.
Goto the onRender method of the Ext.ux.form.MultiSelect class (object).
Find the FieldSet creation block of code (var fs ...)
Add autoScroll:true to the fieldset config options.
I had a multiselect with ~200 items in it and this worked like a charm.
This is a change made to the extension code itself, so if you can't afford to do this you'll have to find a work around -- possibly through multiple extending and polymorphism.