Is this a z-index issue? - menu

I have a menu (this is the menu I'm using with a few modifications: http://multi-level-push-menu.make.rs/) that floats over an image that is linked. Whenever a link is click that is in front of the image, both links are activated.
I've tried added a higher z-index to the menu wrapper, but still not working. Thoughts?
Here is a screen cap of the problem:
http://tinypic.com/r/znoeh2/8
I know the obviously answer is to make the image not clickable, which I will change but I'm concerned this could cause problems somewhere else on the site.

Related

Section at bottom of screen that doesn't respond to onpress event, what's causing this?

I'm working on an existing React-Native app, and in the iOS version, there's a problem where a portion of the bottom of the screen does not respond. At first it was thought to be on a specific screen, but upon further investigation, it was found to be affecting other screens as well. The control used on the first screen where the problem was noticed is TouchableOpacity, but a rectangular section in the middle at the bottom of the screen does not respond, but in either corner at the bottom of the screen it does respond. Another screen has a ListView, and if you attempt to scroll from that same bottom middle area, it won't, but everywhere else, it will. This is evident in both the simulator and on the physical device. It acts like there's something in the road floating over the top of everything.
I've tried using the Accessibility Inspector to identify the cause, but this hasn't revealed anything.
The highlighted area in the screenshot above is where I'm referring to.
To complicate things further, this problem doesn't exist in the Android version.
Has anyone experienced this before, and if so, what was the cause and how do I fix it?
Edit: I've now determined the cause is an Animated View that's hanging about, it seems not all the child elements within it are having their opacity set to 0. I've attempted to address this using pointerEvents, but this just moves the problem to a different child element.
Anyone have any suggestions?
The issue turned out to be that the parent was having it's height changed during the show and hide events to avoid this same issue in Android, so we need to only change it if the platform is Android.
this.setState({height: (Platform.OS === 'ios') ? 50: 0});

Glimpse screen takes up the whole page. How to resize it?

I have an irritating problem with Glimpse.
I wanted to see everything I can on a Glimpse tab so I maximised it's size on the page.
Now I cannot resize it back again. There is no edge I can drag down. I am sure there is a simple way of sorting this. I tried switching off Glimpse, but when I switched it back on again it was taking up the whole screen again. I don't want to install and uninstall, so how do I fix this easily?
I am using ie10
I find a way of fixing this, which is to go into Developer Tools and change the css settings dynamically by using the CSS top class, replacing another class like margin, and putting in 200px and then resizing from that.
Another option is launch the Glimpse as Standalone tool.

confusion about chrome extensions iframe dimensions and scrolling

So I really hate the way chrome extension development works so I decided to make a regular webapp and use an iframe in my extension. Everything works fine, except for the dimensions of the website and the scrolling on the extension/site.
When developing the site, I knew I was going to use an iframe so I used percentages when formatting the site, for the most part I used 100% on most divs and textboxes. Anyway, the problem I am facing is that the scroll is extremely wonky on the extension for instance this is a picture of my extension with 400px height:
400x400. Everything looks fine.
and here is my extension with 800px height:
400x800. Scroll appears.
Why is the scroll appearing if I am merely making the extension longer? It doesn't make sense to me.
Any idea why this is happening?
There is a limit on the size of the popup window. I don't know the exact dimensions though.
You cannot increase the size of the document past it, scroll will appear.

Page width bug when inserting AddThis code

I use AddThis on most pages on my website for sharing on social networks. Pages that have the AddThis code are very very wide, because of the AddThis code, as seen in the horizontal scroll bar (Please see example below). Removing the code fixes everything and the page width is back to normal. I can't seem to put my finger on the why this happens with the AddThis code. Please help!
Please click on link for example:
http://roshtof.co.il/events.php
This is due to right to left language
This is what make the problem in your code:
-10000px!important
After I remove it the scroll is fix.

ModalPopupExtender adding scrollbars in SharePoint

Whenever I show a ModalPopupExtender on my Sharepoint site, the popup shown creates both horizontal and vertical scrollbars. If you scroll all the way to the end of the page, the scrollbar refreshes, and there is more page to scroll through. Basically, I think the popup is setting its bounds beyond the end of the page. Has anyone run into this? Searching Google, it seems this may be a known problem, but I haven't found a good solution that doesn't include recompiling AJAX, which my boss will not allow.
Hacky answer would be to grab the IE Developer Toolbar, find the tag that has the scrollbar, and alter your CSS file to add the overflow:hidden property to it.
I assume the TargetControl is of sufficient size to hold everything you put in it? If so, try:
Set CSS overflow:hidden;
If the target control is a Panel, set scrollbars="none". Otherwise, put it in a panel and try it.

Resources