Jak wyświetlić jeden materialowy Dialog nad drugim?

0

Dzień dobry,
jak zrobić aby drugi obiekt wyświetlić nad pierwszym obiektem? Próbowałem to zrobić sam, ale rezultat był taki że ten drugi obiekt chował się za pierwszym. Na chwilę obecną rozwiązałem to przez ukrywanie obiektów. To znaczy że jeżeli chce wyświetlić drugi obiekt nad pierwszym, to prostu ukrywam pierwszy.
Obiekty zbudowane są z Dialog.

import Dialog from "@mui/material/Dialog";

Pozdrawiam,
Łukasz

2

Tak najprościej, spróbuj dorzucić im z-index.

0
virusek391 napisał(a):

Dzień dobry,
jak zrobić aby drugi obiekt wyświetlić nad pierwszym obiektem? Próbowałem to zrobić sam, ale rezultat był taki że ten drugi obiekt chował się za pierwszym. Na chwilę obecną rozwiązałem to przez ukrywanie obiektów. To znaczy że jeżeli chce wyświetlić drugi obiekt nad pierwszym, to prostu ukrywam pierwszy.

A po co? Nakładające się okna dialogowe na siebie nie jest raczej w stylu material design, po co chcesz to robić?

2
virusek391 napisał(a):

@Riddle: W pierwszym oknie użytkownik wybiera kontrahenta do usunięcia, natomiast w drugim potwierdza czy na pewno chcę to zrobić.

@virusek391: To nie jest materialowe żeby wybierać jedną z pozycji w oknie dialogowym. Powinieneś mieć osobny widok (np stronę) do wyboru tego kontrahenta, a pytanie "czy na pewno chcesz to zrobić?" w oknie dialogowym.

1
virusek391 napisał(a):

@Riddle: Do wyboru kontrahenta używam dialog z selectem, natomiast do potwierdzenia komponent swal z https://sweetalert2.github.io/. Na chwilę obecną spełnia to moje oczekiwania :)

@virusek391: A czytałeś może jakikolwiek artykuł o UX okien dialogowych? Np https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116

0
Riddle napisał(a):
virusek391 napisał(a):

@Riddle: Do wyboru kontrahenta używam dialog z selectem, natomiast do potwierdzenia komponent swal z https://sweetalert2.github.io/. Na chwilę obecną spełnia to moje oczekiwania :)

@virusek391: A czytałeś może jakikolwiek artykuł o UX okien dialogowych? Np https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116

Nie, nie czytałem, ale przeczytam :) A to że wykorzystuje komponent Swal z SweetAlert2 to jakiś poważny błąd?

0
virusek391 napisał(a):
Riddle napisał(a):
virusek391 napisał(a):

@Riddle: Do wyboru kontrahenta używam dialog z selectem, natomiast do potwierdzenia komponent swal z https://sweetalert2.github.io/. Na chwilę obecną spełnia to moje oczekiwania :)

@virusek391: A czytałeś może jakikolwiek artykuł o UX okien dialogowych? Np https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116

Nie, nie czytałem, ale przeczytam :) A to że wykorzystuje komponent Swal z SweetAlert2 to jakiś poważny błąd?

Nie, ale to że robisz okno dialogowe na oknie dialogowym już tak.

Oraz to że próbujesz zrobić coś, czego biblioteka nie pozwala robić (czyli nachodzenie na siebie okien) też jest średnie.

0
Riddle napisał(a):
virusek391 napisał(a):
Riddle napisał(a):
virusek391 napisał(a):

@Riddle: Do wyboru kontrahenta używam dialog z selectem, natomiast do potwierdzenia komponent swal z https://sweetalert2.github.io/. Na chwilę obecną spełnia to moje oczekiwania :)

@virusek391: A czytałeś może jakikolwiek artykuł o UX okien dialogowych? Np https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116

Nie, nie czytałem, ale przeczytam :) A to że wykorzystuje komponent Swal z SweetAlert2 to jakiś poważny błąd?

Nie, ale to że robisz okno dialogowe na oknie dialogowym już tak.

Oraz to że próbujesz zrobić coś, czego biblioteka nie pozwala robić (czyli nachodzenie na siebie okien) też jest średnie.

Czyli jak dobrze rozumiem ten pierwszy element w którym wybieram użytkownika do usunięcia powinien zostać osadzony w taki sposób jak poniżej?

screenshot-20221209210848.png

0
virusek391 napisał(a):
Riddle napisał(a):
virusek391 napisał(a):
Riddle napisał(a):
virusek391 napisał(a):

