JQuery Mobile ListView affiche le texte sur plusieurs lignes

Je suis en train de travailler sur une vue de liste avec jQuery Mobile et je suis en train de faire quelque chose de semblable à cet exemple:
http://jquerymobile.com/demos/1.0a2/#docs/lists/lists-formatting.html

J'ai un titre et une description longue de texte.
Le problème est que j'ai besoin du texte pour commencer une nouvelle ligne si l'écran est trop petit (ou le texte de long), ce qui se passe maintenant, c'est que le texte est coupé et a ajouté des points ...

<div data-role="content" data-theme="c">
     <ul data-role="listview" data-theme="c">               
     <li>
     <a href="tl1.html" data-transition="fade">
     <img style="margin-left: 8px" width="80" height="80" alt="sample" src="images/sample_event.jpg" align="left"/>
     My band
     <br>
     <font style="font-size: small">
     Event description, enter the event description. Please enter the event description, event            description enter. Add a description of the event.
     </font>
     </a>
     </li>
     </ul>
</div>

Merci!
Marco

source d'informationauteur Marco Matarazzi

33

Le chemin que j'ai fait c'était pour ajouter white-space:normal; de la CSS de cette section. Espérons que cela aide.
22

ruthc68 de jQuery Mobile forum officiel répondu à la question:
```
<font style="white-space:normal; font-size: small" >
```
Espérons que cela permettra de gagner du temps à quelqu'un 🙂
4
1. ouvert (jquery.mobile.structure-1.0.min.css) et
2. remplacer tous les white-space:nowrap par white-space: normal
2

Gulp.

"JQuery Mobile ListView afficher du texte sur plusieurs lignes "

Je suis tombé sur cette StackOverflow question, que je me demandais aussi comment le faire.

Cependant, après avoir joué avec jqGrid Mobile, ma meilleure réponse à cette question est: est-ce ne pas le faire.

Si vous avez un ensemble d'enregistrements, chaque enregistrement contient plusieurs lignes, alors il est beaucoup plus agréable l'expérience utilisateur d'écrire votre propre code.

Voici quelques captures d'écran de mon iPhone, pour vous montrer ce que je veux dire.

Sur la première scren, où l'utilisateur recherche un nom de Société, je ne utilisation jqGrid Mobile, avec une zone de texte où l'utilisateur peut taper un nom de société et immédiatement voir les enregistrements correspondants dans la jqGrid.

J'ai documenté la façon dont vous pouvez ajouter cette fonctionnalité à jqGrid ici:

jqGrid de Changement de filtre/de recherche pop-up forme du plat sur page pas un dialogue

Sur la deuxième page web, bien que, j'ai délibérément choisi de ne pas utiliser jqGrid à tous. J'ai trouvé que c'était beaucoup plus conviviale pour copier jqGrid css du style, et de créer deux contrôles HTML:
- une "tête" de la barre de, montrer le contexte de ce que vous voyez (de votre choix au Nom de la Société, dans cet exemple)
- une liste déroulante des lieux, en remplissant le reste de l'écran.
Oui, je sais, cela signifie avoir à écrire du code JavaScript, mais il a l'air fantastique sur un périphérique, et qui fait le plus de l'espace d'écran limitée. Remarquez comment, dans l'écran ci-dessus, j'ai défile en bas de ma liste d'endroits, et Safari a automatiquement caché sa barre de navigation (où le Retour/Suivant/Envoyer à boutons ont été montrés).

Bien sûr, il fonctionne bien dans cet exemple particulier, parce que je sais il n'y aura pas beaucoup de dossiers sur cet écran (emplacements pour une entreprise en particulier). Par jeter jqGrid sur cet écran, j'ai perdu la capacité de l'utilisateur à la recherche pour, par exemple, des emplacements dans un pays en particulier,

Mais, pour cette application, et non à l'aide de jqGrid sur l'un des écrans grandement amélioré la fonctionnalité.

J'apprécie cet exemple ne présente pas de code JavaScript, mais j'espère que les captures d'écran pour vous inspirer à penser en dehors de la jqGrid de la boîte lorsque le développement d'applications pour les périphériques.

Vous devez vous connecter pour publier un commentaire.