minimizing the vertical space in each row of a rich:dataTabl

[asookazian]

I have a rich:dataTable as follows:

<rich:dataTable id="techQueueTable" value="#{hardwareTableList}" var="list">
 <rich:column>
 <b><u><f:facet name="header"><h:outputText value="Barcode"/></f:facet></u></b>
 <b><h:outputText value="#{list[0].coxBarcode}"/></b>
 </rich:column>

 <rich:column>
 <b><u><f:facet name="header"><h:outputText value="Owner"/></f:facet></u></b>
 <b><h:outputText value="#{list[4].ownerTypeDesc}"/></b>
 </rich:column>

 <rich:column>
 <b><u><f:facet name="header"><h:outputText value="Vendor"/></f:facet></u></b>
 <b><h:outputText value="#{list[2].hardwareVendorDesc}"/></b>
 </rich:column>

 <rich:column>
 <b><u><f:facet name="header"><h:outputText value="Type"/></f:facet></u></b>
 <b><h:outputText value="#{list[3].hardwareTypeDesc}"/></b>
 </rich:column>

 <rich:column>
 <b><u><f:facet name="header"><h:outputText value="Model"/></f:facet></u></b>
 <b><h:outputText value="#{list[1].hardwareModel}"/></b>
 </rich:column>

 <rich:column>
 <b><u><f:facet name="header"><h:outputText value="Assigned By"/></f:facet></u></b>
 <b><h:outputText value="#{list[0].enteredByUser}"/></b>
 </rich:column>

 <rich:column>
 <b><u><f:facet name="header"><h:outputText value="Assigned Date"/></f:facet></u></b>
 <b><h:outputText value="#{list[0].firstEnteredDate}">
 <f:convertDateTime pattern="MM/dd/yyyy"/>
 </h:outputText>
 </b>
 </rich:column>

 <rich:column>
 <b><u><f:facet name="header"><h:outputText value="Status"/></f:facet></u></b>
 <b><h:outputText value="#{list[0].trHardwareStatus.hardwareStatus}"/></b>
 </rich:column>

 <rich:column>
 <b><u> <f:facet name="header"><h:outputText value="Reassign To Storage"/></f:facet></u></b><br></br>
 <a4j:form id ="assignButtonA4JForm" ajaxSubmit="true" reRender="techQueueTable, allassignedmsg, submit">
 <h:commandButton id="assigntostoragebtn" value="Reassign" action="#{assignToStorage.assignHardwareToStorage(hardwareTableList.getRowIndex())}" onclick="return confirmMode('Assign', '#{tbHardwareObject.barCode}');"/>
 <input type="hidden" name="paramAssignBarCode" value="#{list[0].coxBarcode}"/>
 <input type="hidden" name="isAssignBtnClicked" value="Y"/>
 <br></br>
 </a4j:form>
 </rich:column>

 </rich:dataTable>

The end-user is complaining that there is too much vertical space in each row of the dataTable. What can I do to decrease the space? I'm pretty sure the root cause is the form that is embedded in the last column.

Should I try wrapping one form around the entire dataTable considering the rowIndex will be available in the SFSB method that gets called in the EL?

Or is it even better to pass the var value (in this case "list") so then I can also eliminate the need for the paramAssignBarCode hidden variable.

Also considering using checkboxes instead of a commandButton for each row in dataTable. thx.

[sergeysmirnov]

.rich-table-cell, .rich-subtable-cell,
.rich-subtable-footercell, .rich-table-headercell,
.rich-table-footercell
{
 padding:0;
}

[asookazian]

thanks Sergey, that helped.

[asookazian]

also the text in each cell is wrapping. for example, I'd like to see "Xerox Corporation" in one line rather than

"Xerox
Corporation"

in two lines/rows in a cell. How do I turn off text wrap? There is plenty of room to fit it in one row/line per cell.

Here is my css file:

/* General
----------------------------------------------- */
input[type="submit"], input[type="button"] {
 font-weight: bold;
 color: #fff;
 border: 1px solid #5D1414;
 height: 26px;
 background: #fff url(../img/btn.bg.gif) 0 0 repeat-x;
 border-style: none;
}
.center {
 text-align: center;
}
.entry {
 clear: both;
 padding-top: 10px;
}
.entry .label {
 float: left;
 padding-right: 5px;
 font-weight: bold;
 width: 150px;
 text-align: right;
}
.entry .output {
 float: right;
 width: 360px;
 padding-top: 10px;
 text-align: left;
}
.entry .input {
 float: right;
 width: 360px;
 text-align: left;
}
.entry .error {
 float: right;
 width: 360px;
 text-align: left;
}

body {
 margin: 0px;
 font-family: Arial,sans-serif;
 font-size:12px;
 color: #616161;
}

#mainTemplatePanel {
 width: 100%;
 border: 0px;
 border-width: 0px;
}

.headerBar {
 text-align: left;
 background-color: #ececee;
}

.sideBar {
 width: 300px;
 height: 375px;
 vertical-align:top;
 padding:10px;
}

.sideBarText {
 font-size: 12px;
}

.sideBarBanner {
 font-size: 14px;
 font-weight: bold;
}


