Power Apps
L’outil low-code pour créer des applications PC et mobiles.
Organizer:
- Organisé par
-
HTML color gradient non visible par users
HTML color gradient non visible par users
Bonjour la team.
je fais face à un problème assez étrange, j’ai à plusieurs endroits d’une appli, mis en place des contrôles HTML text pour faire des fonds en dégradé de couleur et plusieurs utilisateurs m’ont fait remontés le fait qu’il ne les voient pas.
Je ne sais pas si tous les users sont concernés. En ce qui me concerne, lorsque je me connecte en mode lecture, en passant par le même lien utilisé par les utilisateurs, je n’ai pas ce problème.
Est ce dû au paramétrage de la langue propre à chacun, ou aurais-je omis quelquechose dans PA maker ?
<div>
<div>Exemple :</div>
<div> </div>
<div>”<div style='</div>
<div>background: rgb(2,0,36);</div>
<div>background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(121,9,9,1) 50%, rgba(0,212,255,1) 100%);</div>
<div>width:” & Self.Width & “px; height: ” & Self.Height – 1 & “px;’></div>
<div></div>”</div>
<div> </div>
<div>Merci pour votre aide.</div>
</div>- 8 Réponses
Salut @Mickael,
Quel est le navigateur dans chaque cas ? Quand ça marche et quand ça marche pas…
il me semble que par défaut, mon entreprise propose Chrome (Mais il n’est pas impossible que certains utilisent Edge)
…et je viens de faire le test, j’ai le même problème sur Edge
EDIT : Je viens de demander à un collègue qui avait le problème, mais il me confirme qu’il utilise déjà Chrome
Donc pour résumer :
Si j’utilise le lien de l’app utilisé par tout le monde (Dernière version de l’app publiée) sur mon PC (PC utilisé pour la création de l’application.
- Chrome –> Ca fonctionne normalement (HTML text présent)
- Edge –> HTML text n’apparait pas
Sur le PC d’une personne ayant le souci d’affichage.
- Edge –> HTML text n’apparait pas
- Chrome –> HTML text n’apparait pas
J’ai un peu investigué entre temps et il s’avère que d’autres contrôles HTML text que j’utilise dans cette appli apparaissent sans problème.
J’ai l’impression qu’il n’y a que les HTML gradient de couleur qui posent problème.
Les HTML dans lesquels je ne fais que jouer sur la valeur Alpha (Couleur uniforme dans tout le contrôle) fonctionnent correctement.
En revanche, ceux où je fait un gradient circulaire ou radial, eux ne fonctionnent pas sur l’écran des utilisateurs mais sont visibles sur mon PC.
Très étrange ce comportement.
Bonjour Mickael,
As-tu peux constater un changement selon des version de PowerApps ?
Sur laquelle essaye tu ?
Pour te dépanner, je te propose d’utiliser un control Image avec un svg gradiant.
Voici un exemple :
<pre class=”language-javascript”>
"data:image/svg+xml;utf8, "&EncodeUrl("
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='200px' width='200px'>
<defs>
<linearGradient id='0' x1='0.25' y1='0.07' x2='0.75' y2='0.93'>
<stop offset='0%' stop-color='#70BD95'/>
<stop offset='100%' stop-color='#319795'/>
</linearGradient>
</defs>
<rect fill='url(#0)' height='100%' width='100%'/>
</svg>
")-
This reply was modified 1 week, 3 days ago by Nelson.
-
This reply was modified 1 week, 3 days ago by Nelson.
-
This reply was modified 1 week, 3 days ago by
Je serais toi je tenterais un force refresh (maj+F5 ou ctrl+F5) dans un premier temps.
A une époque j’ai eut des svg dont certains effets d’animation ne fonctionnaient pas.
Tu peux aussi afficher la version de chrome sur l’apps de manière à incriminer ou pas la version du navigateur
Il est fort probable que cela vienne des valeurs dynamiques si elles contienent des décimales
Ici, si la hauteur et la largeur de l’objet sont fixes et des nombres entiers, tout va bien se passer, par contre si ton objet est dynamique / responsive, et que Width = 234.34 et height = 120.34 et que ton utilisateur a son navigateur en français, les valeurs dans ton html seront respectivement 234,34 et 120,34 , or la virgule n’est pas le séparateur décimal en html, c’est le point.
Quand on utilise des valeurs dynamiques avec du SVG ou du html, il faut toujours forcer le format de chaque valeur au format en-US avec un
Text(<Valeur dynamique>; “0.0”;”en-US”)
Merci a tous pour vos réponses. Étant en long weekend, je ne pourrais vérifier tout ça qu’à mon retour.
Quelquechose me dit que ça vient de la langue ( @Davidzed)
Encore merci, je vous tiens au jus.
Bien joué @DavidZed !
Si le composant utilise des formules sur le width et height, ils sont potentiellement en valeur décimal, et quand on a une culture Francaise, ca signifie la virgule comme séparateur décimal là où le html et le css et le svg… ne connaissent que le . comme séprateur décimal (notation anglosaxone).
L’astuce de David c’est de formater ta hauteur et ta largeur en forçant la notation anglosaxone.
Connectez-vous pour répondre.