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
Related
When I use lightning inline editable data table component, the status bar would cover the edit panel.
I think it might is a SLDS bug.
I ran into this problem as well. I agree that I think it is a CSS issue on the SLDS side.
I'm using a lightning:datatable with inline editing, and I noticed that the footer bar div with the Cancel/Save buttons is using the 'slds-docked-form-footer' class, which sets the z-index at 8000.
Crawling up from the datepicker I noticed that the "table cell" contains a section element that has inline styling setting the z-index to 7002. That section element also has a class of "slds-popover_edit", so my workaround solution was to put this into my lightning component's css file:
.THIS section.slds-popover_edit {
z-index: 9999 !important;
}
Hope this helps, or that you've found a better solution by now. I'm going to test my page to make sure this change didn't have any unintended consequences.
So I have some controls in a fixed position to the bottom of the screen for easy reach on mobile, but for the life of me I can't figure out how to make the option content appear above the select menu.
I tried messing with append-to-body="true" and some other stuff that was totally off the wall. I feel like this should be a simple hook but not finding anything..
Add position='up' to <ui-select-choices>.
Other options include down and auto (top/down depending on available space).
Demo: https://angular-ui.github.io/ui-select/demo-dropdown-position.html
Edit on Plunker available at https://angular-ui.github.io/ui-select/
[Dropdown Position]
I was able to get it with css by adjusting the absolute positioning.. This is actually kind of nice because I could control when it happened this way, for me it was only for mobile screen widths.
.some-container-class .ui-select-choices {
top: auto;
bottom: 100%;
}
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...
My question is similar to this one and this one, but involves the new animations in AngularJS 1.2.0.
Basically, I have a bunch of elements on my signup page that are initially hidden and only displayed when a particular form element is invalid (they point to the invalid form element and display a message like "password needs to be at least 8 characters"). These messages fade in and out as they are shown/hidden.
But as soon as the signup page is displayed the elements are visible and fade out. They are briefly visible (they "blink" or "flash" on the screen, as is the case in situations where ng-cloak is necessary).
Here's a plunker to demonstrate the behaviour that I'm experiencing. In this plunker I have set up a basic route (the "login" page) that contains a box and a button that toggles the box's visibility. Notice how the box fades out when you click run? It should just be hidden. (I've deliberately set the animation to be slow so you can see the animation occurring).
How can I stop the animation from occurring initially?
What I've tried:
Set ng-cloak on the animating elements.
Use ng-cloak with the display: none !important rule added. (See this)
Setting display: none on the element, as if it were an "initial setting" for the element. (See this)
Interestingly, this plunker behaves properly and the animation doesn't occur initially. This plunker doesn't use routing and the controller is set explicitly on the body tag. I want to use routing though.
There's a problem with the version of angular you are using. Angular animate changed a lot I think in 1.2 so try this:
<script src="http://code.angularjs.org/1.2.14/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-animate.min.js"></script>
<script src="http://code.angularjs.org/1.2.14/angular-route.min.js"></script>
Check it out, I've forked your plunker here
http://plnkr.co/edit/Mchjx51GREGU2Gj0NBXX?p=preview
I have an element that is set to display none on page load. When you select a number from a select list the element is shown with jQuery. This works fine in all browsers except in IE7.
In IE7 everything is laid out correctly if I disable JavaScript. However with js turned on (and then the element shown via the select list) the legend appears in the wrong place. If with the developer tools I change the width of the fieldset and change it back to the original value, then it displays correctly.
So it seems like its some sort of rendering issue for hidden elements in IE7. If I add this CSS it messes my site but it fixed this particular issue.
* {
position: relative !important;
}
Adding a class which is hidden with css rather than adding display none as an inline style fixed this.