.mainContent {
 height: 375px;
 vertical-align:top;
 padding:10px;
 border-left: 2px;
 border-color: black;
 border-right: 0px;
 border-bottom: 0px;
 border-top: 0px;
 border-style: solid;
}

.mainContentText {
 font-size: 12px;
}

.mainContentBanner {
 font-size: 14px;
 font-weight: bold;
}

.footerBar {
 text-align: center;
 font-size: 10px;
 background-color: #ececee;
 padding-top: 5px;
}

.footerText {
 font-size: 10px;
}

.bannerText {
 font-family: Arial,sans-serif;
 color: #578BB8;
 font-size: 1.2em;
 margin-top: 0;
}

a:active, a:link, a:visited {
 color: #0D5798;
}
a:hover {
 color: #8CAFCD;
}

.button {
 display: block;
 background-color: #6699cc;
 color: #ffffff;
 width: 163px;
 height: 19px;
 margin: 2px auto;
 padding: 2px 2px 2px 2px;
 text-align: center;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 10px;
 font-weight: bold;
 text-decoration: none;

}

input, textarea {
 border: 1px solid #BBBBBB;
 font-size: 10px;
 background: #F0F8FF;
 color: black;
}

input[type='submit'], input[type='button'] {
 background: #4477AA;
 color: white;
 margin: 5px;
 border-color: gray;
}

.tableControl, .actionButtons {
 width: 100%;
}

.tableControl {
 text-align: right;
}

.rich-table {
 width:100%;
 /*width:50%;*/
 /*background-color: Yellow;*/
}

.rich-table-cell, .rich-subtable-cell,
.rich-subtable-footercell, .rich-table-headercell,
.rich-table-footercell
{
 padding:0;
 font-weight: bold;
}

/*
.rich-table-header {
 color: Red;
 background-color: Yellow;
 font-style:italic;
}
*/

h1 {
 font-family: Arial,sans-serif;
 color: #578BB8;
 font-size: 1.6em;
 margin-top: 0;
}

.columnHeader:hover
{
 color: #FF6600;
}

.message {
 border: 1px solid #FFCC00;
 padding: 5px;
 margin-top: 5px;
 margin-bottom: 5px;
 background-color: #F0F8FF;
 font-size: 12px;
}


code {
 font: 1.1em "Courier New", Courier, mono;
 text-align: left;
}

code.block {
 text-align: left;
 white-space: pre;
 font: 7pt "Courier New", Courier, mono;
 display: block;
 border-style: solid;
 border-width: thin;
 padding: .5em;
 background: #ffffff;
 margin: 10px;
}

.columnLabel {
 width: 125px;
 padding: 3px;
 font-weight: bold;
}

.columnValue {
 padding: 3px;
}

.error {
 background-image: url(/InternalJavaWebAppTemplate/img/error.gif);
 background-repeat: no-repeat;
 margin-left: 10px;
 font-weight: bold;
 padding: 1px;
 padding-left: 20px;
}

.errornogif {
 margin-left: 10px;
 font-weight: bold;
 padding: 1px;
 padding-left: 20px;
}

.errors {
 color: red;
}

.successful {
 color: green;
}

.errors input {
 border: 1px solid red;
}
.errors textarea {
 border: 1px solid red;
}
.required {
 color: red;
 padding-left: 2px;
}

/* date picker style */
div.seam-date
{
 margin-top: 5px;
 border: 1px solid #AAAAAA;
 background-color: #FFFFFF;
 color: #505050;
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-size: 12px;
}

table.seam-date td {
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-weight: 12px;
}

.seam-date-monthNames
{
 width: 70px;
 border: 1px solid #dddddd;
 border-right: 3px solid #444444;
 border-bottom: 3px solid #444444;
 background-color: #ffffff;
 font-size: 12px;
 cursor: pointer;
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-weight: normal;
}

a.seam-date-monthNameLink, a.seam-date-monthNameLink:visited
{
 text-align: center;
 display: block;
 color: #555555;
}

a.seam-date-monthNameLink:hover
{
 background-color: #CCCCCC;
 color: red;
}

.seam-date-years
{
 height: 10em;
 overflow: auto;
 width: 60px;
 border: 1px solid #dddddd;
 border-right: 3px solid #444444;
 border-bottom: 3px solid #444444;
 background-color: #ffffff;
 font-size: 12px;
 cursor: pointer;
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-weight: normal;
}

a.seam-date-yearLink, a.seam-date-yearLink:visited
{
 text-align: center;
 display: block;
 color: #555555;
}

a.seam-date-yearLink:hover
{
 background-color: #CCCCCC;
 color: red;
}

tr.seam-date-header
{
 padding: 2px 0px 2px 0px;
}

td.seam-date-header
{
 padding: 0px 8px 0px 8px;
 text-align: center;
 color: gray;
 font-family: Tahoma, Arial, Helvetica, sans-serif;
 font-weight: bold;
 font-size: 12px;
}

td.seam-date-header-prevMonth
{
 background-image: url("../img/cal-prev.png");
 background-repeat: no-repeat;
 background-position: center;
 padding: 0px 2px 0px 2px;
 width: 17px;
 height: 16px;
 margin-left: 2px;
}

