10 Replies Latest reply on May 6, 2008 12:48 PM by Arbi Sookazian

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

    Arbi Sookazian Master

      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.

        • 1. Re: minimizing the vertical space in each row of a rich:data
          Sergey Smirnov Master

           

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


          • 3. Re: minimizing the vertical space in each row of a rich:data
            Arbi Sookazian Master

            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;
            }


            • 4. Re: minimizing the vertical space in each row of a rich:data
              Arbi Sookazian Master

              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;
              }


              • 5. Re: minimizing the vertical space in each row of a rich:data
                Arbi Sookazian Master

                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.

                • 6. Re: minimizing the vertical space in each row of a rich:data
                  Arbi Sookazian Master

                  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.

                  • 7. Re: minimizing the vertical space in each row of a rich:data
                    Sergey Smirnov Master

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

                    • 8. Re: minimizing the vertical space in each row of a rich:data
                      Arbi Sookazian Master

                      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>


                      • 9. Re: minimizing the vertical space in each row of a rich:data
                        Sergey Smirnov Master

                        My previous post is still actual. Do not ignore

                        • 10. Re: minimizing the vertical space in each row of a rich:data
                          Arbi Sookazian Master

                          this works fine...

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