2010-08-13 4 views
3

Comment redimensionner l'élément de liste de sélection? Voici mon code tel qu'il est maintenant ...Style de l'élément de liste de sélection dans jEditable

$('.editableSelect').editable(function(value, settings) { 
    if (this.revert == value) { 
     this.reset(); 
     return; 
    } 
    setSaveButtonRed(this); 
    setDescFromAccountCode(this, value); 
    return (value); 
}, { 
    type: 'select', 
    submit: '<button type="submit" class="checkbookButton">OK</button>', 
    data: $('#accountCodesForSelect').val(), 
    cssclass: 'checkbookSelect', 
    //style: 'font-family: Verdana,Helvetica,Sans-Serif; font-size:0.75em; width:700px;', 
    tooltip: "Click to edit...." 
}); 

et la classe checkbookSelect ressemble à ceci ...

.checkbookSelect 
{ 
    font-family:Verdana,Helvetica,Sans-Serif; 
    font-size:0.75em; 
} 

Mais quand je clique dans le, dans ce cas, la cellule du tableau (et jEditable fires) et la liste de sélection apparaît, elle n'est pas stylée ...

Je pense que le paramètre cssclass dans jEditable est uniquement pour l'étendue que jEditable crée et peut-être ne s'applique pas à l'élément d'entrée qu'il crée ... alors peut-être la réponse est d'utiliser un jQuery s plus spécifique électeur et/ou la méthode liveQ de jQuery pour choisir l'élément select list et ensuite appliquer le style de cette façon?

Notez que j'ai également essayé d'utiliser l'attribut/paramètre de style ... il a été commenté ci-dessus.

BTW jEditable est un script génial ... et je l'ai blogué vers la façon de mettre en place datepicker et jEditable here ...

+0

Quel navigateur utilisez-vous lorsque vous voyez ceci? –

+0

IE8 ... et Firefox 3.whatever6? ... chose drôle est d'autres listes de sélection sur la page acceptent le style ... Je suis juste en train de définir la police et la taille de la police ... Je suis conscient que sélectionner les listes ne répondent pas à tous les paramètres de style dans IE. – w4ik

Répondre

2

a été en mesure de mettre en style sur le menu déroulant en ajoutant cette ligne à jquery. jeditable.js près de la ligne 270 ou si la version 1.7.1 ... n'a probablement pas re le numéro de ligne exacte, mais je l'ai mis là comme c'est où les contrôles de l'auteur de script pour settings.select

$('select').addClass(settings.cssclass); 

I Je suis sûr que le sélecteur pourrait aussi être modifié ... mais au moins cela fonctionne pour l'instant ... Je vais le resserrer plus tard mais au cas où quelqu'un d'autre aurait la même question ... je voulais juste vous faire savoir comment je suis arrivé à travailler

J'ai affiné le sélecteur à cette ...

$(form).children('select').addClass(settings.cssclass); 

fonctionne beaucoup mieux maintenant ...

0

une autre façon à ceci est de définir tous les éléments avec la largeur: 100%, la boîte de sélection se fixera dans son conteneur DOM mais les options s'afficheront correctement, testées sur firefox, ne nécessite aucun Javascript et affecte toutes les balises, vous pouvez ajouter et id à des éléments spécifiques afin de le styliser selon vos besoins

2

cssclass: 'checkbookSelect' sera appliqué au formulaire d'étiquette.

Donc .checkbookSelect select au lieu de .checkbookSelect dans votre CSS devrait faire le travail.

Questions connexes