Android devices still allow access to elements even when they are hidden using overflow

Contained within a parent div with overflow hidden is a Facebook-comments widget that is vertically cut off. This setup allows for showing only a portion of the content initially and expanding the parent container using jQuery.

While this method works well on most major browsers (including Safari for iPhone), it presents an issue on Android (tested on version 4.0, browser version unknown). In Android, even though the content outside the overflowed div remains invisible, it is still accessible. Users can click on links they cannot see, which is not the desired behavior.

The HTML structure is:

<div class="pageBlock column5050 column2">          
  <div style="" class="ext_container">
    <div data-mobile="false" data-width="" data-num-posts="10" data-href="http://na.se/redesign2012/kundcenter" class="fb-comments  fb_iframe_widget">
      <span style="height: 1049px; width: 550px;">
        <iframe scrolling="no" id="fcb3ba7898c46" name="f169222f1ff27fe" style="border: medium none; overflow: hidden; height: 1049px; width: 550px;" class="fb_ltr " src="https://www.facebook.com/plugins/comments.php?api_key=113851685335230&amp;channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D8%23cb%3Df12db7f9bc71f98%26origin%3Dhttp%253A%252F%252Fna.se%252Ffb9561675e1892%26domain%3Dna.se%26relation%3Dparent.parent&amp;href=http%3A%2F%2Fna.se%2Fredesign2012%2Fkundcenter&amp;locale=sv_SE&amp;mobile=false&amp;numposts=10&amp;sdk=joey&amp;width=550"></iframe>
      </span>
    </div>
  </div>
  <div class="fb_expand_btn expand_btn">
    <span class="expand_capt">Show more...</span>
  </div>
  <script type="text/javascript">
    [...]js/jQuery to expand/contract "ext_container"[..]
  </script>

</div>

All content inside "ext_container" is generated by the Facebook comments widget over which I have limited control due to using a third-party CMS.

The CSS being used includes:

.fb-comments {
  width: 100% !important;
}

.fb-comments span, .fb-comments iframe {
  width: 100% !important;
}


.ext_container {
  position: relative;
  height: 440px;
  overflow: hidden;
  margin: 0 20px 20px;
}

.fb_expand_btn.expand_btn {
  margin: 0 20px;
}

The script only adjusts the height of ext_container.

I set ext_container to position:relative to address an IE7 bug where overflow:hidden was ignored.

The 100% width settings are designed for a fully fluid layout.

If anyone has encountered this issue before and found a solution, I would greatly appreciate any help or advice.

androidcssfacebook-commentscoverflow

Answer №1

It seems like the iframe is inheriting the default browser width. Instead of just using a style to set the width, try explicitly setting the width attribute of the iframe.

In simple terms, consider adding the attribute to the iframe:

width="550"

Iframes and CSS can sometimes cause conflicts, especially with overflow issues. You might also want to set the height attribute for better control.

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 with TextFormField validation not being successful in Flutter for my specific scenario

