Register Widget

Hi Okta Comunity,

I have been working on the Widget to register people and the default layout is kind of clumsy.

is there any CSS to fix it or any idea how to improve it?

his.widget = new OktaSignIn({
baseUrl: environment.baseUrlOkta,
clientId: environment.oktaClientId,
redirectUri: window.location.origin + ‘/authorization-code/callback’,
logo: ‘https://origin.westernunion-foundation.org/wp-content/themes/western_union/dist/images/WU_Foundation_Logo_BlackBox_CMYK.png’,
i18n: {
en: {
“primaryauth.title”: “WU Foundation”,
},
},
idpDiscovery: {
requestContext: window.location.origin +"/login",
},
features: {
registration: true,
idpDiscovery: true,
},
authParams: {
pkce: true,
responseMode: “query”,
issuer: environment.oktaIssuer,
scopes: [‘openid’, ‘email’, ‘profile’, ‘address’, ‘phone’],
registration: true,
},
});

Best Regards,

I think you can redefine styles used by widget in your css

Thank you!

I figured it, I thought I would find any documentation for the Registration Widget,

Anyhoo, I fixed and I am leaving the CSS in case anyone faces the same issue I had.

.subschema p{
padding-top: 10px !important;
padding-bottom: 10px !important;
}

.error-16-small::before {
padding-left: 300px !important;
}

.confirm-16::before {
content: “\e030”;
color: #5e5e5e;
padding-left: 300px !important;
}

What version of the Sign In Widget are you using? I just did some tests and I see the same bad CSS from version 4.2 onward, so it looks like something in the styling was broken after that

Here’s what 4.1.5 looks like for comparison:

Hi @andreaskouras,

I’m using Angular

"@okta/okta-angular": "^2.1.0",
"@okta/okta-auth-js": "^3.2.3",
"@okta/okta-signin-widget": "^4.3.2",

Best Regards,

Yup, sounds like you’re using a newer version of the Widget. Can you submit a Github Issue for it so we can look into it?