Javascript Okta signin widget displaying label names in Caps letters

Questions
,
1

Javascript sign widgets working great but small issues with Label names I tried add custom label names but it’s always displaying in Caps letters.
Version: “@okta/okta-signin-widget”: “^4.1.1”,

 i18n: {
                'en': {
                    'primaryauth.title': 'Log In',
                    'primaryauth.submit': 'Log In',
                    'forgotpassword': 'Forgot your password?',
                    'oform.errorbanner.title' :'Please enter User ID and Password to continue',
                    'help': ' ',
                    'primaryauth.username.placeholder' : 'Username',
                    'primaryauth.username.tooltip' : 'Username',
                   ' primaryauth.password.placeholder ': 'Password',
                    'primaryauth.password.tooltip' : 'Password',
                    'remember': 'Remember me',
                }
            },
        features: {
           idpDiscovery: true,
            rememberMe: true,
            showPasswordToggleOnSignInPage: true,
           // hideSignOutLinkInMFA: true,
            registration: true,
            //placeholder:true,
        },

Capsletters

Not sure am i missing something here

2

Hi @worldcoder

Do you have a global CSS which overrides the text to capital letters?

1 Like
3

Yes, I did same with CSS proprieties. ( text-transform: capitalize) but just want to find out why okta placeholder not working.

4

Hi @worldcoder

Can you please add a specific CSS style for the input themselves to have them capitalized? The issue might be caused by the CSS loaded by the sign-in widget.

5 
#okta-sign-in .o-form label, .forgot-password-form label {
  font-weight: 400;
  font-size: 15px;
  color: #000;
  text-align: left;
  text-transform: capitalize;
}

please let me know if you need more info