[Stack] Problème Stack Orientation

[ABIAdrienG]

Bonjour,

Je rencontre un problème avec le choix de l'alignement du stack.
Lorsque mon stack est visible par défaut dans la couche Synapps, il n'y a pas de problème. En revanche, lorsque l'option "visible" n'est pas cochée, le paramètre "flex-direction: row" ne se charge pas.
Lorsque le stack devient visible, il s'affiche en orientation verticale alors que j'ai coché l'orientation horizontale. Est-ce un bug ou est-ce un problème de mon côté ?

le code du stack :
SYNAPPS-STUDIO-ACTOR|{"type":"layout/stack","key":"StackElec","children":[{"properties":{"displaySceneKey":"ELEC_RDC","screenActorKey":"screen1","width":"50%"},"key":"ButtonRDCELEC","type":"input/nav-button","styleName":"side-menu-button","additionalDefs":{"icon":{"type":"icon","modifier":"render","label":"icon"},"text":{"type":"text","modifier":"render","label":"text"}},"additionals":{"icon":"voltage","text":"Journal"},"bindings":{"properties.height":{"path":"additionals.hauteurMenu","sourceType":"actor","sourceKey":"tailles"},"additionals.text":{"path":"_RDCTitle","sourceType":"text"}}},{"properties":{"displaySceneKey":"ELEC_R1","screenActorKey":"screen1","width":"50%"},"key":"ButtonR1ELEC","type":"input/nav-button","styleName":"side-menu-button","additionalDefs":{"icon":{"type":"icon","modifier":"render","label":"icon"},"text":{"type":"text","modifier":"render","label":"text"}},"additionals":{"icon":"voltage","text":"Journal"},"bindings":{"properties.height":{"path":"additionals.hauteurMenu","sourceType":"actor","sourceKey":"tailles"},"additionals.text":{"path":"_R1Title","sourceType":"text"}}}],"properties":{"orientation":"horizontal","visible":false}}

(il passe visible avec une modification du display none en flex.)
Version Synapps : 1.1.5 Version WIT : 14.4.0 OS : 2.5.2

Je vous remercie par avance
A.G.

[manufitoussiwit]

Salut!
Si j'ai bien compris, la visibilité est commandée ici en changeant directement dans le style de la div son display.
Dans ce cas, le résultat obtenu est normale.
Ici, il manque encore l'instruction CSS qui fait qu'il empilera horizontalement (flex-direction: row).

En réalité, il est recommandé de ne pas trop toucher au style d'un élément DOM correspondant à un acteur. Il vaut mieux jouer avec les propriétés de l'acteur lui même. Parce que ce sont elles qui commandent.

Ici , il faut par script :

// aller chercher l'acteur
const stackElec= context.getActor('StackElec');

// jouer avec sa propriété visibilité
stackElec.properties.visible = true // ou false

C'est ensuite le moteur de synapps qui prend le relai et génère le style CSS qui va bien.

Apres, si on veut vraiment faire du CSS, on peut mais il faut plutôt passer par des classes CSS et les appliquer dans la propriété classNames de l'acteur. Il y a une marche à suivre aussi.

Voici un exemple :

SYNAPPS-STUDIO-ACTOR|{"type":"layout/stack","key":"stack2","children":[{"type":"input/button","key":"button1","properties":{"content":"Button"},"events":{"onClick":["// aller chercher l'acteur","const stackElec= context.getActor('StackElec');","","// jouer avec sa propriété visibilité, ici on bascule entre true et false","stackElec.properties.visible = !stackElec.properties.visible;"]}},{"type":"layout/stack","key":"StackElec","children":[{"properties":{"displaySceneKey":"ELEC_RDC","screenActorKey":"screen1","width":"50%","content":"test1"},"key":"ButtonRDCELEC","type":"input/nav-button","additionalDefs":{"icon":{"type":"icon","modifier":"render","label":"icon"},"text":{"type":"text","modifier":"render","label":"text"}},"additionals":{"icon":"voltage","text":"Journal"},"bindings":{"properties.height":{"sourceType":"actor","sourceKey":"tailles","path":"additionals.hauteurMenu"},"additionals.text":{"sourceType":"text","path":"_RDCTitle"}}},{"properties":{"displaySceneKey":"ELEC_R1","screenActorKey":"screen1","width":"50%","content":"test2"},"key":"ButtonR1ELEC","type":"input/nav-button","additionalDefs":{"icon":{"type":"icon","modifier":"render","label":"icon"},"text":{"type":"text","modifier":"render","label":"text"}},"additionals":{"icon":"voltage","text":"Journal"},"bindings":{"properties.height":{"sourceType":"actor","sourceKey":"tailles","path":"additionals.hauteurMenu"},"additionals.text":{"sourceType":"text","path":"_R1Title"}}}],"properties":{"orientation":"horizontal","visible":false}}]}

[manufitoussiwit]

Des tutos pour les scripts arrivent bientôt ! Patience ! ;-)

[ABIAdrienG]

C'est exactement ce que j'essayai de faire !
Merci beaucoup !