Facebook comment cut off locally? - facebook

My facebook comment box is getting off vertically when I run my site locally with rails, but when I upload it to heroku and view it there it seems to autosize fine. Any idea why this might be? Is it because my localhost is unreachable from facebooks servers? Is there a way to get it to show properly locally?

Make sure the parent element has:
overflow: visible;

If you are using a Pluggin, you have to quit all the codes like
. facebook-comment { width: 95px !important; }
These codes are setting-up automatically by the plugin and don't work with all css functionalities.
Once you have done that, you can create a <div class> in your PHP console and adding it in your CSS file to customize your box as you want.

Related

Material UI Tabs not rendering properly on server

I am having a problem using the "Tabs" component: https://material-ui.com/components/tabs/ In fact, when developing locally, the rendering of the component is fine. But pushing to the server, it looks weird (with differences in the borders on each side of the bar).
Moreover: when refreshing the page in which it has been embedded or browsing manually to this page, the whole template is broken all of a sudden!
I tried generating a build folder locally and launching the page from that build, and fell back on the same problem.
Thank you in advance for your help
From your description, I saw that your "build" is not work even in local development. That's mean it should not work on the production, of course.
The thing is, what is your actual "build" action? Depends on what library/framework you use, but basically with Material-UI, most popular problem comes from not load some CSS before using it's components.
Please read here first: https://material-ui.com/guides/server-rendering/#server-rendering
Just in case you use Gatsby, read here: https://www.gatsbyjs.org/packages/gatsby-plugin-material-ui/.
I'm using Gatsby and use this following config to fix some CSS issues.
stylesProvider: {
injectFirst: true,
}
Hope this help.

Issues publishing to Git with Bootstrap Theme

I purchased a theme from Bootstrap and when I went to publish to GitHub, I get the below error:
Your site is having problems building: The variable
{{!-- ## owl.lazyload.js LazyLoad require class="owl-lazy" and link to image inside data: data-src="url_to_img" or/and data-src-retina="url_to_highres_img". There is also option to load images into background but this needs to be tested. See demo
Usage:
$('.owl-carousel').owlCarousel({ lazyLoad:true }
on line 35 in assets/plugins/OwlCarousel2-2.2.0/docs_src/templates/pages/docs/dev-buildin-plugins.hbs was not properly closed with }}.
The builder of the theme said to remove any files not needed. I did that but then only the repository name showed up. Rookie errors I'm sure but just not experienced enough to know what to do.
Thanks in advance

Print page content

I just started playing with google chrome apps. I've searched the internet and haven't found the way to print the content of the windows. Tried using windows.print(), but nothing happened.
As far as I have read, the print() wont work since it is called in the background.html that does not have any content. How can I make the call at the correct place and send the content of the app to the printer?
Thank you in advance!
You're right that this can't be done through the Background page, since it is not rendered. What you'll need to do is inject a "content script" into the page you would like to print. The content script would contain the print command, and probably whatever would trigger the print command.
In a nutshell, "content scripts" are scripts that are injected into the pages a user browses. You can inject pretty much any JavaScript you like, and even inject entire JavaScript libraries like JQuery. More details can be found here:
https://developer.chrome.com/extensions/content_scripts.html
If you decide to use a popup window to trigger the print you can pass a message to the window you would like to print. Message passing is how the different components of an extension (background page, content script, popup) communicate. More info can be found here:
http://developer.chrome.com/extensions/messaging.html
Printing in apps is not yet supported, I believe. See
Issue 131279: async version of window.print()

window.CavalryLogger error in Facebook App running in Facebook Page Tab

I have applications which are displayed as tabs in Facebook pages which have been working fine. They suddenly started displaying this output in the tab:
/1336720089,176820405/
if (window.CavalryLogger) { CavalryLogger.start_js(["EgxV3"]); }
__d("UFIUpdate",
Any ideas what is going on???
Here is a link to one of them: http://www.facebook.com/TweakShoes/app_132692060112327
A temporary solution is to add https:// to facebook itself. This doesn't solve the problem, but it'll allow you to see your page on a per client basis.
The best fix in the longer term until facebook fixes this issue is to go to your account settings > Security > Enable secure browsing. This will enforce HTTPS wherever it can and should resolve the issue for a lot of pages you're trying to access.
Good Luck!
After encountering this issue yesterday, I tracked it down to an apparent conflict with the JS log wrapper included as part of HTML5 Boilerplate's script.js file. In particular, the "make it safe to use console.log always" snippet. After commenting it out, the FB lib error went away and my app displayed properly.
I didn't dig into what the conflict was, but here is the snippet. If you use something similar on your page, then it may be worth investigating.
/* make it safe to use console.log always */
(function(b){function c(){}for(var d="assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,timeStamp,profile,profileEnd,time,timeEnd,trace,warn".split(","),a;a=d.pop();){b[a]=b[a]||c}})((function(){try
{console.log();return window.console;}catch(err){return window.console={};}})());
It's probably not a coincidence that FB's own logger bugs out with this.
Facebook has opened a bug for this issue and recently triaged it to medium priority - no word on when it will be addressed.

Standalone GWT Deployment

So, this is a pretty trivial thing to accomplish apparently, but for some reason it just will not work for me. I created a VERY SIMPLE GWT app. It uses UIBinder just to display a label and a button, no actual processing or handling takes place. I did this to test deploying the app using strictly JS and html that is not hosted by Eclipse and Jetty or whatever.
I compile my app, run it in eclipse, and it works fine. However, when I try to run the html page directly from the WAR directory, it does not work.
Do I need this running on a webserver for it to work? It is just html and js, so I shouldn't? I've been to the GWT site about deploying, and surfed quite a few forums. They seem to always mention the necessity of a server, but it seems like it should not be necessary?
Since it is a pure JavaScript and HTML it should work properly without server. Checkout this link: Compile and run in Production Mode with Eclipse
In your EntryPoint class, in onModuleLoad() there's a RootPanel.get("someDivId") call somewhere. Make sure your html page (=the host page) contains a div with that id.
Also make sure your host page calls the right java script file. It's easy to forget to edit the host page after you renamed your GWT module (see rename-to in your .gwt.xml), as the generated JavaScript file matches your module name.
This will work locally on all browsers except Chrome for security reasons.
See http://code.google.com/p/chromium/issues/detail?id=31068
and http://code.google.com/p/chromium/issues/detail?id=70088