question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

PF4 Modal component is not draggable/movable

See original GitHub issue

We are missing the draggable/movable ability regarding the PF4 React Modal component. This is more like a feature request.

Sometimes it is very unpleasant not to see the important info under the dialog window. Having it draggable would solve such problems in any UI.

This could be relatively easily solved by using the PF3 component, but the effort is to go forward and to use only the PF4 components. Moving back and supporting PF3 is not a way to go, together with some other solutions we considered in my team.

This is blocking the BZ: https://bugzilla.redhat.com/show_bug.cgi?id=1744114

Thanks very much in advance for any info, comments, suggestions!

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:16 (12 by maintainers)

github_iconTop GitHub Comments

1reaction
mcarranocommented, Aug 20, 2021

@hstastna @sgratch After discussion with the team, we have decided that this is not something we want to support generally in PatternFly. It raises a11y concerns and feels very specific to your project. We have not had other requests for this. Therefore I am closing this out, but we could possibly advise you on creating a custom implementation that could be shared as a community extension if this is something you wanted to contribute back.

1reaction
sgratchcommented, Jul 21, 2021

@mcarrano @hstastna We are using FP4 React modals plugged into a GWT app for the RHV Admin portal UI. The main reason we need a draggable modal is to be as much consistent as we can with other admin portal GWT dialogs and the admin portal UI design as a concept.

There is no plan to convert all GWT dialogs to React since it’s too complicated so we need to support this combined UI. In the past Admin Portal users asked for this draggable option for the GWT dialogs so it is supported for GWT dialogs but not supported for PF4 react ones.

There is an important info within the content beneath the modal like the grids (vm list, hosts list etc) or the entity info and the user needs access to this info while editing the modal. That’s why we also canceled the defaulted backdrop dimmed when using a react modal within the Admin portal.

We won’t change it to use a Drawer since it’s not consistent - within the admin portal all edit dialogs are presented as modals and not as drawers.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Make bootstrap modal draggable and keep background usable
I'm trying to make a bootstrap modal draggable anywhere on the page and when the modal is open, I want the user to...
Read more >
Prevent dragging element when interacting with its children ...
It's strange because the Modal component is a portal, which means it's not inside the draggable element's DOM. It doesn't matter—that's how ...
Read more >
Movable Modal Windows - Feature Requests - Retool Forum
Yes, yes, yes! We need to be able to drag / move modals to be able to flexibly arrange windows to see all...
Read more >
[Drag And Drop Mobile] [iOS] Input widget not work well with ...
When "DropArea" and "popup-dialog" place in same block, the input widget that inside popup-dialog is not work. It have the same problem that ......
Read more >
react-modal-resizable-draggable - npm
This is a modal that support resizalbe and draggable function. Latest version: 0.1.6, last published: a year ago.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found