0

We have a requirement where the dropdown option list has three parts.

1 - A code part like , 1 , 2 , 2c, 3, 3d etc.

2 - A company name part , like Columbia Water

3 - A color part, like Green, Orange etc.

I want to change the format of the text partially inside the string.

**2c**          Columbia Water             Green

I have tried this :-

<div>
<select> <!--[ngStyle]="{'color': 'black','font-size': '20px','font-weight': 'bold'}"-->
  <option>
  <li><font color="black"><b>2c</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Columbia Water&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</font><font color="green">Green</font></li>
</option>        
</select>

If I put the ngStyle portion in the tag, only the selected dropdown will be formatted , and that too the entire string. The same goes for option, the entire string is formatted. I tried putting li inside of option, but that does not do anything to the string itself.

Is this possible at all, this will be very useful as this will run on android as a hybrid cordova app.

KudmiSubba
  • 59
  • 2
  • 9
  • I am using that as an example, we need it to be spaced out neatly, with the code part , tabbed , maybe twice, the company part and the color part. – KudmiSubba Dec 14 '17 at 15:35

1 Answers1

1

Use a span tag on each of the options and style appropriately in CSS.

    <span class='part-code'>2c</span> 
    <span class='company-name'>Columbia Water</span> 
    <span class='part-color'>Green</span>
KudmiSubba
  • 59
  • 2
  • 9
Fishdigger
  • 89
  • 1
  • 8
  • 1
    Sir, Thank you. Let me try that. I also want to share with you, that the content ( strings ) come from an angular Array which has the three parts separated by a space. So I can manipulate the array elements and split them into these three span classes. – KudmiSubba Dec 14 '17 at 15:33
  • Sir, I tried it, it did not work inside of – KudmiSubba Dec 14 '17 at 15:51
  • Please see this link: https://stackoverflow.com/a/27514262/9016532 it details how to add style to options. I wasn't aware that option tags didn't pay attention to other tags within them. – Fishdigger Dec 14 '17 at 15:56
  • Sir, Thank you, I will investigate , there is a fiddler as well to test it out. – KudmiSubba Dec 14 '17 at 16:01