Facebook Like Box Overflow Hidden

I have included the Facebook like box code on my website. However for some reason when viewed on an iPad the embedded Youtube links show outside the iframe (the other content does not). I have tried wrapping this with a div and applying overflow: hidden but still no joy.

facebook like box overflow hidden

I want to put facebook like button of my fb page on website. I am using iframe, when I place this i frame in html file then it works, but when I place it in php file then it doesn't display anything. please help me to solve it, Thanks a lot !

Unfortunately, the numbers for the website of my employer is nowhere near 22'000, so the powers that be have decided that we should not show the number of "likes" until said number is a little more in our favour. As far as I know, I don't have access to the layout of the button through Javascript or CSS (it's in an iframe served by facebook). Are there any other ways to hide the count?

Due to a change Facebook recently made in the way comment dialogs display, we had to change how we were hiding it. The way they show the comment dialog has been 'moving' the content inside of the my overflow:hidden element so that the button looks really odd to the user after they click the like button.

View the source code of your likebox via developer tools in chrome or FF. Copy the iframe code and replace the likebox plugin code taken from facebook with the iframe code. You can then change iframe widths and heights etc.

overflow controls how children are measured and displayed. overflow: hidden causes views to be clipped while overflow: scroll causes views to be measured independently of their parents' main axis. It works like overflow in CSS (default: visible). See for more details.

Agree with BrynJ, best solution currently is to put the like button in a 20px high div container, and set the overflow to hidden (I read somewhere that FB recently moved the comment flyout into the iFrame, so the solution that modifies the styling of .fb_edge_widget_with_comment is probably not useful anymore for iFrame users).

EDIT:Sorry, the Activity Feed isn't the same feed as the Like Box stream. In fact, I don't think Facebook offers another plugin with that feature. If you really want that section gone from your page, the only thing I can think of is placing the iframe in a div with "overflow: hidden;" and with the iframe "position: relative; top: -63px;"

I've noticed that the difference between hidden and unhidden container, that is, removing my 'hide' class from div#fb_like_button, the and that facebook places inside div.fb-like changes style attributes width and height.

So when the largest social developer platform in the world came to us and said they wanted to partner with us, we were all ears. And because of that partnership, we are proud to announce that facebook.stackoverflow.com is launching today as the new official developer support channel for all Facebook developers.

@jenniferdoser Ok first, you need to follow the XFBML way if you want insights, and the dropdown message box on the like buttons.Then follow this tutorial: -tutorials/how-to-get-facebook-insights-for-your-wordpress-site/

"@context": " ", "@type": "FAQPage", "mainEntity": [ "@type": "Question", "name": "What is an overflow in CSS?", "acceptedAnswer": "@type": "Answer", "text": "Overflow is a property of the CSS box model used to control content wrapping in various parts of a web document, such as inside elements with a specified height but is too small to contain all their content." , "@type": "Question", "name": "How do I fix overflowing in CSS?", "acceptedAnswer": "@type": "Answer", "text": "The text-overflow property does not permit the content of the flex element to shrink below its minimum content size. To fix this, you must set the overflow value to something other than visible. One solution is to override the default CSS with your own styles." , "@type": "Question", "name": "Why we use overflow hidden in CSS?", "acceptedAnswer": "@type": "Answer", "text": "Margin automatically centers an element, and overflow: hidden prevents scrollbars from showing up." ]You know content positioning in web design is important, right? Centering a div is literally the most famous topic in the web developer community. Yes, I am not lying : (

So in this blog, we discussed CSS overflow in detail, including how we can use the CSS overflow, different values of CSS overflow, browser compatibility, its importance, and finally, responsive testing of our websites using tools like LT Browser.

Animated Gifs are coming to React Native Android in .13. Also Android does not support overflow: visible so in order to get android to work we would need to get creative. On open they sit within the overflow: hidden container, once slid in we'd have to move them outside. Although they are gifs, so you'd have to find a way to sync em up.

We need to do a setState to make the containers overflow hidden. This is tricky because it'll instantly cause anything selected to be hidden. So we'll need to account for this in our release function later. But at the moment, we set open to false.

The loading attribute affects iframes differently than images, depending on whether the iframe is hidden. (Hidden iframes are often used for analytics or communication purposes.) Chrome uses the following criteria to determine whether an iframe is hidden:The iframe's width and height are 4px or smaller.display: none or visibility: hidden is applied.The iframe is placed off-screen using negative X or Y positioning.This criteria applies to both loading=lazy and loading=auto.If an iframe meets any of these conditions, Chrome considers it hidden and won't lazy-load it in most cases. iframes that aren't hidden will only load when they're within the load-in distance threshold. Chrome shows a placeholder for lazy-loaded iframes that are still being fetched.What impact might we see from lazy-loading popular iframe embeds? #What if we could change the web at large so that lazy-loading offscreen iframes was the default? It would look a little like this:Lazy-loading YouTube video embeds (saves 500KB on initial page load):

Here we created a large shadow around the psuedo-element without any blur (second 0 parameter), so we get an enlarged copy of the element around it. Thanks to the overflow:hidden in the box, anything outside of it is hidden. You should get something like this:

• Call Toll Free:888-601-5359 Privacy & Terms of Use Sitemap

/* ==================================================// fancyBox v3.5.7// ==================================================*/body.compensate-for-scrollbaroverflow:hidden.fancybox-activeheight:auto.fancybox-is-hiddenleft:-9999px;margin:0;position:absolute!important;top:-9999px;visibility:hidden.fancybox-container-webkit-backface-visibility:hidden;height:100%;left:0;outline:none;position:fixed;-webkit-tap-highlight-color:transparent;top:0;-ms-touch-action:manipulation;touch-action:manipulation;transform:translateZ(0);width:100%;z-index:9999999999999999.fancybox-container *box-sizing:border-box.fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-stagebottom:0;left:0;position:absolute;right:0;top:0.fancybox-outer-webkit-overflow-scrolling:touch;overflow-y:auto.fancybox-bgbackground:#1e1e1e;opacity:0;transition-duration:inherit;transition-property:opacity;transition-timing-function:cubic-bezier(.47,0,.74,.71).fancybox-is-open .fancybox-bgopacity:.9;transition-timing-function:cubic-bezier(.22,.61,.36,1).fancybox-caption,.fancybox-infobar,.fancybox-navigation .fancybox-button,.fancybox-toolbardirection:ltr;opacity:0;position:absolute;transition:opacity .25s ease,visibility 0s ease .25s;visibility:hidden;z-index:99997.fancybox-show-caption .fancybox-caption,.fancybox-show-infobar .fancybox-infobar,.fancybox-show-nav .fancybox-navigation .fancybox-button,.fancybox-show-toolbar .fancybox-toolbaropacity:1;transition:opacity .25s ease 0s,visibility 0s ease 0s;visibility:visible.fancybox-infobarcolor:#ccc;font-size:13px;-webkit-font-smoothing:subpixel-antialiased;height:44px;left:0;line-height:44px;min-width:44px;mix-blend-mode:difference;padding:0 10px;pointer-events:none;top:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none.fancybox-toolbarright:0;top:0.fancybox-stagedirection:ltr;overflow:visible;transform:translateZ(0);z-index:99994.fancybox-is-open .fancybox-stageoverflow:hidden.fancybox-slide-webkit-backface-visibility:hidden;display:none;height:100%;left:0;outline:none;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:absolute;text-align:center;top:0;transition-property:transform,opacity;white-space:normal;width:100%;z-index:99994.fancybox-slide:beforecontent:"";display:inline-block;font-size:0;height:100%;vertical-align:middle;width:0.fancybox-is-sliding .fancybox-slide,.fancybox-slide--current,.fancybox-slide--next,.fancybox-slide--previousdisplay:block.fancybox-slide--imageoverflow:hidden;padding:44px 0.fancybox-slide--image:beforedisplay:none.fancybox-slide--htmlpadding:6px.fancybox-contentbackground:#fff;display:inline-block;margin:0;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:relative;text-align:left;vertical-align:middle.fancybox-slide--image .fancybox-contentanimation-timing-function:cubic-bezier(.5,0,.14,1);-webkit-backface-visibility:hidden;background:transparent;background-repeat:no-repeat;background-size:100% 100%;left:0;max-width:none;overflow:visible;padding:0;position:absolute;top:0;transform-origin:top left;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:99995.fancybox-can-zoomOut .fancybox-contentcursor:zoom-out.fancybox-can-zoomIn .fancybox-contentcursor:zoom-in.fancybox-can-pan .fancybox-content,.fancybox-can-swipe .fancybox-contentcursor:grab.fancybox-is-grabbing .fancybox-contentcursor:grabbing.fancybox-container [data-selectable=true]cursor:text.fancybox-image,.fancybox-spaceballbackground:transparent;border:0;height:100%;left:0;margin:0;max-height:none;max-width:none;padding:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%.fancybox-spaceballz-index:1.fancybox-slide--iframe .fancybox-content,.fancybox-slide--map .fancybox-content,.fancybox-slide--pdf .fancybox-content,.fancybox-slide--video .fancybox-contentheight:100%;overflow:visible;padding:0;width:100%.fancybox-slide--video .fancybox-contentbackground:#000.fancybox-slide--map .fancybox-contentbackground:#e5e3df.fancybox-slide--iframe .fancybox-contentbackground:#fff.fancybox-iframe,.fancybox-videobackground:transparent;border:0;display:block;height:100%;margin:0;overflow:hidden;padding:0;width:100%.fancybox-iframeleft:0;position:absolute;top:0.fancybox-errorbackground:#fff;cursor:default;max-width:400px;padding:40px;width:100%.fancybox-error pcolor:#444;font-size:16px;line-height:20px;margin:0;padding:0.fancybox-buttonbackground:rgba(30,30,30,.6);border:0;border-radius:0;box-shadow:none;cursor:pointer;display:inline-block;height:44px;margin:0;padding:10px;position:relative;transition:color .2s;vertical-align:top;visibility:inherit;width:44px.fancybox-button,.fancybox-button:link,.fancybox-button:visitedcolor:#ccc.fancybox-button:hovercolor:#fff.fancybox-button:focusoutline:none.fancybox-button.fancybox-focusoutline:1px dotted.fancybox-button[disabled],.fancybox-button[disabled]:hovercolor:#888;cursor:default;outline:none.fancybox-button divheight:100%.fancybox-button svgdisplay:block;height:100%;overflow:visible;position:relative;width:100%.fancybox-button svg pathfill:currentColor;stroke-width:0.fancybox-button--fsenter svg:nth-child(2),.fancybox-button--fsexit svg:first-child,.fancybox-button--pause svg:first-child,.fancybox-button--play svg:nth-child(2)display:none.fancybox-progressbackground:#ff5268;height:2px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:99998.fancybox-close-smallbackground:transparent;border:0;border-radius:0;color:#ccc;cursor:pointer;opacity:.8;padding:8px;position:absolute;right:-12px;top:-44px;z-index:401.fancybox-close-small:hovercolor:#fff;opacity:1.fancybox-slide--html .fancybox-close-smallcolor:currentColor;padding:10px;right:0;top:0.fancybox-slide--image.fancybox-is-scaling .fancybox-contentoverflow:hidden.fancybox-is-scaling .fancybox-close-small,.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-smalldisplay:none.fancybox-navigation .fancybox-buttonbackground-clip:content-box;height:100px;opacity:0;position:absolute;top:calc(50% - 50px);width:70px.fancybox-navigation .fancybox-button divpadding:7px.fancybox-navigation .fancybox-button--arrow_leftleft:0;left:env(safe-area-inset-left);padding:31px 26px 31px 6px.fancybox-navigation .fancybox-button--arrow_rightpadding:31px 6px 31px 26px;right:0;right:env(safe-area-inset-right).fancybox-captionbackground:linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.15) 65%,rgba(0,0,0,.075) 75.5%,rgba(0,0,0,.037) 82.85%,rgba(0,0,0,.019) 88%,transparent);bottom:0;color:#eee;font-size:14px;font-weight:400;left:0;line-height:1.5;padding:75px 44px 25px;pointer-events:none;right:0;text-align:center;z-index:99996@supports (padding:max(0px)).fancybox-captionpadding:75px max(44px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(44px,env(safe-area-inset-left)).fancybox-caption--separatemargin-top:-50px.fancybox-caption__bodymax-height:50vh;overflow:auto;pointer-events:all.fancybox-caption a,.fancybox-caption a:link,.fancybox-caption a:visitedcolor:#ccc;text-decoration:none.fancybox-caption a:hovercolor:#fff;text-decoration:underline.fancybox-loadinganimation:a 1s linear infinite;background:transparent;border:4px solid #888;border-bottom-color:#fff;border-radius:50%;height:50px;left:50%;margin:-25px 0 0 -25px;opacity:.7;padding:0;position:absolute;top:50%;width:50px;z-index:99999@keyframes atotransform:rotate(1turn).fancybox-animatedtransition-timing-function:cubic-bezier(0,0,.25,1).fancybox-fx-slide.fancybox-slide--previousopacity:0;transform:translate3d(-100%,0,0).fancybox-fx-slide.fancybox-slide--nextopacity:0;transform:translate3d(100%,0,0).fancybox-fx-slide.fancybox-slide--currentopacity:1;transform:translateZ(0).fancybox-fx-fade.fancybox-slide--next,.fancybox-fx-fade.fancybox-slide--previousopacity:0;transition-timing-function:cubic-bezier(.19,1,.22,1).fancybox-fx-fade.fancybox-slide--currentopacity:1.fancybox-fx-zoom-in-out.fancybox-slide--previousopacity:0;transform:scale3d(1.5,1.5,1.5).fancybox-fx-zoom-in-out.fancybox-slide--nextopacity:0;transform:scale3d(.5,.5,.5).fancybox-fx-zoom-in-out.fancybox-slide--currentopacity:1;transform:scaleX(1).fancybox-fx-rotate.fancybox-slide--previousopacity:0;transform:rotate(-1turn).fancybox-fx-rotate.fancybox-slide--nextopacity:0;transform:rotate(1turn).fancybox-fx-rotate.fancybox-slide--currentopacity:1;transform:rotate(0deg).fancybox-fx-circular.fancybox-slide--previousopacity:0;transform:scale3d(0,0,0) translate3d(-100%,0,0).fancybox-fx-circular.fancybox-slide--nextopacity:0;transform:scale3d(0,0,0) translate3d(100%,0,0).fancybox-fx-circular.fancybox-slide--currentopacity:1;transform:scaleX(1) translateZ(0).fancybox-fx-tube.fancybox-slide--previoustransform:translate3d(-100%,0,0) scale(.1) skew(-10deg).fancybox-fx-tube.fancybox-slide--nexttransform:translate3d(100%,0,0) scale(.1) skew(10deg).fancybox-fx-tube.fancybox-slide--currenttransform:translateZ(0) scale(1)@media (max-height:576px).fancybox-slidepadding-left:6px;padding-right:6px.fancybox-slide--imagepadding:6px 0.fancybox-close-smallright:-6px.fancybox-slide--image .fancybox-close-smallbackground:#4e4e4e;color:#f2f4f6;height:36px;opacity:1;padding:6px;right:0;top:0;width:36px.fancybox-captionpadding-left:12px;padding-right:12px@supports (padding:max(0px)).fancybox-captionpadding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right)).fancybox-sharebackground:#f4f4f4;border-radius:3px;max-width:90%;padding:30px;text-align:center.fancybox-share h1color:#222;font-size:35px;font-weight:700;margin:0 0 20px.fancybox-share pmargin:0;padding:0.fancybox-share__buttonborder:0;border-radius:3px;display:inline-block;font-size:14px;font-weight:700;line-height:40px;margin:0 5px 10px;min-width:130px;padding:0 15px;text-decoration:none;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap.fancybox-share__button:link,.fancybox-share__button:visitedcolor:#fff.fancybox-share__button:hovertext-decoration:none.fancybox-share__button--fbbackground:#3b5998.fancybox-share__button--fb:hoverbackground:#344e86.fancybox-share__button--ptbackground:#bd081d.fancybox-share__button--pt:hoverbackground:#aa0719.fancybox-share__button--twbackground:#1da1f2.fancybox-share__button--tw:hoverbackground:#0d95e8.fancybox-share__button svgheight:25px;margin-right:7px;position:relative;top:-1px;vertical-align:middle;width:25px.fancybox-share__button svg pathfill:#fff.fancybox-share__inputbackground:transparent;border:0;border-bottom:1px solid #d7d7d7;border-radius:0;color:#5d5b5b;font-size:14px;margin:10px 0 0;outline:none;padding:10px 15px;width:100%.fancybox-thumbsbackground:#ddd;bottom:0;display:none;margin:0;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;padding:2px 2px 4px;position:absolute;right:0;-webkit-tap-highlight-color:rgba(0,0,0,0);top:0;width:212px;z-index:99995.fancybox-thumbs-xoverflow-x:auto;overflow-y:hidden.fancybox-show-thumbs .fancybox-thumbsdisplay:block.fancybox-show-thumbs .fancybox-innerright:212px.fancybox-thumbs__listfont-size:0;height:100%;list-style:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:0;position:absolute;position:relative;white-space:nowrap;width:100%.fancybox-thumbs-x .fancybox-thumbs__listoverflow:hidden.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbarwidth:7px.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-trackbackground:#fff;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,.3).fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumbbackground:#2a2a2a;border-radius:10px.fancybox-thumbs__list a-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:rgba(0,0,0,.1);background-position:50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;float:left;height:75px;margin:2px;max-height:calc(100% - 8px);max-width:calc(50% - 4px);outline:none;overflow:hidden;padding:0;position:relative;-webkit-tap-highlight-color:transparent;width:100px.fancybox-thumbs__list a:beforeborder:6px solid #ff5268;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:all .2s cubic-bezier(.25,.46,.45,.94);z-index:99991.fancybox-thumbs__list a:focus:beforeopacity:.5.fancybox-thumbs__list a.fancybox-thumbs-active:beforeopacity:1@media (max-width:576px).fancybox-thumbswidth:110px.fancybox-show-thumbs .fancybox-innerright:110px.fancybox-thumbs__list amax-width:calc(100% - 10px).fx-popup-content-wrapper width: 1000px; max-width: 95%;display: none;/* *//* *//* */MenuSEO & Lead GenerationOrganic SearchSEO ServicesEnterprise SEO ServicesLocal SEO ServicesGoogle Local Services Ads ManagementSEO AuditsPage Speed & Core Web Vitals OptimizationDigital AdvertisingPPC Management ServicesEnterprise PPC Management ServicesProgrammatic Advertising ServicesAddressable Geofencing ServicesEmployment & Recruiting MarketingSocial MediaSocial Media AdvertisingEnterp