Xpages NamePicker dialog alignment and width

Question

<xe:namePicker id="npUserNames" for="hdnUserNames">
<xe:this.dataProvider>
<xe:dominoViewNamePicker viewName="Techs"></xe:dominoViewNamePicker>
</xe:this.dataProvider>
</xe:namePicker>

The Names in the left box of the dialog are center aligned. Same with the right (selected values) box. I have tried text-align: left css in every possible surrounding element...The table cell, the table it is in, the surrounding div tag, the panel, the layout, the entire xpage. And the content of the namepicker dialog is still centered. How do I fix that? How can I specify the width of the dialog box? Also, in IE11, the "X" button does not work. Nothing happens when you click it.

Answer 1

I'd recommend interrogating the HTML generated using your browser's developer tools to see if there's a class defined for the relevant HTML tags that you can override. If so, you can use that. If not, you may need to create your own Renderer or extension of the Name Picker to generate different HTML. That will be more complicated, but the trade-off of any framework is limited configurability at the cost of quicker development.

Answer 2

I'm not doing exactly what Withers suggested, but it did lead me to a solution based on a comment somewhere else. I added a class dojo attribute and assigned a new css class to it. Only issue is that it is shifting everything in the dialog to the left...but it's ok for now.

<xe:this.dojoAttributes>
<xp:dojoAttribute name="class" value="namePickerClass">
</xp:dojoAttribute>
</xe:this.dojoAttributes>

CSS:

.namePickerClass {    margin: 0 auto;     width: 50%;     text-align:left;    border: 1px solid blue;     scrolling: none;
}