Before reporting an issue
Area
login/ui
Describe the bug
Usually buttons are wrapped in a <div class="${properties.kcFormGroupClass!}">
Examples:
|
<div class="${properties.kcFormGroupClass!}"> |
|
<@passwordCommons.logoutOtherSessions/> |
|
|
|
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}"> |
|
<#if isAppInitiatedAction??> |
|
<input name="login" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" /> |
|
<button class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!}" type="submit" name="cancel-aia" value="true">${msg("doCancel")}</button> |
|
<#else> |
|
<input name="login" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" /> |
|
</#if> |
|
</div> |
|
</div> |
|
<div id="kc-form-buttons" class="${properties.kcFormGroupClass!}"> |
|
<input tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/> |
|
</div> |
This is not the case for config-totp:
|
<#if isAppInitiatedAction??> |
|
<input type="submit" |
|
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" |
|
id="saveTOTPBtn" value="${msg("doSubmit")}" |
|
/> |
|
<button type="submit" |
|
class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!} ${properties.kcButtonLargeClass!}" |
|
id="cancelTOTPBtn" name="cancel-aia" value="true" />${msg("doCancel")} |
|
</button> |
|
<#else> |
|
<input type="submit" |
|
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" |
|
id="saveTOTPBtn" value="${msg("doSubmit")}" |
|
/> |
|
</#if> |
Version
main branch
Regression
Expected behavior
Buttons to be wrapped in a div with kcFormGroupClass class
Actual behavior
buttons are not wrapped, causing margin inconsistencies across template
How to Reproduce?
|
<#if isAppInitiatedAction??> |
|
<input type="submit" |
|
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" |
|
id="saveTOTPBtn" value="${msg("doSubmit")}" |
|
/> |
|
<button type="submit" |
|
class="${properties.kcButtonClass!} ${properties.kcButtonDefaultClass!} ${properties.kcButtonLargeClass!} ${properties.kcButtonLargeClass!}" |
|
id="cancelTOTPBtn" name="cancel-aia" value="true" />${msg("doCancel")} |
|
</button> |
|
<#else> |
|
<input type="submit" |
|
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" |
|
id="saveTOTPBtn" value="${msg("doSubmit")}" |
|
/> |
|
</#if> |
Anything else?
As a workaround, I've extracted the template and customized
Before reporting an issue
Area
login/ui
Describe the bug
Usually buttons are wrapped in a
<div class="${properties.kcFormGroupClass!}">Examples:
keycloak/themes/src/main/resources/theme/base/login/login-update-password.ftl
Lines 62 to 73 in e6b2f0d
keycloak/themes/src/main/resources/theme/base/login/login-password.ftl
Lines 43 to 45 in e6b2f0d
This is not the case for config-totp:
keycloak/themes/src/main/resources/theme/base/login/login-config-totp.ftl
Lines 98 to 112 in e6b2f0d
Version
main branch
Regression
Expected behavior
Buttons to be wrapped in a div with
kcFormGroupClassclassActual behavior
buttons are not wrapped, causing
margininconsistencies across templateHow to Reproduce?
keycloak/themes/src/main/resources/theme/base/login/login-config-totp.ftl
Lines 98 to 112 in e6b2f0d
Anything else?
As a workaround, I've extracted the template and customized