6

I am building a Windows mobile Application through Cordova. I have a Select menu where I have some 8 options which are to be displayed, of which the last option has lengthy text. These values are Static and are coming from Sqlite Database. Now the last option (Other [e.g. Donors;Corpora)is coming out and is not getting displayed completely as show in the picture. enter image description here

How do I word wrap the text there ?

The css I am using is 

.disaster {
    word-wrap:break-word;
 }
 .disaster option{
    word-wrap:break-word;
 }

The Html code I am Using is 

<select name="select-disaster" id="select-disaster" class="disaster"></select>

Based upon the id I am getting the select options from the Sqlite database.

Please tell me how to do the Word wrap for this in Windows 8 Mobile Phone ?

Ramesh Somalagari
  • 525
  • 3
  • 11
  • 35
  • I tried to test a solution with css classes for your select and indeed it doesn't work but i'm thinking you can find your solution styling the default system popup or listviews. I'm not very skilled in native windows phone but there might be a way to change the default system styles – devconcept Apr 27 '15 at 12:25

3 Answers3

0

Try using:

white-space: pre-wrap; 

in your existing code:

.disaster {
    white-space: pre-wrap; 
 }
 .disaster option{
   white-space: pre-wrap; 
 }
ngrashia
  • 9,869
  • 5
  • 43
  • 58
  • No. It did not work. It is still the same. I even tried to change the font for the Select menu so that it may fit. But no change in the View. It is coming as if it is a default view for Windows 8 Drop down menu. – Ramesh Somalagari Mar 31 '15 at 14:14
0

I had same issue with one of the applications I was working on using ionic-framework, and I solved it using the white-space property:

.disaster{
white-space: normal;
}
Mohamad Al Asmar
  • 1,107
  • 1
  • 16
  • 35
0

A simple implementation for this can be done using the plugin See demo , very good link

Ibrahim Sušić
  • 438
  • 3
  • 20