CODEWITHSUNDEEP
qooxdoo
Nasorenga
Nasorenga

Reputation: 61

How can I make qooxdoo's "border-invalid" decorator thicker?

I wanted to make the indication of invalid form items more prominent, so I copied the "border-invalid" section from qx/theme/modern/Decoration.js to myapp/theme/Decoration.js and added "outerWidth : 4":

qx.Theme.define("myapp.theme.Decoration",
{
    extend : qx.theme.modern.Decoration,

    decorations :
    {
        "border-invalid" :
        {
            decorator : qx.ui.decoration.Beveled,

            style :
            {
                outerColor : "invalid",
                innerColor : "border-inner-input",
                innerOpacity : 0.5,
                backgroundImage : "decoration/form/input.png",
                backgroundRepeat : "repeat-x",
                backgroundColor : "background-light",
                outerWidth: 4
            }
        }
    }
});

However, that didn't work. In Linux/chrome it seems to have no effect at all, and in Windows Vista/IE 9 the textField borders completely disappear when invalid! Am I doing it wrong?

Upvotes: 1

Views: 287

Answers (1)

Martin Wittemann
Martin Wittemann

Reputation: 2114

The decorator you used is a Beveled decorator which does not support the outerWidth property. You could use the Double decorator which supports the width changes.

Upvotes: 1

Related Questions