Discussion :

[fabrice91]

Bonjour,

J'utilise autocomplete et le champ input créé a par défaut une largeur trop importante par rapport à la taille des éléments de la liste dont je dispose.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class='ui-widget'>
<label for='tags'>Type a name : </label>
<input id='tags' />
</div>

A la fin du chargement de la page, on peut voir que jquery a créé une classe "ui-autocomplete-input" pour le champ input.

Avec le code ci-dessus j'ai essayé d'ajouter dans input un attribut size à 10, avec ou sans type=text, et cela n'a aucun effet.

J'ai essayé d'ajouter cette fonction pour modifier le DOM à la fin du chargement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(document).ready(function() 
{
    // Traitement à effectuer lorsque le DOM est prêt
    $('input.ui-autocomplete-input').css("size", "5") ;
});

Sans effet non plus...avec ou sans les " autour du 5...

En éditant le fichier jquery-ui.js j'ai trouvé cette partie du code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
this.element
    .addClass( "ui-autocomplete-input" )
    .attr( "autocomplete", "off" );

que j'ai modifié en :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
this.element
    .addClass( "ui-autocomplete-input" )
    .attr( "size", 5)
    .attr( "autocomplete", "off" );

Et là ca fonctionne.
Une autre solution pour éviter de modifier le code de jquery-ui.js ?
Merci.

[danielhagnoul]

<style>#tags { width: 300px; }</style>.

[Bovino]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('input.ui-autocomplete-input').css("size", "5") ;

size n'a jamais été une propriété CSS d'un input...

[SpaceFrog]

ha ben c'est du prop()

[fabrice91]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('input.ui-autocomplete-input').css("size", "5") ;

size n'a jamais été une propriété CSS d'un input...

Ah non en effet, c'est un attribut HTML...
Sur le site w3schools pour l'élément input, l'attribut width permet de fixer la largeur dans le cas où le type est une image, et l'attribut size permet de fixer la largeur d'un input texte...

Cette solution fonctionne ! En effet, c'est bien un attribut, merci de me l'avoir montré ! J'aurais pu m'en douter puisque dans le code de jquery-ui.js que j'ai copié/collé dans mon premier post ils utilisent la fonction attr() !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('input.ui-autocomplete-input').attr("size", 10) ;

Merci !

[SpaceFrog]

ha ben c'est du prop()

...
j'ai pas dit c'est du attr()... ça aurait été moins drôle