[Widget] Liste déroulante

[rootard]

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

[winhex]

bonjour spécificité css des navigateurs
https://developer.mozilla.org/fr/docs/W ... appearance

[rootard]

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:

Code : Tout sélectionner

-moz-appearance: none;

Est ce que c'est possible d'avoir ce widget Chrome sur Firefox et Safari?

[winhex]

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

[rootard]

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

[winhex]

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

[rootard]

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

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>