Eléments absolus composés par Aurelia

Question

Dans une vue rendue par <compose> dans une autre vue, j'ai un div que je veux prendre en charge sur l'ensemble de la fenêtre du navigateur en réponse à une action de l'utilisateur. Ce CSS

position: absolute; 
top: 0; left: 0; 
bottom: 0; right: 0; 

ne fonctionnait pas. La réponse à Absolute position is not working suggère que j'ai exactement le problème inverse. Très probablement, ma div est un enfant d'un élément de bloc qui spécifie la position relative.

Jusqu'à présent, les options apparentes me sont ...

• Re-parent dans les DOM
• Avez une autre vue directement parented sur la page et utiliser la messagerie compliquée à proxy avant et en arrière

Je ne pense pas beaucoup de ces deux. Je ne suis pas certain des implications de la reparence avec un DOM largement contrôlé par un liant et l'autre option est ridiculement compliquée.

Quelqu'un a-t-il de meilleures idées?

Answer 1

Il y a quelques solutions pour ce cas:

1. Vous pouvez utiliser la position CSS fixed sur l'élément que vous voulez aller pleine page.
2. Vous pouvez déplacer l'élément qui doit être en pleine page dans un arbre distinct de l'élément racine dans la vue où il se trouve.
3. Créez un attribut personnalisé, décoré avec @templateController() et, lors de la liaison, insérez la vue dans le corps du document au lieu de sa position de modèle.

La solution 1 est la meilleure, si vos cibles de support mobile n'ont aucun problème avec la position corrigée.