Use of <xf:passwordbox> within <xf:option>


Well-known member
Affected version
If you use a <xf:passwordbox> tag within a <xf:option> tag, the CSS for the passwordbox gets mucked a bit. It looks like this (see the 2 password box input fields there)... the Show text is slightly out of alignment and more noticeable, the icon for that Show/Hide toggle is definitely not in the right place.


It can be worked around by adding this to named template:

<xf:comment>Fix for xf:passwordbox within .inputChoices</xf:comment>
.inputChoices > .inputChoices-choice .inputGroup .iconic {
    position: relative;
.inputChoices > .inputChoices-choice .inputGroup .iconic > input + i {
    position: static;
.inputChoices > .inputChoices-choice .inputGroup .iconic-label:before {
    display: inline-block;

That CSS turns it into the expected results:


Maybe something you guys want to fix, maybe not. But it's a pretty easy CSS change to allow passwordbox to be used within options.
Ran into this one again... the above CSS fixed it (screenshot is after the CSS fix), but same thing... a dependent password box.

Top Bottom