How to style an xe:namePicker ( get rid of inline style)?

Question

I'm using the xe:namePicker in several places in our application. I would like to style the picker to reflect the application style. So I gve it a styleClass using the dojo attribute. Sie screenshot of sourcecode

But the style is not used because the picker has its own inline style.

How can I get rid of the inline style to use my own styleclass?

Answer 1

you can override the inline styles with something like this in your css:

.lotusdialog [style] {
   background: yellow !important;
}

The [style] overrides any inline styles added to the element before it, in this case with the class .lotusdialog

Answer 2

I just tried it using the "class" dojo attribute, and unlike you got it to work:

Here's the name picker's xml code:

<xe:namePicker id="namePicker1" for="inputText7">
    <xe:this.dataProvider>
        <xe:dominoNABNamePicker></xe:dominoNABNamePicker>
    </xe:this.dataProvider>
    <xe:this.dojoAttributes>
        <xp:dojoAttribute name="class" value="myDlgClass">
        </xp:dojoAttribute>
    </xe:this.dojoAttributes>
</xe:namePicker>

This references a styleClass from a .css resource attached to the Xpage. As you can see in the screenshots the class is attached to name picker's content widget, and it does work , too.

I don't know whether this method has an advantage over the other one recommended by Peter but maybe it can come in handy one way or another.