I have had a google +1 button on my site for more then a year and it all worked fine.
In the last couple of days this button started to create a horizontal scroll bar on my site.
I know that beacase when I remove the button the scroll bar disappears.
Here is my site: www.kitchen-guide.co.il
Any suggestions what should I do?
Thanks!
borrowing from superware's answer, was having the same problem... however, this worked for me:
iframe[id^="oauth2relay"] { position: fixed !important; }
Google's +1 button is adding the following iframe to the end of the page body:
<iframe name="oauth2relayXXXXXXXXX" id="oauth2relayXXXXXXXXX" src="https://accounts.google.com/o/oauth2/postmessageRelay?parent=http%3A%2F%2Fwww.example.com#rpctoken=XXXXXXXXX&forcesecure=1" style="width: 1px; height: 1px; position: absolute; left: -100px;"></iframe>
One workaround (to this Google bug) can be to include the following rule in your CSS:
iframe[id^="oauth2relay"] { left: auto !important; right: -100px !important; }
If your website is all RTL then it should work fine, but if it's also LTR (multilingual) you will have to somehow target that role on RTL pages only. Check resizenow.com.
The iframe is no longer used to render the information bubble.
therefor, the previously suggested solution will not work anymore.
To fix the issue define the data-onendinteraction callback attribute.
<div class="g-plusone" data-onendinteraction="gplusoneinteraction"></div>
Then, implement the interaction callback function:
window.gplusoneinteraction = function(params) {
$('iframe[id^="oauth2relay"]').next('div').css({left: 0, right: '-10000px'});
}
Related
I have integrated Google One Tap into my website. The login process works well on desktop, but on mobile, there is a horizontal scroll after logging in. It's also important to note that the direction of the website is right-to-left.
Following a user's sign-in, Google adds an empty <div> with the ID "g_a11y_announcement" at the end of the <body>:
It has the following CSS attributes:
#g_a11y_announcement {
height: 1px;
left: -10000px;
overflow: hidden;
position: absolute;
top: auto;
width: 1px;
}
I get a blank screen right after signing in because of a 10,000 pixel overflow:
Unfortunately, I can't share a link to my website, but taking this element out of the DOM removes the scrollbar.
There's no documentation on this <div> or how to tell Google One Tap that the page is right-to-left. The only solution I can think of is to override the CSS, but I don't want my application to be blocked by Google.
#g_a11y_announcement {
display: none;
}
What is the purpose of this <div>? Is there another solution that I am missing?
I have same problem like you, I resolved for first moment this problem on next way:
after logout I redirected on login page by window.location, I know thats not right answer for this problem but that will resolve for first, problem is because in this solution app will refresh
Rather than hiding the div completely, I moved it to the right when the page direction is right-to-left. The solution below uses the SASS parent selector to check the direction.
#g_a11y_announcement {
[dir="rtl"] & {
left: auto;
right: -10000px;
}
}
The only downside to this solution is that it could break if Google changes the One Tap implementation.
I am having trouble with two buttons at the top of my mobile site
www.thefriendlydentist.ie
They are clickable on desktop but on mobile I get no response?
The html is placed in the header of the WP theme.
<div id="topcontact-2" style="background-color:white;">
<p style="background-color:white;padding:none;"class="call-button" id="call-button"> CALL US </p>
<p style="background-color:white;padding:none;" class="call-button" id="email-button"> EMAIL US </p>
</div>
You need check your all elements (divs) properly, I strongly suggest you using mobile device toolbar on Chrome or Mozilla.
If you look on desktop browser using by mobile device toolbar, you will see the some elements overlapping the all page. So your buttons that you want to click stay behind of those elements.
- Option 1: remove overlapping elements
- Option 2: use z-index to manage them.
<div class="mobile-bg-fix-img-wrap">
<div class="mobile-bg-fix-img" style="/* width: 375px; *//* height: 767px; */"></div>
</div>
You can see in image how above elements fill the page.
How Z-Index Works?
All of us are quite comfortable set some x (left:10px) and y (top:10px) values to elements by using CSS but not for z-index. Z-index property defines the level of an HTML element on the screen. Let's check the elements below.
In brief, z-index will define the closeness of the elements to the user. In this sample you can assign elements like below:
red square z-index:10
blue circle z-index:56
white square z-index:985
in this order, nothing will change. In this case, we know that z-index is relative. Another important thing, we need to know about z-index, it will only work on an element whose position property has been explicitly set to absolute, fixed, or relative
To deep dive, please check the z-index documentation.
How to Activate Mobile Toolbar on Chrome?
Mobile toolbar shows how your elements are placed in a mobile browser. Using this tool, you can detect almost everything you would expect to see in a mobile browser. You can also inspect and alter your CSS codes easily.
Below image will guide you to how to activate mobile toolbar on Google Chrome.
Other Possibilites For The Problem
1. Javascript Blocking
Using javascript, you can override original behavior of an HTML element. Check below code, this will prevent the real action of the <a> element.
Non-clickable Link
Using JQuery
<script>
$(".prevent-click").click(function(){
return false;
})
</script>
Using Javascript
document.getElementsByClassName("prevent-click")[0].addEventListener('click', function (event) {
event.preventDefault();
return false;
});
Please check your codes carefully, is there any Javascript code to prevent the original action of HTML elements. In addition, to check this quickly, you can disable all javascript codes on Chrome by following steps below.
Open Developer Console
Go to Settings - right top corner of the inspection tool
Check the box (Disable Javascript)
Refresh the page.
Please go in to your CSS and make this change.
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
left: 0;
top: 0;
background-size: cover;
}
To:
.mobile-bg-fix-wrap .mobile-bg-fix-img {
position: absolute;
width: 100%;
height: 125%;
background-size: cover;
}
The top and left set to 0 was overlapping the two buttons causing it that you could not click on them.
HTML links not clickable on mobile, but are clickable on desktop.
I have one solution. Try this
Html
<a href="https://www.stackoverflow.com" class="goclick">
css
.goclick{
position: relative;
z-index: 9;
}
For this, go to Google Chrome > Developer tools.
Inspect the element, if it is being overlapped by anything, add clear: both;
to the overlapping element.
Actually, in my issue, it fixed everything.
for me, i had a class with...
z-index: -1
which was forcing the parent <div> to the back. changing this to 0 or simply removing it, solved the problem
ref: https://www.sitepoint.com/community/t/solved-href-not-working/248882/6
I have a WordPress site in development that seems to have a CSS issue that I cannot find. I installed the plugin AJAX Event Calendar and dropped its shortcode [calendar] in the page editor. That works as intended, but there is something pushing the calendar down somewhere in the neighborhood of 400 plus pixels. I've checked all containing divs, and the calendar divs as well. I also see no errors in the console. I just can't seem to locate what's pushing it down.
The page in question can be seen here.
in your custom.css file fix this:
#aec-container {
position: relative;
float: none;
}
with this:
#aec-container {
position: relative;
float: left;
}
i tried and it works.
Listen; I have read and read but couldn't find an answer that fit my problem.
I'm using Fancy Box on my website http://www.houdi.se/video.shtml but have the problem that the Fancy Box appears UNDER the menu when a video-link is clicked (its Responsive).
Viewed in a browser there's no problem since it fill up. BUT when narrowing the browser the menu problem arises. Also viewing the top video in an iPad.
I'm using Adaption-plugin from ProjectSeven for the website. It's a Responsive CSS layout: http://projectseven.com/products/templates/pagepacks/adaptations/index.htm
That plugin also uses Project Seven's Pop Menu Magic 2 for the menu.
I'm not a code wizard but I have tried to increase z-index but it didn't work OR I have not increased the rift one?
Have now spent several hours working with this problem and happy for all help I can get. Just tell me what code you want to see (or have to see).
Remove z-index from this div containing the menu:
<div id="p7PMM_1" class="p7PMMh19" style="position: relative; z-index: 999999;">
The reason that the menu is on top of fancybox is because you're including the script 7PMMscrips.js on the page which manipulates the z-index and position properties of the main menu.
An ease way of solving this would be to just add the following css to your main css file:
#p7PMM_1 {
position: static !important.
}
That would solve the issue but i would not recommend it as using !important is a really bad practice. You can read more about why here: What are the implications of using "!important" in CSS?.
If i where you I would look into removing this script and create the main nav with just pure css instead.
Im no expert but looking at your css file for the navigation bar you don't have any z-index so you could try adding it.
your fancy box css file has several and the lowest is z-index: 8010; so setting you navigation to below that should resolve it.
Try using this code:
.navigation {
background-color: #000000;
background-image: url(images/chameleon.jpg);
background-repeat: no-repeat;
background-position: 0px -60px;
position: relative;
z-index: 90;
}
We are having a problem with our facebook like/send button, if you open: http://apps.facebook.com/bymii-test/products.php?pageid=216605071714962&prd_id=35&prd_name=Coalesce: - click facebook send, the box is behind the facebook sidebar. Is there any way to: change the z-index - or to make the window pop up on the left?
I FINALLY FOUND THE ANSWER!! 1 1/2 Hours searching later.. just enter this code into your CSS file:
.fb_edge_widget_with_comment span.fb_edge_comment_widget {
top: 15px !important;
left: -250px !important;}
Hope this is what you were looking for, because it was exactly what I was looking for!
Make sure the parent/container element has css value "overflow:visible". It happens when "overflow:hidden". Hope this helps.
The way for it to popup up and over all of it is to make the like button work in XFBML. The iframe implementation is limited and if you change the height and width of it to just fit the button, the window will appear hidden.
I found this to work:
/* the below allows the fb:like iframe to show entirely instead of getting cropped off */
.fb-like iframe {
max-width: inherit;
}
/* the same issue with the "send" button */
.fb-send iframe {
max-width: inherit;
}
As you can see, it's asking those elements to "inherit" the width attributes of its parent elements.
Hope that helps.
I modified Shane's excellent solution to focus specifically on z-index:
css:
.fb_edge_widget_with_comment span.fb_edge_comment_widget
{
z-index:8 !important;
}
The above css code shows the Facebook widget above everything else, without having to relocate or "overflow" anything.
This is a common problem all developers are facing. The popup has no way to detect its relative position on a page or in an iframe.
To get the desired results i always install my like, send buttons on the left side of my page.