comment gérer un long texte dans le contrôle dropdownlist dans ASP.NET

Question

Possible en double:
Recommendations for dropdown menu items that are too wide?

J'ai une liste déroulante qui est peuplée par la base de données. Son champ de valeur contient l'identifiant de l'enregistrement, et son champ d'option contient le texte de l'enregistrement. Mais les entrées de texte de l'enregistrement sont très longues et rendent la liste déroulante si large qu'elle change totalement l'apparence de ma page Web. Lorsque je réduis la largeur, le texte affiché est également coupé. Est-il possible de faire en sorte que la page Web soit belle et permette à l'utilisateur de voir le texte intégral (comme l'emballage, le défilement ou quelque chose comme ça)?

Comment puis-je gérer cela?

Answer 1

Essayez d'utiliser les CSS pour ajouter une largeur fixe à votre menu déroulant, comme:

select {width: 150px} 

Alors que le menu déroulant lui-même sera d'une largeur fixe et ne peut pas afficher tout le texte, les éléments d'options devraient étendre à la largeur de l'élément le plus large.

ne fonctionne pas dans IE7 et au-dessous, auquel cas le this link peut être utile pour les navigateurs:

Answer 2

Si le texte est très mal, je pense que vous pourriez avoir à envisager une approche différente plutôt que affichant tout dans un DropDownList.

Vous pouvez demander à DropDownList d'afficher uniquement une petite partie du texte sous forme de résumé, puis d'afficher le texte intégral à côté de la liste lorsque l'utilisateur modifie l'élément. Je recommanderais ceci est fait en utilisant AJAX pour garder l'expérience utilisateur agréable. Pour ce faire, enroulez DropDownList et Label à droite de la liste dans un UpdatePanel. Ensuite, l'événement OnSelectedIndexChanged du DropDownList ressemblerait à quelque chose comme ceci:

protected void DropDownList1_selectedIndexChanged(object sender, EventArgs e) 
{ 
    var item = _DB.GetItemFromDB(DropDownList1.SelectedValue); 
    Label1.Text = item.Text; 
} 

Answer 3

Une alternative agréable est de montrer seulement une partie du texte dans votre colonne, ainsi qu'un bouton ou graphique d'une sorte qui indique qu'ils peuvent voir plus soit en survolant la cellule ou en cliquant sur quelque chose.

Par exemple:

Name | Id | Cover Letter 
----- ------ ---------------------------------------------------- 
Rex | 1000 | I am seeking opportunities in t... (click for more) 

Vous pouvez coder cela en main, mais il y a beaucoup d'outils là-bas qui vous faciliter la tâche, surtout si vous êtes à l'aise avec JQuery. J'ai trouvé ce qui suit rapidement le peu de navigation JQuery windows and overlays plugins:

• JQuery Callout Plugin, qui semble très agréable.
• JHelperTip, "L'info-bulle multi-usage pour JQuery."
• Coda Bubble pour un style lisse et mignon .

Answer 4

Avez-vous envisagé d'afficher quelques caractères initiaux, puis d'utiliser une info-bulle pour afficher la chaîne complète lorsque l'élément est sélectionné?

Answer 5

Vous pouvez envisager de définir une largeur fixe, puis de définir l'attribut title pour fournir une fonctionnalité de type info-bulle afin que le texte s'affiche lorsque survolé.

Après la liaison/peuplant la dropdownlist vous pouvez définir l'attribut title sur chaque élément à son propre texte:

foreach (ListItem li in ddl.Items) 
{ 
    li.Attributes.Add("title", li.Text); 
} 

Answer 6

J'ai écrit ce un certain temps que vous trouverez peut-être utile: http://dpatrickcaldwell.blogspot.com/2011/06/giantdropdown-jquery-plugin-for-styling.html

Il y a jquery plugin pour faire une liste non ordonnée stylée soutenue par l'élément select caché.

La source est sur github: https://github.com/tncbbthositg/GiantDropdown