GWT : définir des propriétés de style à l'élément
Dans le but de développer les éléments dans mon div, je suis en utilisant ce css (JSFiddle Exemple ici):
.scaled {
transform: scale(0.5);
-ms-transform: scale(0.5); /* IE 9 */
-webkit-transform: scale(0.5); /* Safari and Chrome */
-o-transform: scale(0.5); /* Opera */
-moz-transform: scale(0.5); /* Firefox */
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.5, M12=0,
M21=0, M22=0.5);
}
C'est pris en charge par tous les principaux navigateurs (y compris IE8).
Maintenant, quand j'essaie d'appliquer cette css dynamiquement dans GWT:
public void setZoom(double val) {
if (val != 1) {
surface.getElement().getStyle().setProperty("transform", "scale(" + val + ")");
surface.getElement().getStyle().setProperty("-ms-transform", "scale(" + val + ")");
surface.getElement().getStyle().setProperty("-webkit-transform", "scale(" + val + ")");
surface.getElement().getStyle().setProperty("-o-transform", "scale(" + val + ")");
surface.getElement().getStyle().setProperty("-moz-transform", "scale(" + val + ")");
surface.getElement().getStyle()
.setProperty("filter", "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=" + val + ", M12=0,M21=0, M22=" + val + ")");
}
}
J'obtiens l'erreur suivante:
Caused by: java.lang.AssertionError: The style name '-ms-transform' should be in camelCase format
at com.google.gwt.dom.client.Style$.assertCamelCase$(Style.java:1603)
at com.google.gwt.dom.client.Style$.setProperty$(Style.java:1512)
Comment puis-je régler ces navigateur dépendant de styles de façon dynamique dans GWT? (en particulier IE du filtre..)
Dans un fichier CSS, vous pouvez utiliser un littéral comme ceci: -ms-filter: littéral("\"progid:DXImageTransform.Microsoft.Shadow(color=#BBBBBB,direction=125,force=5)\""). Je n'ai jamais eu le "camelCase" format jusqu'à présent. Essayez d'ajouter l'instruction littérale dans votre setters. HTH.
camelCase signifie que vous ne devez pas utiliser" -", puis par exemple pour définir "- moz-transform "juste de la remplacer par "mozTransform'
oui mais IE n'accepte pas de chameau cas, d'où ma question
camelCase signifie que vous ne devez pas utiliser" -", puis par exemple pour définir "- moz-transform "juste de la remplacer par "mozTransform'
oui mais IE n'accepte pas de chameau cas, d'où ma question
OriginalL'auteur Majid Laissi | 2012-11-16
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser la fonction de valeur en CSS ResourceBundle ou conditionnelle CSS:
https://developers.google.com/web-toolkit/doc/latest/DevGuideClientBundle#Value_function
Mais je ne comprends pas à partir de votre code pourquoi vous devez utiliser transform: scale. Vous pouvez simplement définir la taille de cet élément directement, comme
Si vous définissez la taille par rapport à quelque chose, vous pouvez mesurer d'abord que quelque chose (fenêtre ou un élément), et de calculer la taille dont vous avez besoin. Cette solution fonctionne dans tous les navigateurs et vous n'avez pas à compter sur CSS3 être pris en charge.
EDIT:
Vous pouvez avoir un div ("surface" dans votre exemple) qui ne change pas sa taille. Cette div comprendra une autre div (par exemple, "wrapper"), qui contient tout le contenu interne. Tout le contenu peut être définie soit pourcentages ou les em par rapport à la div wrapper. Lorsque vous devez adapter votre contenu, il vous suffit de changer la taille de la div wrapper - et de tout son contenu sera mis à l'échelle en conséquence.
Vous pouvez définir le contenu de la div en pourcentage ou en em - par rapport à son parent div. Ensuite, tout ce que vous devez faire est de modifier la taille de la div, et tous les éléments à l'intérieur de l'échelle en conséquence. Quand je dis "changer la taille de la div" il n'a pas à être à l'extérieur de la div qui ne change pas. Vous pouvez inclure un div à l'intérieur de l'autre.
que ne fera pas l'intérieur des objets (images, texte, etc..) à grande échelle. Je ne veux pas faire de plus petits divs mais même l'image et le texte à l'intérieur..
suivi de votre edit : je peux redimensionner les éléments intérieurs, comme les divs et des images, mais comment au sujet de la taille du texte, les iframes, les valeurs de remplissage,...? Ce n'est pas le même effet que le fait de zoomer, et c'est la raison pour laquelle
transform: scale()
existe en premier lieuVous pouvez définir des tailles de police et les rembourrages en em. Définition d'un nouveau em de la taille de la mère va déclencher le redimensionnement des éléments internes. Note que je ne fais pas de s'opposer CSS3 - je l'aime. Et si vous avez besoin d'un vrai "zoom", "échelle" est la meilleure solution. Ce pourquoi j'ai fourni un lien vers CssResource comme une solution à votre problème.
OriginalL'auteur Andrei Volgin
Ici est un outil de suivi d'entrée pour GWT qui parle de la restriction et des solutions de contournement.
http://code.google.com/p/google-web-toolkit/issues/detail?id=5152&q=assertCamelCase&colspec=ID%20Type%20Status%20Owner%20Milestone%20Summary%20Stars
Voici un autre article qui en parle en Javascript; http://www.javascriptkit.com/javatutors/setcss3properties.shtml
Fondamentalement, convertir cette lettre, après un tiret (-) pour les majuscules, de sorte que -moz-transform est "MozTransform'
donc cela devrait fonctionner;
filter:prog:id...
? merciDésolé, je ne sais pas.
OriginalL'auteur Ezward
pourquoi êtes-vous essayer de définir la propriété à l'aide de code java. Si GWT soutient par le biais de codage, il a beaucoup de restriction. Essayez de donner une CSS d'un nom de classe, et de faire ce que vous voulez dans le CSS.
Pour ajouter un nom de classe par le biais de GWT, vous pouvez utiliser la syntaxe suivante.
Ici de fournir le CSS classe( il peut être n'importe quel nom). Utiliser le même nom de classe dans votre fichier CSS et de faire toutes les manipulations que vous avez besoin.
OriginalL'auteur Abhijith Nagaraja