[Widget] Liste déroulante
[Widget] Liste déroulante
Salut
Le widget liste par défaut n'étant pas très beau j'ai cherché en vain un remplacant sur le market.
Au final j'ai utilisé le joli widget de @winhex disponible ici:
viewtopic.php?f=30&t=43849&p=767790#p764615
Problème le rendu dépend du navigateur utilisé...
Sous windows c'est très chouette sur Chrome
mais c'est pas beau sous Firefox
et il manque le triangle de sélection sous Safari (iOS)
Des suggestions pour l'améliorer?
Merci
Le widget liste par défaut n'étant pas très beau j'ai cherché en vain un remplacant sur le market.
Au final j'ai utilisé le joli widget de @winhex disponible ici:
viewtopic.php?f=30&t=43849&p=767790#p764615
Problème le rendu dépend du navigateur utilisé...
Sous windows c'est très chouette sur Chrome
mais c'est pas beau sous Firefox
et il manque le triangle de sélection sous Safari (iOS)
Des suggestions pour l'améliorer?
Merci
Re: [Widget] Liste déroulante
bonjour spécificité css des navigateurs
https://developer.mozilla.org/fr/docs/W ... appearance
https://developer.mozilla.org/fr/docs/W ... appearance
Re: [Widget] Liste déroulante
merci @winhex
J'ai testé plusieurs paramètres j'arrive seulement a faire disparaitre le carré de droite, il manque tjs le triangle de sélection:
Est ce que c'est possible d'avoir ce widget Chrome sur Firefox et Safari?
J'ai testé plusieurs paramètres j'arrive seulement a faire disparaitre le carré de droite, il manque tjs le triangle de sélection:
Code : Tout sélectionner
-moz-appearance: none;
Est ce que c'est possible d'avoir ce widget Chrome sur Firefox et Safari?
Re: [Widget] Liste déroulante
de mémoire la flèche se nomme arrow
donc input list arrow safari en recherche
et tu tombes sur plein de trucs
à tester sur tes navigateur
https://www.sitepoint.com/community/t/s ... one/114625
tu as un codepen pour test
si ok
tu créés un html en design test
(thème, dépendance, librairie sur jeedom qui changerai le comportement )
si le comportement est encore ok
tu adaptes au widget
donc input list arrow safari en recherche
et tu tombes sur plein de trucs
à tester sur tes navigateur
https://www.sitepoint.com/community/t/s ... one/114625
tu as un codepen pour test
si ok
tu créés un html en design test
(thème, dépendance, librairie sur jeedom qui changerai le comportement )
si le comportement est encore ok
tu adaptes au widget
Re: [Widget] Liste déroulante
merci pour le lien @winhex
j'ai réussi à adapter mon widget, il marche sur mes 3 navigateurs
Si ca intéresse quelqu'un je posterai le code
j'ai réussi à adapter mon widget, il marche sur mes 3 navigateurs
Si ca intéresse quelqu'un je posterai le code
Re: [Widget] Liste déroulante
bien sûr
puisque en janvier le forum sera qu'en lecture
tu imagines la frustration d'un lecteur.
pose le sur le futur forum serait mieux
ou ici à minima
puisque en janvier le forum sera qu'en lecture
tu imagines la frustration d'un lecteur.
pose le sur le futur forum serait mieux
ou ici à minima
Re: [Widget] Liste déroulante
salut
Voici le code du widget ci dessus, sur la base des inputs de @winhex (merci à toi).
Il fonctionne bien en v3 dans Chrome, Firefox et Safari (testé sur iPad).
Je le posterai dans le market quand j'aurai le temps
Voici le code du widget ci dessus, sur la base des inputs de @winhex (merci à toi).
Il fonctionne bien en v3 dans Chrome, Firefox et Safari (testé sur iPad).
Je le posterai dans le market quand j'aurai le temps
Code : Tout sélectionner
<div class="cmd cmd-widget reportModeHidden" data-type="action" data-subtype="select" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="display: table; width: 56px;height: 20px;">
<span class="cmdName" style="font-weight: bold;font-size : 12px;#hideCmdName#">#name_display#</span>
<div class="select-style#id#">
<select class="select-style#id# selectCmd" >#listValue#</select>
</div>
<style>
/* couleurs par defaut avant selection */
:root{
--color: black;
--background: white;
--border-color:#cmdColor#;
--radius:25px;
}
/* couleur fond selectionné */
.select-style#id# {
border: 1px solid var(--border-color);
border-radius: var(--radius);
background: var(--background);
width: 120px;
height: 25px;
appearance: menulist;
-moz-appearance: none ;
-webkit-appearance: none;
}
/* couleur texte selectionné */
.select-style#id# select {
color: var(--color);
padding: 0px 5px;
border: none;
box-shadow: none;
background: transparent;
background-image: none;
}
/* couleurs drop-down */
.select-style#id# select:focus {
background: var(--color);
color: var(--background) ;
}
/* triangle de selection */
.select-style#id#:after {
content:"";
position:absolute;
z-index:2;
right:8px;
top:50%;
margin-top:-3px;
height:0;
width:0;
border-top:6px solid var(--color);
border-left:6px solid transparent;
border-right:6px solid transparent;
pointer-events:none;
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
// customisation de mes couleurs
$(".cmd[data-cmd_uid=#uid#] .select-style#id#").css('--background', '#0080ff');
$(".cmd[data-cmd_uid=#uid#] .selectCmd").css('--color', 'white');
$(".cmd[data-cmd_uid=#uid#] .select-style#id#").css('--border-color', 'lightgray');
$(".cmd[data-cmd_uid=#uid#] .select-style#id#").css('--color', 'white');
}
jeedom.cmd.update['#id#']({display_value: '#state#'});
$(".cmd[data-cmd_uid=#uid#] .selectCmd").on('change', function () {
jeedom.cmd.execute({id: '#id#', value: {select: $(this).value()}});
});
</script>
</div>
Qui est en ligne ?
Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 22 invités