I can't find the comment bar on Facebook because it's hidden behind the social

Seeking assistance with an issue we're experiencing.

After someone clicks 'Like' on a product page, the comment section that drops down is getting hidden behind the Twitter and Google social buttons. I've tried adjusting the overflow settings without success. Changing the height seems to fix it, but I'd prefer to have it appear over the top instead. Any insights on what might be causing this?

Below is the code related to the Facebook button:

<div class="product-link">

    <iframe src="http://www.facebook.com/plugins/like.php?href=http://foscam-uk.com/indoor-ip-cameras/foscam-fi8918e-black-wired-ip-camera.html&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&appId=317980981630590"

        scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:auto; width:450px; height:30px">" </iframe>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="FoscamUK">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script><g:plusone size="medium"></g:plusone></div>


        </div>

Here's a link to a more specific product page for reference:

Thank you for your assistance.

Best regards

htmlcssfacebookmagento

Answer №1

Your iframe's height and overflow settings may not be working as expected.

Here is a suggestion to address this issue: Embed the iframe within a DIV element and style the DIV element like this:

<div id="foobar"><iframe …></div>

#foobar {
  height:   30px:
  overflow: hidden;
  position: relative;
  z-index: 1;
}
#foobar:hover {
  overflow: visible;
}

By implementing this solution, the comment bar should appear above the twitter/g+ buttons.

However, if you find that the faces of users who have already liked your page are overlapping with the buttons, consider removing the parameter &show_faces=true from your iframe's URL to better align with your page layout goals.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue encountered while presenting canvas on HTML due to Firebase information

Even though I believe I'm following the correct steps, I am facing an issue where the graph displaying real-time database values is not showing up. The first image shows my real-time database and a demostration as shown in images 2 and 3. While the da ...

javascripthtmlfirebasefirebase-realtime-databasecanvasjs

What is the best way to ensure that the draggable element remains visible on top of all other elements on the screen while being dragged?

Currently, I am working on implementing the drag and drop feature in SAPUI5 Table and Tree Table. In my project, there is a table containing names that need to be draggable, and a Tree Table where these names should be droppable. To achieve this function ...

jquerycssjquery-uisapui5

Unlock the full potential of ngx-export-as options with these simple steps

Being a newcomer to angular, I am currently working with a datatable to display a set of data. I have successfully implemented the functionality to export the table's data as a PDF using ngx-export-as library. However, when downloading the PDF, it inc ...

javascripthtmltypescriptdatatablesangular6

Looking to incorporate HTML and JavaScript to create two unique forms that can be submitted separately on a single webpage

If I can't find an answer, then I ask: There are two different forms on the page: one is the "ask for call" form (which appears on every page of the site) and the other is a simple "contact form" (specifically placed on the contact page). Both forms ...

javascriptjqueryhtmlforms

What is the best way to vertically align objects in ASP.NET?

After spending some time working with asp.net, I've run into a common issue of aligning objects with varying heights on the same row. For instance, I'm struggling to properly line up a search label, text field, and image button. What is the corre ...

asp.nethtmlcss

Addressing see-through box styling in CSS

When working on a website using HTML and CSS, I encountered an issue with a transparent box. All elements within this box are also transparent, but I want them to be solid without any opacity. How can I resolve this? .parent { display: inline-block; ...

htmlcssdjangoopacity

Implementing distinct CSS styles for both a tab page and progress bar within the same webpage using JQuery UI

I'm currently facing a challenge with incorporating a JQueryUI Progress Bar into a web page that already utilizes the styling of a JQueryUI Tab. The visual appearance of the tab panel and tabs has been customized using CSS, including the use of the .u ...

jquerycssjquery-ui

What is the best way to store article IDs using Javascript or HTML?

On my web page, I have a collection of links that users can interact with by clicking and leaving comments. These links are loaded through JSON, each with its unique identifier. But here's my dilemma - how can I determine which link has been clicked? ...

javascriptjqueryhtmljsonjquery-ui

How to make a specific table row stand out using AngularJS and CSS

Can you provide advice on how to highlight a specific row in a table? I have a table along with some angular code snippets. Here's an example: angular.module('myApp', []).controller('myTest', function($scope) { var data = []; ...

javascripthtmlcssangularjs

I am having trouble viewing my icons properly displayed in front of my buttons in HTML and CSS

I've been working on creating a background that, when hovered over, reveals 2 buttons with different icons on them. I'm trying to change the color of these icons from black to white using CSS. However, I'm facing an issue where I can't ...

htmlcss

Adding a stylish underline to text using HTML and CSS

Looking for some assistance with my Html and CSS website project. I am currently facing a challenge trying to place a border below the text as shown in the provided image. Below is the snippet of my Html code: <div class="Sectionheading"> ...

htmlcss

The mobile functionality of the stylesheet is not functioning properly

Recently, I came across an issue with a stylesheet designed for mobile devices that contains the following code: /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } Surprisingly, this code failed to work ...

cssmedia-type

I am facing an issue with the asynchronous function as it is displaying an error message

**I am facing an issue with displaying categories. I have attempted to do this using async function, however the data is not showing up** <div class="form-group"> <label for="category">Category</label> <select id="categor ...

htmlangulartypescript

Sort PHP results by the initial letter of the name in a stylish manner

Hello, I am attempting to organize categories by the first letter and format them using ul and li elements. Here is my code: $Sql = "SELECT *, COUNT(Cup_Id) AS num FROM tabcup INNER JOIN tabcats ON tabcupom.Cat_Id = tabcats.Cat_Id ...

phphtmlmysqlloops

Unable to locate webpage stylesheet

Could anyone help me figure out why my HTML page is not able to find my stylesheet? I am using the Django framework and running it on a localhost. Here is the HTML code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.or ...

pythonhtmlcssdjango

What is the best way to create a single HTML file that can showcase several different pages?

I am just starting out in web design, and I am currently working on a hobby project which is an e-commerce site. My issue is that I don't want to manually link every single product page. This would result in a large number of HTML files. Instead, I w ...

phphtmldynamicbinding

Issue with jQuery AJAX call: When submitting an HTML form, control is not being returned to the calling

I am facing an issue with my HTML form where it is loaded correctly into the DOM through a jQuery ajax call. The problem arises when I submit the form data to a PHP module using another jQuery ajax call. Even though the network traffic shows that the form ...

javascriptphpjqueryhtmlajax

Deactivate the ability to hold a button, but still permit clicking in HTML for mobile

I am currently developing a progressive web app for mobile devices. One feature I have implemented is the ability for users to long-press a button with their finger, triggering a popup menu that includes options like "copy link address," "copy text," and " ...

javascripthtmlcssprogressive-web-apps

How about displaying the Ajax response as an image?

I'm working on a script that pulls an image link, which seems to be functioning correctly. However, I am struggling with how to display the link as an image. Can someone please assist me with this? <script src="//ajax.googleapis.com/ajax/li ...

javascriptjqueryhtmlajax

React Fixed Footer Implementation against My Preferences

Here's an issue that I'm facing: https://i.stack.imgur.com/gtQqm.png The footer on my webpage is normally displayed at the bottom of the page. However, when the user performs certain actions that extend the size of the page: https://i.stack.im ...

htmlcssreactjsfooterfixed