My code is here.
The p-in-p button of the MediaPlayer triggers the MiniPlayer component.
And the react-draggable package is used in MiniPlayer component.
The top-left button works on the computer; however, it does not work in the mobile device.
When I remove the <Draggable> tag from the MiniPlayer.js, the top-left button works on mobile again.
How can I fix the problem?
react-draggable works on mobiles. It seems onClick or onChange inside <Draggable> are disabled on mobiles (or on touch devices in general).
To make elements inside the drag component clickable, set as cancel the selector of those elements.
<Draggable cancel=".btn">
<div>
...
<button className="btn">click</button>
</div>
</Draggable>```
Related
I use React MUI and some components disable my draggables.
I have put draggables on my page, that works perfectly.
When my draggable is dragged, I change some nodes in the page.
I'm on React MUI and I use tooltips, modals and menus on that page. After opening one of them and close it, no draggables can be dragged anymore. I mean that changing some nodes in the page makes that the drag ends directly.
Is there an event inserted or something like that that ends the drag action if an element is changing in the page ?
I found a workaround.
Actually this happens on Chrome and Safari only. Adding a setTimeout of 10ms before changing the DOM makes the job.
I am using React and Semantic UI for my website and I'm looking to create a modal popup to provide some action items on the page.
Currently, with Semantic's Modal, you must choose between three dimmer options (Default, inverted and blurring). In my case, I want the pop-up to appear, but I don't want ANY overlay. The page behind the model should appear as normal. Strangely, this isn't easy/obvious to implement.
On my page, I have the following example model code.
<Modal dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
<Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image>
<Modal.Description>
<p>Some contents.</p>
</Modal.Description>
</Modal.Content>
</Modal>
The three options (default,inverted and blur) obviously don't work.
I have tried using styling to set the background color to transparent and other optoins, but nothing seems to work.
<Modal style={{backgroundColor: "transparent"}} dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
I know there must be an easy solution here..what is it?
Thx for your help.
Is used to be possible to set dimmer={false}, but this is deprecated (see link below) according to the documentation, and you will need to use styling in order to make it transparent, so your solution is close to what you need to do. If you inspect the rendered Modal, you'll see that you need to override the background-color of the .ui.dimmer css class. You should be able to do that in your component's stylesheet.
https://github.com/Semantic-Org/Semantic-UI-React/pull/2882
So do I need to remove the from the Dom ? If so how do I do this ? I have an control on an SPFX Extension within SharePoint. The panel works fine and the props and the state is ok. when I click close the panel closes, but it doesn't trash the object - this means that the screen in the background remains grey.
I have used the react developer tools and I have been through all the states and I cannot find one that 'removes the component from the DOM' as such. I need the object completely going.
<Panel
headerText='Case Approval'
type={PanelType.medium}
onRenderFooterContent={this._onRenderFooterContent}
isOpen={this.state.showPanel}
isHiddenOnDismiss={this.state.hidden}
onDismiss={this._hidePanel}
focusTrapZoneProps={{}}
hasCloseButton = {this.state.hasCloseButton}>
I have a react component that is supposed to act like react native touchable opacity component. Right now it works great, but only on touchscreen. Should I also make it work for mouse down/up events as well?
If you want more interactivity, probably you can make us of onMouseEnter and onMouseLeave event. or else you can simply use css :hover to add style to the element
I'm working on a mapping app using ionic and leaflet. Note that I am not using the leaflet angular directive, I am using straight JS for the leaflet map (I know, I know...).
The initial state in my app loads the leaflet map just fine. If I switch to another state and back to the map everything is also fine. However, if I launch the app, switch to a different state and open a modal window in that state, then return to the original state, the map is broken and displays a number of grey tiles. The map will not update until the browser window resizes or the orientation of the mobile device is changed.
Here's a demo on Plunker: http://plnkr.co/edit/w67K2b?p=preview. To reproduce:
Click the button at the right side of the navbar which will take you to a different state.
Click the 'Back to map' button to go back to the original state. The map looks just fine.
Click the button in the navbar again.
Click the 'Open modal' button and then close the modal.
Click the 'Back to map' button and you will see that the map is now broken.
I've seen other people report issues with grey tiles, which typically can be resolved with a call to:
map.invalidateSize()
Unfortunately this does not resolve my issue. I'm pretty much a newb, but I think the problem is that when the modal opens, the invalidateSize() method in the leaflet source code is run, since the map div is not visible, the 'size' gets set to x:0, y:0 which ends up breaking the map when I transition back to the original state.
I'm not really sure where to go from here. Perhaps I can use JS to dynamically resize the div and trick leaflet into thinking a resize event has occurred? How would I do this? Any other thoughts?
Thanks!