td.seam-date-header-nextMonth
{
 background-image: url("../img/cal-next.png");
 background-repeat: no-repeat;
 background-position: center;
 padding: 0px 2px 0px 2px;
 width: 17px;
 height: 16px;
 margin-right: 2px;
}

tr.seam-date-headerDays
{
 color: white;
 font-weight: normal;
}

tr.seam-date-headerDays > td
{
 background-color: #CCCCCC;
 border: 1px solid #AAAAAA;
 color: white;
 text-align: center;
 width: 26px;
}

tr.seam-date-footer
{
 background-color: white;
 color: #505050;
 font-weight: bold;
}

tr.seam-date-footer > td
{
 text-align: center;
}

td.seam-date-inMonth
{
 background-color: white;
 color: black;
 font-weight: normal;
 cursor: pointer;
 border: 1px solid #ece9d8;
}

td.seam-date-outMonth
{
 background-color: white;
 color: #999999;
 font-weight: normal;
 cursor: pointer;
 border: 1px solid #ece9d8;
}

td.seam-date-selected
{
 background-color: #CCCCCC;
 border: 1px solid #AAAAAA;
 color: black;
 font-weight: normal;
}

td.seam-date-dayOff-inMonth
{
 background-color: #efefef;
 color: black;
 font-weight: normal;
 cursor: pointer;
 border: 1px solid #ece9d8;
}

td.seam-date-dayOff-outMonth
{
 background-color: #efefef;
 color: #999999;
 font-weight: normal;
 cursor: pointer;
 border: 1px solid #ece9d8;
}

td.seam-date-hover
{
 background-color: #CCCCCC;
 border: 1px solid #AAAAAA;
 cursor: pointer;
 color: red;
}

[asookazian]

I tried the following in the css file and it still wraps the text in the cells:

.rich-table {
 width:100%;
 white-space:nowrap;
 /*width:50%;*/
 /*background-color: Yellow;*/
}

.rich-table-cell, .rich-subtable-cell,
.rich-subtable-footercell, .rich-table-headercell,
.rich-table-footercell
{
 padding:0;
 font-weight: bold;
 white-space:nowrap;
}

[asookazian]

where can I find a doc that lists all the elements/attributes for the various richfaces element styles?

for example, how can I know that width, background-color, etc. are modifiable for .rich-table? thx.

[asookazian]

there was only one reference to css in the richfaces faq.

I'm talking about something like this:

http://www.topxml.com/css/css_property_white-space.asp

I'm using RF 3.1.3.GA.

[sergeysmirnov]

regardless RichFaces, did you try how white-space:nowrap works in pure html table?

[asookazian]

I tried with h:dataTable and h:column and it doesn't wrap automatically.

I also removed the width param in the .rich-table style class and it still wraps for rich:dataTable.

<!-- trying out recommendation from Sergey: http://www.jboss.com/index.html?module=bb&op=viewtopic&p=4148714#4148714 -->
 <h:dataTable value="#{techDeployToUser.getHardwareEquipmentForUserLocation()}" var="hardware" border="1">
 <h:column>
 <f:facet name="header"><h:outputText value="Barcode"/></f:facet>
 <h:outputText value="#{hardware.coxBarcode}"/>
 </h:column>

 <h:column>
 <f:facet name="header"><h:outputText value="Purchaser"/></f:facet>
 <h:outputText value="#{hardware.trOwnerType.ownerTypeDesc}"/>
 </h:column>

 <h:column>
 <f:facet name="header"><h:outputText value="Manufacturer"/></f:facet>
 <h:outputText value="#{hardware.tbHardwareModel.tbHardwareVendor.hardwareVendorDesc}"/>
 </h:column>

 <h:column>
 <f:facet name="header"><h:outputText value="Type"/></f:facet>
 <h:outputText value="#{hardware.tbHardwareModel.trHardwareType.hardwareTypeDesc}"/>
 </h:column>

 <h:column>
 <f:facet name="header"><h:outputText value="Model"/></f:facet>
 <h:outputText value="#{hardware.tbHardwareModel.hardwareModel}"/>
 </h:column>
 <!-- AS 05-02-08 - removed as per DLane screen mockup
 <h:column>
 <f:facet name="header"><h:outputText value="Status"/></f:facet>
 <h:outputText value="#{hardware.historicalStatus}"/>
 </h:column>
 -->

 <!-- AS 05-02-08 - possibly adding Date Assigned and Notes columns per DLane... -->
 <h:column>
 <f:facet name="header"><h:outputText value="Remove from User"/></f:facet>
 <h:form>
 <h:commandButton value="Remove" action="#{techDeployToUser.techHardwareRemovalFromUser(hardware)}"/>
 </h:form>
 </h:column>

 </h:dataTable>

[sergeysmirnov]

My previous post is still actual. Do not ignore

[asookazian]

this works fine...

<h:dataTable value="#{techDeployToUser.getHardwareEquipmentForUserLocation()}" var="hardware" border="1" style="white-space:nowrap">