bootstrap issue with instagram embed in react - reactjs

I am trying to embed instagram posts onto my page with a masonry grid (using card-columns). But somehow the leftmost posts don't show up.
Please refer to below sandbox.
https://codesandbox.io/s/nifty-solomon-ub8ro?file=/src/App.js
Edit:
on full browser tab: https://ub8ro.csb.app/ (you can see the issue here)

Related

How can I send a react component as an input to html2canvas and jsPdf?

I have a webpage I made in React. It renders some charts. The charts will appear slightly differently depending if the user is viewing the page on desktop or mobile.
I have used html2canvas and jsPDF to export the page to PDF. The problem is that I ALWAYS want to export the charts in the format seen in mobile view.
I have thought of the following:
rendering the mobile view inside a div with display set to none and using that div as the input to html2canvas. This does not work. I get an error.
Trying the above, but instead of using the hidden div, just send the div as the input to html2canvas inline. I do not know if you can even do this.
Using React-pdf to output the pdf. The problem here is that I do not know how to embed the charts when using react-pdf.
Does anyone have an idea of what I can try?
Thank you.

How to show sidebar router page in Tab

I am using DevExtreme react template in my react js project from below link.The router page navigation is working fine as per my requirement.I would like to know how to use router page navigation as in "Tab" instead of single page.For example if we take from below link,there are two pages in sidebar (profile and display data pages).If I click "Profile and display page" ,both the pages should display in Tab but currently its shows only current page.hope its clear.
https://devexpress.github.io/devextreme-react-template/#/home
I also want to note that you can contact DevExpress support team directly at Submit a Support Ticket. They answer questions in 24 hours, so you will be able to resolve the issue faster.

ReactJS project on Android WebView, Image not showing

I am currently experimenting on a hybrid app using ReactJS for my front-end loaded inside an Android WebView. On one of the pages, I have a list that loads an external/hosted image. Tapping on these images routes to another page that shows its description (using react-router. history=hashHistory).
Testing on the browser(chrome), the images appear once loaded. On the other hand, testing on the actual device, the images does not appear. Only when I tap the list item and press back (hashHistory.goBack) that it appears.
I know this is not the best use for ReactJS, but this is better than what we are currently using. Also, our current setup prevents us from pursuing the React Native way. Any ideas?
EDIT:
here's a screen cap:
You need to change your websettings in your code.
WebSettings settings = webView.getSettings();
settings.setDomStorageEnabled(true);

Onsen UI transition Effect delay

im developing my first app with onsen ui and angular js. I have a dude. When i navigate between differents links from my lateral menu the app show the last page before load the new page. I dont know how explain very well the problem.
The last page displayed is stuck before loading the new page.
If you want some code just tell me.
To see the problem on live my app is here: https://build.phonegap.com/apps/1282748/share
Thanks a lot

iframe auto height adjust not working

I am using the cakephp framework, and on my site i sell wordpress themes. When any user click on demos it take the user demo page where they can see demos of that theme. I am using i frame for showing demos. But the problem is that the height of the iframe is not auto adjust. The error which occur is
Permission dined
The demos theme is in same destination where whole project. But now i want that the iframe work for both weather it is on same place or out site the site.
My site URL is: http://www.wplegion.com/
And the path where all my demos are showing is: http://www.wplegion.com/themes/demo/8

Resources