When setting up React VR you get a bundle with already customized full screen button and a button for straightening up camera, which has no name and no customization options:
I have changed the camera rotation principle in client.js and now the button is not working correctly.
How is that button called?
Is there an API for it to customize it?
Is there a way to disable it?
This is kind of a hack but...
That is injected once the app inits and at this time I know of no API to customize it but the good news is it is DOM. You could add some CSS to your page to disable it or restyle it (assuming you have no other SVGs on your page).
svg {
display: none
}
Related
I have setup my react.js eairler, everytime I import bootstrap related thing (Container, Row, Col, etc) and than put it on the application, the screen turns out to be white.
HTML and CSS get to be completely disabled, web page turn into completely white. What do you think the solution for this problem?
Have you followed the setup guide from react-bootstrap?
https://react-bootstrap.github.io/getting-started/introduction
Also, maybe your browser javascript is disabled, try another browser, and when you inspect the page, do you can see the bootstrap elements?
I'm using material UI 4.9.x and it doesn't seem possible to use MUI in an iframe with the global styles.
I'm trying to use a React portal to inject the content into the iframe.
THAT part works and my MUI context menu works properly, just has the wrong styles.
I'm trying to inject the styles via CssBaseline but that gets injected into the host window not the iframe window.
I've verified this by looking at the DOM and I can see the elements created there under and not in the iframe.
How would I go about injecting this, completely, into the iframe window.
One idea I had was to change the current / global document and window objects to represent the iframe but worried that might be too hacky.
I'm creating a third-party app, which is loaded through an iframe.
The iframe creates a draggable element in side it.
On first page load (before scrolling the page), the draggable (slider) works fine.
But after scrolling the page behind the iframe, it's hard to get the slider to slide again.
(Note that this is a mobile issue, safari on iOS especially, but also chrome on iOS)
In the following demo I have used the GSAP Draggable library with react to create the draggable element but have also tried to code it in plain react with no luck.
Here is a demo: https://unfjl.csb.app/
I have tried a lot of different things (css, touchevents etc), but cannot get it to work...
What could cause this behaviour?
Update (no iframe example)
Demo no iframe: https://p5cu9.csb.app/
Same example with slider as above, but in this example the draggable is rendered directly in the DOM and not in an iframe. The problem still occurs. I suspect it has something to do with the fixed css position of the slider...
This is gonna sound really strange, but a bug in iOS Safari causes that and the only way I know of to get around it (which I discovered today via Googling) is to add a "touchstart" listener to the of the top-level page (not the iframe)!
document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
That isn't something I can add to Draggable because it wouldn't be able to access the parent document (outside the iframe) to add that properly (security restrictions in the browser).
You could also add a touchforcechange listener that prevents the default behavior (I'll be adding that to Draggable itself too):
yourDraggableElement.addEventListener("touchforcechange", function(event) {
event.preventDefault();
});
Browser bugs are fun, aren't they?! ;)
(Originally answered in the GreenSock forums at https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225)
I am using the ReactJS version of the CanvasJS library.
I have some charts laid out on the screen such that they take up close to 100% height and width on a mobile device.
When I place my fingers on the chart and drag (in order to scroll down the page), I am unable to scroll. This issue doesn't happen on other parts of the page where I don't have the chart.
Is there any way to get scrolling working properly when touching these charts on mobile?
Figured it out.
I had the CanvasJS component wrapped inside a div component.
This div component had the following CSS attributes applied to it:
overflow-y:auto;
overflow:scroll;
overflow-x:auto;
Once I removed those CSS attributes (which didn't need to be there in the first place) I was able to touch-drag on the chart component on mobile.
I'm using the Ext.device.Camera component to take photos in my sencha touch app. I'd like to change some things of this component:
Change the text of the buttons retake and use
Add a button to show the camera roll (The camera roll view is ready, so the button will only change the view)
After the call at success function I would like that the camera won't close and it gives the possibility to the user to take another photo
Thanks
You cant do that from ST2. That's native stuff, if you are wrapping with phonegap/cordova you could create a custom plugin.