2017-12-20 4 views
0

ich eine übergeordnete Komponente habe und untergeordnete Komponente in reagieren-Meteor, wo die übergeordnete Komponente auf die Schaltfläche zeigt, die auf Klick eine modale in Kindkomponentewie programmatisch die Ausrichtung meiner modal Landschaft ändern

Geordnete Komponente gerendert eröffnet etwa wie folgt aussieht:

........... <child component /> ..........
Kinderkomponente etwa wie folgt aussieht:

<Modal 
    header='Modal Header' 
    trigger={<Button>OR ME!</Button>}> 
    <p>Lorem </p> 
</Modal> 

alle Bildschirme in meinem Projekt in p sein muss Otrait-Modus außer meinem Modal. Ich spiele ein Video mit dem flowplayer im modal.Für die mobile Version möchte ich, dass mein modal in den Querformatmodus kommt, sobald es geöffnet wird. (oder) Ich möchte, dass meine Web-App in den Querformat-Modus wechselt, sobald mein Modal geöffnet wird, und zum Modus "Potrait" zurückkehrt, wenn das Modal geschlossen ist. Ich habe versucht, mit window.screen.orientation.lock und window.screen.lockOrientation(orientation) aber beide funktioniert nicht und ich habe sogar versucht mit css transform: rotate(0.25turn) aber nach der Verwendung dieser, wenn ich die modale Größe anpassen height:100vw(width here)width:100vh(height here) das Modal wird in die obere rechte Ecke übersetzt und gehen ein Teil davon geht unter den Bildschirm. Wie löse ich das?

Antwort

0

ich habe transform-origin CSS-Eigenschaft verwendet, die das Problem gelöst hat. Ich habe View-Port-Einheiten (vh und vw) verwendet, um Ursprung zu transformieren, der für verschiedene Dimensionen (reaktionsfähig) funktionierte.

Verwandte Themen