I am facing an issue with 2 TextFormFields. The first TextFormField is supposed to get data from a bottom sheet and assign it to a controller. The second TextFormField is just a normal text field for entering text. Here is the code snippet: TextFormField( ...

androidiosflutterdartvalidation

API does not support the grant type

I'm attempting to retrieve a token from the server response. It works perfectly fine using Postman, but when I try to debug it on Android, I encounter an error: unsupported_grant_type Below is my code snippet: HttpClient client = new DefaultHttpC ...

javaandroidjsonapitoken

NullPointerException occurred during the invocation of an OnClickListener

Having trouble with a click listener for a file selection button. The error message is as follows: Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.Button.setOnClickListener I am familiar with null p ...

javaandroid

Creating a customized list item design using Bootstrap 3 and incorporating div elements

I have designed a custom li element with Bootstrap 3, but I am looking to achieve something specific. . Here is my current setup- HTML- <ul class="list-group"> <li class="list-group-item" id="baal"> <div style="display: inlin ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Visual feedback: screen flashes upon clicking to add a class with jQuery

I have successfully added a click event to my pricing tables in order to apply an animation class on mobile devices. However, I am facing an issue where every time I click on a pricing option on my iPhone, the screen flashes before the class is applied. Is ...

javascriptjquerycssiphone

Creating a layout of <video> components in vue.js, complete with the ability to rearrange and resize them through drag and drop functionality

Despite trying numerous libraries and Vue.js plugins, I have yet to find one that meets all of my requirements. I am in need of creating a grid of video HTML elements that are draggable and resizable with a consistent aspect ratio of 16:9. Additionally, I ...

javascripthtmlcsstypescriptvue.js

Make the image take up the entire screen in HTML

My goal is to display an image that fills the entire screen. Here's how my HTML code looks: <!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <title></title> </head> ...

androidcsshtml

Alter the hue on the fly

How can I change the color of a div based on whether it is currently red or green? I attempted the following code, but it doesn't seem to be working as expected. if ($(this).css("background-color")=="rgb(34,187,69)"|| $(this).css("background-color") ...

javascriptjqueryhtmlcss

Create a NfcV Write Lock Block instruction

Seeking to make data on a NXP ICODE SLIX SL2S2002 tag type 5 (ISO 15693) read-only by utilizing the WRITE SINGLE BLOCKS command through the NfcV object in an app based on Ionic: private readonly cmdISO15693 = { READ_SINGLE_BLOCK: 0x20, WRITE_SI ...

androidtypescriptnfcrfidiso-15693

Shift two tabs to the right in Qt, and keep the others on the left side

I am currently working on a layout design for my QtTabWidget and need to move two specific tabs to the right while keeping the rest of them aligned to the left. It's important to note that these tabs are static and not dynamically added during runtim ...

c++cssqt

Adjusting the heights of all elements with identical ids simultaneously

I found the following code: <div xmlns="http://www.w3.org/1999/xhtml" style="z-index: 1; position: absolute; top: 90px; left: 90px; background: none repeat scroll 0% 0% black; width: 800px;" id="mainDiv"> <div style="width: 405px;" class= ...

javascriptjqueryhtmlcss

Ways to expand media queries using sass

I have been using media queries to modify my code. @media (min-width: 576px) .modal-dialog { max-width: 500px; margin: 14% auto; } I want to change the media query, but after searching online, I couldn't find a suitable solution. I know the foll ...

csssassbootstrap-4media-queriesbootstrap-modal

Generating keyframes spontaneously, unable to remove commas

Initially, I acknowledge that this code may not be the most elegant. I have simplified it to show only the essentials. My objective is to dynamically create a @-webkit-keyframe based on input, generate a class, and then apply that class so an object can c ...

javascriptcssdynamickeyframe

Creating a div that expands to fill up the remaining height within a flex-child

I'm facing a challenge with a flex container that contains flex children. Within each flex child, there are two stacked divs, the first of which has an unknown height. My goal is to make the second div fill the remaining height available. I've be ...

cssflexbox

I'm wondering why myDivId.toggle() is functioning properly but myDivClass.toggle() is not working as expected

Using JQuery's toggle() function, I have been able to hide and show some DIVs successfully. Recently, I discovered relationships between certain DIVs that allowed me to group them into a class. I decided to try toggling the entire class rather than ...

javascriptjquerycsshtmltoggle

Position the left floated element at the top, with all preceding siblings floated to the right

Is there a way to rearrange the HTML structure using CSS only to move Content 3 Div (div3) to the top? The sequence of elements cannot be changed. I attempted to use negative margin, but it only works if the height of Div 1 and 2 is fixed. However, the co ...

csscss-float

Tips for replicating a float layout with CSS grid

In the layout I have designed, there is an image on the left and text content on the right. The structure resembles this: .left { max-width: calc(100% - 150px); float: left; } img { width: 300px; max-width: 100%; } <div class="wrapper"> ...

csscss-floatcss-grid

Establishing Connections in the Realm

As I work on integrating Realm, I've noticed that in order to establish a relationship, it needs to be set (and presumably managed) on both sides. Category.java private String name; private RealmList<Subcategory> subcategories; // Accessors no ...

androidrealm

How can I retrieve the background color of the WordPress admin page?

Is there a way in PHP to extract the current active colors of specific elements like #wpadminbar or #adminmenu .wp-submenu from the admin page for my plugin? I am not interested in getting the schema names (base, focus, current)! Here is an example code s ...

phpcsswordpresscolorsadmin

Cells within a table are equivalent

I am attempting to ensure that all table cells match the size of the image, but for some reason, they are not aligning properly. Visit this link for reference. Here is a condensed version of the HTML code: <table> <tr> <td> ...

htmlcss