Menu ▾ ▴

Scrollbar on Display tag table ?

Help
L@u
2008-05-15
2012-10-09

  • L@u

    L@u - 2008-05-15

    Hi,

    Has anyone added a scroll bar to display tag table (to avoid scrolling the full page) ?

    I am returning a lot of rows into display tag table (1 000): I would like to get the table to be a fixed size and to have an horizontal scrollbar on the table and not on the page (so I get a fixed header and footer).
    I have done this before but I was wondering if anyone has done with display tag.

    I have seen a post about this, with a solution not working in IE ... but I need it to work in IE (6 & 7).

    Cheers,
    L@u

     

    • Michael Osipov

      Michael Osipov - 2008-05-16

      put the table in a div with a fixed height and tell the div style to overflow auto or scroll

       

      • wecansolveit.org

        wecansolveit.org - 2008-07-01

        Does not work in IE!!! This is the only thing, in the last couple of months, that has been killing me since I first started to use it for all of the table display.

         

        • wecansolveit.org

          wecansolveit.org - 2009-04-15

          ok finally, I have a working solution for others to look at:

          if(navigator.appName == 'Microsoft Internet Explorer')
          {
          document.write('<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/pages/styles/locked-column.css" />');
          }
          else
          {
          document.write('<link rel="stylesheet" type="text/css" href="<%= request.getContextPath() %>/pages/styles/displaytagex.css" />');
          }

          locked-column.css::::::::::::

          div#tbl-container {
          width: 400px;
          / default value will be overrided by minimum of table width or screen resolution/
          height: 300px;
          overflow: auto;
          /
          scrollbar-base-color: #ffeaff;
          /
          }

          .dataTable { /table-layout: fixed; /
          border-collapse: collapse;
          / background-color: WhiteSmoke; /
          }

          .dataTable th {
          top: expression(document . getElementById("tbl-container") . scrollTop-2
          ); / IE5+ only /
          z-index: 20;
          font-size: small;
          padding: 3px 3px 3px 3px !important;
          text-align: center;
          position: relative;
          cursor: default;
          font-family: sans-serif;
          font-size: small;
          font-weight: bold;
          background-color: rgb(46, 54, 64);
          color: #FFFFF;
          }

          .dataTable thead tr {
          position: relative;
          height: 10px;
          background-color: #7CA4E0;
          }

          .dataTable th a:link,th a:visited {
          color: #FFFFFF;
          text-decoration: none;
          font-family: sans-serif;
          font-weight: normal;
          }

          .dataTable a:hover {
          color: #FFFFFF;
          text-decoration: none;
          font-family: sans-serif;
          font-weight: bold;
          }

          .dataTable thead th.sorted A {
          font-weight: bolder;
          }

          .dataTable td {
          padding: 3px 3px 3px 3px !important;
          }

          .dataTable tbody tr {
          height: auto;
          white-space: nowrap;
          }

          .dataTable tbody tr.odd {
          background-color: #eee;
          font-size: x-small;
          }

          .dataTable tbody tr.tableRowEven,tr.even {
          background-color: #ddd
          font-size: x-small;
          }

          .dataTable tbody tr td:last-child { / padding-right: 20px; /

          }

          /these styles have nothing to do with the locked column/
          .dataTable body {
          background-color: white;
          color: black;
          font-family: sans-serif;
          }

          .dataTable tbody td {
          padding: 2px 4px 2px 4px !important;
          font-family: sans-serif;
          font-size: x-small;
          }

          .exportlinks {
          font-family: sans-serif;
          }

          / style sheet to display light blue color for a mouse on row over event /
          .dataTable tr.rowMouseOver {
          color: white;
          background-repeat: repeat-x;
          background-color: rgb(228, 59, 47); /#8888FF;/
          }

          .dataTable .order1 {
          background-position: right 50%;
          background-image: url('../Images/arrow_up.gif');
          background-repeat: no-repeat;
          font-weight: bold;
          }

          .dataTable .order2 {
          background-position: right 50%;
          background-image: url('../Images/arrow_down.gif');
          background-repeat: no-repeat;
          font-weight: bold;
          }

          span.export {
          padding: 0 4px 1px 20px;
          font-size: x-small;
          text-align: center;
          }

          span.excel {
          background-image: url('../Images/ico_file_excel.png');
          background-repeat: no-repeat;
          width: 16px;
          }

          span.csv {
          background-image: url('../Images/ico_file_csv.png');
          background-repeat: no-repeat;
          width: 16px;
          }

          span.xml {
          background-image: url('../Images/ico_file_xml.png');
          background-repeat: no-repeat;
          width: 16px;
          }

          span.first {
          background-image: url('../Images/first.jpg');
          background-repeat: no-repeat;
          width: 16px;
          }

          span.last {
          background-image: url('../Images/last.jpg');
          background-repeat: no-repeat;
          width: 16px;
          }

          span.pdf {
          background-image: url('../Images/ico_file_pdf.png');
          background-repeat: no-repeat;
          width: 16px;
          }

          span.rtf {
          background-image: url('../Images/ico_file_rtf.png');
          background-repeat: no-repeat;
          width: 16px;
          }

          .rightAlignedPadded {
          text-align: right;
          padding-right: 10px;
          }

          displaytagex.css:::::::::::::
          / The idea was to match an input button's style to match with an
          existing images size by matching with the buttons width and height          /
          input.displayTableFirst {
          background-image: url('../Images/first.jpg');
          background-repeat: no-repeat;
          border: 0px;
          width: 27px;
          height: 24px;
          }

          input.displayTableNext {
          background-image: url(../Images/next.jpg);
          background-repeat: no-repeat;
          border: 0px;
          width: 27px;
          height: 24px;
          border: 10px;
          }

          input.displayTablePrevious {
          background-image: url(../Images/previous.jpg);
          background-repeat: no-repeat;
          border: 0px;
          width: 27px;
          height: 24px;
          border: 10px;
          }

          input.displayTableLast {
          background-image: url(../Images/last.jpg);
          background-repeat: no-repeat;
          border: 0px;
          width: 27px;
          height: 24px;
          border: 10px;
          }

          .displayPageButtonSimple {
          background: #AEAFAD;
          font-family: "Times New Roman", Times, serif;
          font-size: small;
          color: black;
          }

          .displayPageButton {
          background: #AEAFAD;
          font-family: "Times New Roman", Times, serif;
          font-size: small;
          width: 70px;
          color: black;
          }

          overlay {

          background-image: url(../Images/blackDot.png);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;

          }

          .displayTableFrame {
          background-color: white;
          height: 320px;
          width: 100%;
          }

          .dataTable {
          text-decoration: none;
          border: 1px solid #CCC;
          /
          width: 98%;
          /
          }

          .dataTable th {
          font-family: sans-serif;
          font-size: small;
          font-weight: bold;
          padding: 3px 3px 3px 3px !important;
          background-color: rgb(46, 54, 64);
          color: #FFFFF;
          }

          .dataTable td {
          padding: 3px 3px 3px 3px !important;
          }

          .dataTable thead tr {
          position: relative;
          height: 10px;
          }

          .dataTable th a:link,th a:visited {
          color: #FFFFFF;
          text-decoration: none;
          font-family: sans-serif;
          font-weight: normal;
          }

          .dataTable a:hover {
          color: #FFFFFF;
          text-decoration: none;
          font-family: sans-serif;
          font-weight: bold;
          }

          .dataTable thead th.sorted A {
          font-weight: bolder;
          }

          .dataTable tbody {
          width: 400px;
          height: 230px;
          overflow-x: hidden;
          overflow-y: auto;
          }

          .dataTable tbody tr {
          height: auto;
          white-space: nowrap;
          }

          .dataTable tbody tr.odd {
          background-color: #eee
          }

          .dataTable tbody tr.tableRowEven,tr.even {
          background-color: #ddd
          }

          .dataTable tbody tr td:last-child {
          padding-right: 20px;
          }

          .dataTable tbody td {
          padding: 2px 4px 2px 4px !important;
          font-family: sans-serif;
          font-size: small;
          }

          .exportlinks {
          font-family: sans-serif;
          }

          / style sheet to display light blue color for a mouse on row over event /
          .dataTable tr.rowMouseOver {
          color: white;
          background-repeat: repeat-x;
          background-color: rgb(228, 59, 47); / #7CA4E0; /
          }

          .dataTable .order1 {
          background-position: right 50%;
          background-image: url('../Images/arrow_up.gif');
          background-repeat: no-repeat;
          font-weight: bold;
          }

          .dataTable .order2 {
          background-position: right 50%;
          background-image: url('../Images/arrow_down.gif');
          background-repeat: no-repeat;
          font-weight: bold;
          }

          .defaultDataTable {
          background-color: white;
          border: 1px solid #000066;
          font-size: xx-small;
          margin: 5px;
          font: bold normal normal xx-small "Arial Black";
          }

          .defaultDataTable th {
          border-right: 1px solid #c8c8ff;
          padding-left: 2px;
          padding-right: 12px;
          font-family: arial, helvetica, sans-serif;
          font-weight: bold;
          color: black;
          background-color: #AEAFAD;
          margin-right: 10px;
          white-space: nowrap;
          }

          .defaultDataTable td {
          font-family: verdana, arial, helvetica, sans-serif;
          padding-left: 2px;
          }

          .defaultDataTable tr.total td {
          white-space: nowrap;
          vertical-align: top;
          font-weight: bold;
          border-top: 1px solid black;
          padding-bottom: 10px;
          }

          .defaultDataTable tr.total td.customer {
          visibility: hidden;
          }

          .defaultDataTable td.hidden {
          display: none;
          }

          .defaultDataTable th.hidden {
          display: none;
          }

          .defaultDataTable th.r {
          text-align: right;
          padding-right: 10px;
          }

          .defaultDataTable th.c {
          text-align: center;
          }

          .defaultDataTable td.r {
          text-align: right;
          padding-right: 10px;
          }

          .defaultDataTable td.c {
          text-align: center;
          }

          .defaultDataTable tr.odd {
          background-color: #eee
          }

          .defaultDataTable tr.even {
          background-color: #ddd;
          }

          .defaultDataTable th a {
          text-align: left;
          color: black;
          }

          .defaultDataTable .order1 {
          background-position: right 50%;
          background-image: url('../Images/arrow_up.gif');
          background-repeat: no-repeat
          }

          .defaultDataTable .order2 {
          background-position: right 50%;
          background-image: url('../Images/arrow_down.gif');
          background-repeat: no-repeat
          }

          span.export {
          padding: 0 4px 1px 20px;
          font-size: x-small;
          text-align: center;
          }

          span.excel {
          background-image: url('../Images/ico_file_excel.png');
          background-repeat: no-repeat;
          width: 16px;
          }

          span.csv {
          background-image: url('../Images/ico_file_csv.png');
          background-repeat: no-repeat;
          width: 16px;
          }

          span.xml {
          background-image: url('../Images/ico_file_xml.png');
          background-repeat: no-repeat;
          width: 16px;
          }

          span.first {
          background-image: url('../Images/first.jpg');
          background-repeat: no-repeat;
          width: 16px;
          }

          span.last {
          background-image: url('../Images/last.jpg');
          background-repeat: no-repeat;
          width: 16px;
          }

          span.pdf {
          background-image: url('../Images/ico_file_pdf.png');
          background-repeat: no-repeat;
          width: 16px;
          }

          span.rtf {
          background-image: url('../Images/ico_file_rtf.png');
          background-repeat: no-repeat;
          width: 16px;
          }

          .pageHeader {
          height: 60px;
          background-image: url('../Images/header.gif');
          background-repeat: repeat-x
          }

          .pageHeaderText {
          font-size: 30px;
          margin-left: 5px;
          color: black;
          font-family: "century gothic", verdana, arial, helvetica, sans-serif;
          font-weight: bold;
          text-align: left;
          display: inline;
          white-space: nowrap;
          }

          .content {
          width: 50%;
          padding: 10px;
          }

          .rightColumn {
          width: 3px;
          }

          .customer {
          width: 10%;
          text-align: left;
          }

          .company {
          width: 10%;
          text-align: left;
          }

          .email {
          width: 14%;
          text-align: left;
          }

          .broker {
          width: 10%;
          text-align: right;
          }

          .company {
          width: 10%;
          text-align: left;
          }

          .fmv {
          width: 13%;
          text-align: left;
          }

          .country {
          width: 12%;
          text-align: left;
          }

          .tax {
          width: 14%;
          text-align: left;
          }

          .size9 {
          width: 9%;
          text-align: left;
          }

          .hideColumn {
          display: none;
          }

          .so {
          width: 10%;
          text-align: left;
          }

          .type {
          width: 10%;
          text-align: left;
          }

          .fmv {
          width: 20%;
          text-align: left;
          }

          .plan {
          width: 13%;
          text-align: left;
          }

          .eid {
          width: 15%;
          text-align: left;
          }

          .orderNumber {
          width: 10%;
          text-align: left;
          }

          .orderDate {
          text-align: left;
          width: 14%;
          }

          .productName {
          width: 25%;
          }

          .size35 {
          width: 35%;
          text-align: left;
          }

          .quantity {
          text-align: center;
          width: 10%;
          }

          .rightAlignedPadded {
          text-align: right;
          padding-right: 10px;
          }

          .logo {
          border-top: 1px solid #000066;
          border-left: 1px solid #000066;
          border-bottom: 1px solid #000066;
          display: inline;
          text-align: right;
          }

          .code {
          font-family: verdana, arial, helvetica, "courier new", monospace;
          font-size: xx-small;
          }

          .borderedInline {
          display: inline;
          border: 1px solid black;
          }

          img {
          border: 0px;
          }

          .pagelinks {
          color: #999999;
          margin: 5px;
          }

          .pagelinks img {
          vertical-align: middle;
          }

           

          • wecansolveit.org

            wecansolveit.org - 2009-04-15

            And the way to use it in my jsp, don't forget to include the javascript based on the browser type as discussed in my previous post:

            <div id="tbl-container"><display:table
            name="sessionScope.participantList" export="true" id="tmpId"
            class="dataTable" defaultorder="ascending" cellspacing="1" >

                &lt;display:setProperty name=&quot;decorator.media.html&quot;
        value=&quot;displaytag.sample.decorators.MyHtmlTotalWrapper&quot; /&gt;
    &lt;display:setProperty name=&quot;export.pdf.decorator&quot;
        value=&quot;displaytag.sample.decorators.MyITextTotalWrapper&quot; /&gt;
    &lt;display:setProperty name=&quot;export.pdf.filename&quot; value=&quot;ParticipantProfile.pdf&quot; /&gt;
    &lt;display:setProperty name=&quot;export.rtf.decorator&quot;
        value=&quot;displaytag.sample.decorators.MyITextTotalWrapper&quot; /&gt;
    &lt;display:setProperty name=&quot;export.rtf.filename&quot; value=&quot;ParticipantProfile.rtf&quot; /&gt;
    &lt;display:setProperty name=&quot;export.excel.filename&quot; value=&quot;ParticipantProfile.xls&quot; /&gt;
    &lt;display:setProperty name=&quot;export.csv&quot; value=&quot;true&quot; /&gt;
    &lt;display:setProperty name=&quot;export.csv.filename&quot; value=&quot;ParticipantProfile.csv&quot; /&gt;
    &lt;display:setProperty name=&quot;export.xml&quot; value=&quot;true&quot; /&gt;
    &lt;display:setProperty name=&quot;export.xml.filename&quot; value=&quot;ParticipantProfile.xml&quot; /&gt;

    &lt;display:setProperty name=&quot;paging.banner.placement&quot;&gt;top&lt;/display:setProperty&gt;

    &lt;display:column title=&quot;&quot; &gt;
    &lt;/display:column&gt;

