I have a nice DataView, with only one thing wrong. The width of the extra columns keeps changing depending on the width of the data in the field. I think it looks much better if these values do not jump around.
How can I set the width of these columns? I tried using a width with !important in the style of the extra columns, but that didn't work. I tried adding &NBSP to the values, but that didn't work perfectly, and is really really kludgy.
<xe:dataView id="dataView1" var="dvEntry"
collapsibleDetail="false" columnTitles="true"
detailsOnClient="true" openDocAsReadonly="true" rows="25"
disableTheme="false" pageName="/xpFormEmployee.xsp"
styleClass="lotusTable" rowStyleClass="EVEN,ODD"
rowStyle="width:1000px">
<xe:this.data>
<xp:dominoView var="view1"
viewName="(xpEmployeeByNameActiveOnly)"
databaseName="TheTruth.nsf" dataCache="id"
searchExactMatch="false">
<xp:this.search><![CDATA[#{javascript:var query:String = '';
var search:String = viewScope.get("searchString")
if (search === null || search == "")
{query = ""}
else
{query = 'FIELD HR_FullName CONTAINS ' + search + '*'}
return query
}]]></xp:this.search>
</xp:dominoView>
</xe:this.data>
<xe:this.extraColumns>
<xe:viewExtraColumn
style="width:400px !important;vertical-align:middle;font-weight:bold"
headerStyle="font-weight:bold;font-size:12pt" contentType="html"
columnTitle="Location">
<xe:this.href><![CDATA[#{javascript:var geoView:NotesView = database.getView("(DbLookupLocationsByName)");
var geoDoc:NotesDocument;
var UNID:String;
geoDoc = geoView.getDocumentByKey(dvEntry.getColumnValue("HR_GeoLocation"));
if (geoDoc != null)
{
UNID = geoDoc.getUniversalID();
"notes://XX/__86257D58005E456E.nsf/0/" + UNID + "?OpenDocument"}
else
{""}}]]></xe:this.href>
<xe:this.value><![CDATA[#{javascript:var tmpLoc:String = dvEntry.getColumnValue("HR_geoLocation");
var lenTmpLoc = 30 - tmpLoc.length;
var tmpPad:String = "";
for (i = 0; i < (lenTmpLoc); i++)
{tmpPad += " ";}
return tmpLoc + tmpPad
}]]></xe:this.value>
</xe:viewExtraColumn>
<xe:viewExtraColumn columnTitle="Office Phone"
columnName="HR_OfficePhone"
style="width:400px !important;vertical-align:middle"
headerStyle="font-weight:bold;font-size:12pt"
contentType="html">
<xe:this.value><![CDATA[#{javascript:var tmpLoc:String = dvEntry.getColumnValue("HR_officePhone");
var lenTmpLoc = 50 - tmpLoc.length;
var tmpPad:String = "";
for (i = 0; i < (lenTmpLoc); i++)
{tmpPad += " ";}
return tmpLoc + tmpPad
}]]></xe:this.value>
</xe:viewExtraColumn>
<xe:viewExtraColumn></xe:viewExtraColumn>
</xe:this.extraColumns>
<xe:this.iconColumn>
<xe:viewIconColumn>
<xe:this.icons>
<xe:iconEntry
style="height:35px;width:35px;padding-right:5.0px">
<xe:this.url><![CDATA[#{javascript:var phtStr:String;
var imgNme:String;
phtStr = dvEntry.getColumnValue("photo");
var docUNID:String = dvEntry.getColumnValue("docUNID");
if (phtStr != "")
{imgNme = "XXXXXX/xsp/.ibmmodres/domino/OpenAttachment/XXXX" + docUNID + "/$File/" + phtStr + "?Open"}
else
{imgNme = "xpPhotoPlaceholder.gif"}
imgNme
}]]></xe:this.url>
</xe:iconEntry>
</xe:this.icons>
</xe:viewIconColumn>
</xe:this.iconColumn>
<xe:this.summaryColumn>
<xe:viewSummaryColumn columnTitle="Name"
headerStyle="font-weight:bold;font-size:12pt;padding-left:8.0px">
</xe:viewSummaryColumn>
</xe:this.summaryColumn>
<xp:this.facets>
<xp:panel xp:key="summary">
<xp:table>
<xp:tr>
<xp:td>
<xp:text escape="false"
id="computedField2">
<xp:this.value><![CDATA[#{javascript:return "<h4><a href='xpFormEmployee.xsp?openDocument&documentId=" + dvEntry.getUniversalID() + "'>" + dvEntry.getDocument().getItemValueString('HR_FullName') + "</a></h4>";
}]]></xp:this.value>
</xp:text>
</xp:td>
</xp:tr>
</xp:table>
</xp:panel>
<xe:pagerSizes id="pagerSizes1"
sizes="5|10|25|50|100" xp:key="pagerTopLeft">
</xe:pagerSizes>
<xp:panel xp:key="pagerBottomLeft"
id="panel3">
<xe:pagerSizes id="pagerSizes2"></xe:pagerSizes>
</xp:panel>
<xp:panel xp:key="pagerTopRight"
styleClass="panelPagerTopRight">
<xp:pager layout="Previous Group Next"
for="dataView1" id="pager3" partialRefresh="true"
styleClass="pager">
</xp:pager>
</xp:panel>
<xp:panel xp:key="pagerBottomRight">
<xp:pager layout="Previous Group Next"
for="dataView1" id="pager1" partialRefresh="true"
styleClass="pager">
</xp:pager>
</xp:panel>
<xp:panel xp:key="noRows">
<xp:br />
<xp:div styleClass="xlEmptyFacet">
<xp:label>
<xp:this.value><![CDATA[#{javascript:"No Documents Found"}]]></xp:this.value>
</xp:label>
</xp:div>
</xp:panel>
</xp:this.facets>
</xe:dataView>