@Riddle: Do wyboru kontrahenta używam dialog z selectem, natomiast do potwierdzenia komponent swal z https://sweetalert2.github.io/. Na chwilę obecną spełnia to moje oczekiwania :)

@virusek391: A czytałeś może jakikolwiek artykuł o UX okien dialogowych? Np https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116

Nie, nie czytałem, ale przeczytam :) A to że wykorzystuje komponent Swal z SweetAlert2 to jakiś poważny błąd?

Nie, ale to że robisz okno dialogowe na oknie dialogowym już tak.

Oraz to że próbujesz zrobić coś, czego biblioteka nie pozwala robić (czyli nachodzenie na siebie okien) też jest średnie.

Czyli jak dobrze rozumiem ten pierwszy element w którym wybieram użytkownika do usunięcia powinien zostać osadzony w taki sposób jak poniżej?

screenshot-20221209210848.png

To ma być Material Design? Chyba tylko z nazwy.

virusek391 napisał(a):

Czyli jak dobrze rozumiem ten pierwszy element w którym wybieram użytkownika do usunięcia powinien zostać osadzony w taki sposób jak poniżej?

Tak, na pewno nie w oknie dialogowym. Albo jako osobna kontrolka na stronie, albo w ogóle jako osobna strona ze stepperem.

0
Riddle napisał(a):
virusek391 napisał(a):
Riddle napisał(a):
virusek391 napisał(a):
Riddle napisał(a):
virusek391 napisał(a):

@Riddle: Do wyboru kontrahenta używam dialog z selectem, natomiast do potwierdzenia komponent swal z https://sweetalert2.github.io/. Na chwilę obecną spełnia to moje oczekiwania :)

@virusek391: A czytałeś może jakikolwiek artykuł o UX okien dialogowych? Np https://uxplanet.org/5-essential-ux-rules-for-dialog-design-4de258c22116

Nie, nie czytałem, ale przeczytam :) A to że wykorzystuje komponent Swal z SweetAlert2 to jakiś poważny błąd?

Nie, ale to że robisz okno dialogowe na oknie dialogowym już tak.

Oraz to że próbujesz zrobić coś, czego biblioteka nie pozwala robić (czyli nachodzenie na siebie okien) też jest średnie.

Czyli jak dobrze rozumiem ten pierwszy element w którym wybieram użytkownika do usunięcia powinien zostać osadzony w taki sposób jak poniżej?

screenshot-20221209210848.png

To ma być Material Design? Chyba tylko z nazwy.

virusek391 napisał(a):

Czyli jak dobrze rozumiem ten pierwszy element w którym wybieram użytkownika do usunięcia powinien zostać osadzony w taki sposób jak poniżej?

Tak, na pewno nie w oknie dialogowym. Albo jako osobna kontrolka na stronie, albo w ogóle jako osobna strona ze stepperem.

Tutaj użyłem React Bootstrap.

0
virusek391 napisał(a):

Tutaj użyłem React Bootstrap.

Mieszasz dwie biblioteki do UI razem?

0
Riddle napisał(a):
virusek391 napisał(a):

Tutaj użyłem React Bootstrap.

Mieszasz dwie biblioteki do UI razem?

W tym projekcie używam React Bootscrap + sweetalert2. Sweetalert2 jest uzupełnieniem :)

0
virusek391 napisał(a):
Riddle napisał(a):
virusek391 napisał(a):

Tutaj użyłem React Bootstrap.

Mieszasz dwie biblioteki do UI razem?

W tym projekcie używam React Bootscrap + sweetalert2. Sweetalert2 jest uzupełnieniem :)

W tytule wątku pisałeś o Dialog z MUI?

Dobra, nie ważne. Na pytanie o dwa dialogi odpowiedziałem wyżej.

0
Riddle napisał(a):
virusek391 napisał(a):
Riddle napisał(a):
virusek391 napisał(a):

Tutaj użyłem React Bootstrap.

Mieszasz dwie biblioteki do UI razem?

W tym projekcie używam React Bootscrap + sweetalert2. Sweetalert2 jest uzupełnieniem :)

W tytule wątku pisałeś o Dialog z MUI?

Dobra, nie ważne. Na pytanie o dwa dialogi odpowiedziałem wyżej.

Tak tylko MUI z sweetalert2 korzystam w tym pierwszym projekcie gdzie jest opcja usuwania użytkownika. Natomiast w tym

drugim, gdzie przesłałem ci zdjęcie używam React Bootscrap + sweetalert2.

Ah pewnie myślałeś że w jednym projekcie używam React Bootscrap i MUI :)

1 użytkowników online, w tym zalogowanych: 0, gości: 1