&lt;/display:table&gt;&lt;/div&gt;
&lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;
&lt;div id=&quot;export-links&quot;&gt;
&lt;/div&gt;

            I have used some custom wrapper classes to modify the content, and to customize my export and filter it. Let me know if someone is interested in it, for example, it now exports the result as WYSYWIG meaning even specific fields will have the generic grouping and summing rather than to write grouping and summing on a specific column as is done in the example:

            http://displaytag.homeip.net/displaytag-examples-1.2/example-new-export.jsp

            This logic works on specific column only, where as I wrote code that is generic.

             

    • arbrown1

      arbrown1 - 2008-07-01

      Where you ever able to get this working? If so were did you end up putting this div tag? Before the <display:table> tag? Or between the <displat:table> tag and the first <display:column> tag? I'm starting to wonder if I might have some conflicts in some of my other CSS.

      Thanks in advance for your assisstance.

       

    • wecansolveit.org

      wecansolveit.org - 2008-07-01

      https://sourceforge.net/forum/message.php?msg_id=4913962

      I posted two issues along with this.

      The above CSS fixes two issues:
      1.) Issue when table goes beyond page width?
      I extended the css a little beyond by creating a frame (see displayTableFrame above) as the table width often goes beyond the page width. This does an ok job however, there are many issues that the frame does not work in Internet Explorer at all.
      .displayTableFrame {
      background-color: white;
      overflow-x: scroll;
      height: 320px;
      width: 100%;
      }
      As again I have no clue how we can control the height based on all other data in a page so that it fits exactly in the single page. I am working on fixing the CSS to get the height automatically adjusted soon. Currently the height is based on the actual display table height which is also fixed as you can see in the .dataTable CSS

      2.) The vertical scroll bar appearing on the right hand side of the display table creates a horizontal scroll bar in the bottom in all browsers.
      .dataTable tbody {
      height: 230px;
      overflow-x: hidden;
      }
      The overflow-x:hidden removes that ugly horizontal scrollbar. The frame in itself gets you a horizontal scrollbar only when the table goes beyond the page width. All of this was tested in FireFox.

      Hope some one with decent CSS knowledge can help save the display table issue in IE + FF.

      To make things worse, I found that the latest FirFox now has issues displaying the odd and even rows with different fonts as I can see it!!! There are millions of users already downloading it...

       

Log in to post a comment.