Question

I am attempting to create a password requirements help box in ExtJS. It is not rendering the inline CSS styling for the unordered list. I am putting style=”list-style-type: circle;”

Here is my code for the password box:

        {
            xtype: 'panel',
            html: '<br></span><div style="border:2px solid;padding:5px;width:329px">* Password must be a minimum of 8 characters in length. Passwords must contain a combination of characters from <b>three of the following four categories</b>:<br><br><ul style="list-style-type: circle;"><li>An uppercase character (A-Z)</li><li>An lowercase character (a-z)</li><li>A number from 0-9</li><li>One of the following special characters: ~!@#$%^&amp;*_-+=`|&#92; (){}[]:;&quot;&lt;&gt;&#39;,.?&#47;</li></ul><div>'
        }

Here is what it is rendering (I want the circle bullet points in the password box):

Answer 1

Don’t use inline styles. Declare a new class, like this:

.fred ul
{
    list-style: circle outside none;
}

Then for the panel do this:

{
    xtype: 'panel',
    bodyCls: 'fred'
}

That might work for you.