Loading ...
Sorry, an error occurred while loading the content.

Incorrect column resizing of datatable in Firefox

Expand Messages
  • Mike Prince
    I am having problems in my application with datatable sizing in Firefox under certain situations. Most of the time it is fine, but occasionally the columns are
    Message 1 of 5 , Jun 28, 2008
    • 0 Attachment
      I am having problems in my application with datatable sizing in Firefox under certain situations. Most of the time it is fine, but occasionally the columns are not resized properly leading to the last column not fitting, and a horizontal scrollbar being added. I have cut out unnecessary parts of the application to create an example which demonstrates the problem: http://www.bubo.org/test1/test1.html. (This file has an iframe including the datatable source.) You can see (in Firefox) that the last column is not fitting.

      This problem only occurs:
      • in Firefox - in IE7 the location column wraps to allow the datatable to fit
      • when the datatable is set to scrollable - if I remove the scrollable and height properties the location column wraps to fit
      • when the last column contains 'short' data: if I swap the column definitions so that my location column is after my comment column it wraps correctly to fit

      Incidentally if I set the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> then IE behaves the same as Firefox, i.e. neither work as desired.

      My example code is as follows.

      test1.html:

      <html>
      <head><title>YUI Datatable resizing problem</title></head>
      <body>
      <iframe width="800" src="test1.php">
      </body>
      </html>

      test1.php:

      <?php
      ?>
      <head></head>
      <body class="yui-skin-sam">
      <style type="text/css">
      body {margin:0;padding:0;}
      </style>

      <!-- YUI files -->
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/datatable/assets/skins/sam/datatable.css" />
      <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/json/json-min.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min.js"></script>
      <script type="text/javascript" src="http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-min.js"></script>

      <div id="datatable" class="datatable"></div>

      <script type="text/javascript">
          //manipulating the DOM causes problems in ie, so create after window fires "load"
          YAHOO.util.Event.addListener(window, "load", function()
          {
              // Override standard date parsing and formatting to process dates returned from SQL.
              YAHOO.util.DataSource.parseDate = function (oData)
              {
                  if (oData === undefined || oData === null) return oData;
                  var parts = oData.split(' ');
                  var datePart = parts[0].split('-');
                  if (parts.length > 1)
                  {
                      var timePart = parts[1].split(':');
                      return new Date(datePart[0],datePart[1]-1,datePart[2],timePart[0],timePart[1],timePart[2]);
                  }
                  else
                  {
                      return new Date(datePart[0],datePart[1]-1,datePart[2]);
                  }
              };
              YAHOO.widget.DataTable.formatDate = function(el, oRecord, oColumn, oData)
              {
                  var oDate = oData;
                  if(oDate instanceof Date)
                  {
                      el.innerHTML = oDate.getDate() + "/" + oDate.getMonth() + "/" + oDate.getFullYear();
                  }
                  else
                  {
                      el.innerHTML = YAHOO.lang.isValue(oData) ? oData : "";
                  }
              };

              // Data.
              var jsonData = new YAHOO.util.DataSource("getTestData.php?");
              jsonData.responseType = YAHOO.util.DataSource.TYPE_JSON;
              jsonData.responseSchema =
              {
                  resultsList:"ResultSet.Result",
                  fields: [
                      {key: "rownumber", parser:YAHOO.util.DataSource.parseNumber},
                      {key: "species_id", parser:YAHOO.util.DataSource.parseNumber},
                      {key: "spec_auth_name"},
                      {key: "spec_auth_scientific"},
                      {key: "record_id", parser:YAHOO.util.DataSource.parseNumber},
                      {key: "record_date", parser:YAHOO.util.DataSource.parseDate},
                      {key: "record_location"},
                      {key: "record_comment"}
                  ]
              };
              jsonData.connMethodPost = true;

              var myTableConfig = {
                  initialRequest: '',
                  scrollable: true,
                  height: "100px"
              };

              // Data table.
                  var columns =
                  [
                      { key: "rownumber", label: "No.", sortable: true, resizeable: true },
                      { key: "spec_auth_name", label: "Species", sortable: true, resizeable: true },
                      { key: "spec_auth_scientific", label: "Scientific Name", sortable: true, resizeable: true },
                      { key: "record_date", label: "Date", minWidth: 80, formatter: YAHOO.widget.DataTable.formatDate, sortable: true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}, resizeable: true },
                      { key: "record_location", label: "Location", sortable: true, resizeable: true },
                      { key: "record_comment", label: "Comments", sortable: true, resizeable: true }
                  ];

              var myTable = new YAHOO.widget.DataTable("datatable", columns, jsonData, myTableConfig);
             
          });
      </script>

      </body>
      </html>

      Cheers
      -- Mike --
    • y_lsmith
      Mike, Have you tried setting the width configuration to be in accord with the iframe width? Luke ...
      Message 2 of 5 , Jun 30, 2008
      • 0 Attachment
        Mike,

        Have you tried setting the width configuration to be in accord with
        the iframe width?

        Luke

        --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@...> wrote:
        >
        > I am having problems in my application with datatable sizing in Firefox
        > under certain situations. Most of the time it is fine, but occasionally
        > the columns are not resized properly leading to the last column not
        > fitting, and a horizontal scrollbar being added. I have cut out
        > unnecessary parts of the application to create an example which
        > demonstrates the problem: http://www.bubo.org/test1/test1.html
        > <http://www.bubo.org/test1/test1.html> . (This file has an iframe
        > including the datatable source.) You can see (in Firefox) that the last
        > column is not fitting.
        >
        > This problem only occurs:
        >
        > * in Firefox - in IE7 the location column wraps to allow the
        > datatable to fit
        > * when the datatable is set to scrollable - if I remove the
        > scrollable and height properties the location column wraps to fit
        > * when the last column contains 'short' data: if I swap the column
        > definitions so that my location column is after my comment column it
        > wraps correctly to fit
        >
        > Incidentally if I set the doctype <!DOCTYPE HTML PUBLIC "-//W3C//DTD
        > HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> then IE behaves
        > the same as Firefox, i.e. neither work as desired.
        >
        > My example code is as follows.
        >
        > test1.html:
        >
        > <html>
        > <head><title>YUI Datatable resizing problem</title></head>
        > <body>
        > <iframe width="800" src="test1.php">
        > </body>
        > </html>
        >
        > test1.php:
        >
        > <?php
        > ?>
        > <head></head>
        > <body class="yui-skin-sam">
        > <style type="text/css">
        > body {margin:0;padding:0;}
        > </style>
        >
        > <!-- YUI files -->
        > <link rel="stylesheet" type="text/css"
        >
        href="http://yui.yahooapis.com/2.5.2/build/datatable/assets/skins/sam/da\
        > tatable.css" />
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.5.2/build/yahoo-dom-event/yahoo-dom-even\
        > t.js"></script>
        > <script type="text/javascript"
        > src="http://yui.yahooapis.com/2.5.2/build/json/json-min.js"></script>
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.5.2/build/element/element-beta-min.js"><\
        > /script>
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.5.2/build/connection/connection-min.js">\
        > </script>
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.5.2/build/datasource/datasource-beta-min\
        > .js"></script>
        > <script type="text/javascript"
        >
        src="http://yui.yahooapis.com/2.5.2/build/datatable/datatable-beta-min.j\
        > s"></script>
        >
        > <div id="datatable" class="datatable"></div>
        >
        > <script type="text/javascript">
        > //manipulating the DOM causes problems in ie, so create after
        window
        > fires "load"
        > YAHOO.util.Event.addListener(window, "load", function()
        > {
        > // Override standard date parsing and formatting to process
        > dates returned from SQL.
        > YAHOO.util.DataSource.parseDate = function (oData)
        > {
        > if (oData === undefined || oData === null) return oData;
        > var parts = oData.split(' ');
        > var datePart = parts[0].split('-');
        > if (parts.length > 1)
        > {
        > var timePart = parts[1].split(':');
        > return new
        >
        Date(datePart[0],datePart[1]-1,datePart[2],timePart[0],timePart[1],timeP\
        > art[2]);
        > }
        > else
        > {
        > return new Date(datePart[0],datePart[1]-1,datePart[2]);
        > }
        > };
        > YAHOO.widget.DataTable.formatDate = function(el, oRecord,
        > oColumn, oData)
        > {
        > var oDate = oData;
        > if(oDate instanceof Date)
        > {
        > el.innerHTML = oDate.getDate() + "/" + oDate.getMonth()
        > + "/" + oDate.getFullYear();
        > }
        > else
        > {
        > el.innerHTML = YAHOO.lang.isValue(oData) ? oData : "";
        > }
        > };
        >
        > // Data.
        > var jsonData = new YAHOO.util.DataSource("getTestData.php?");
        > jsonData.responseType = YAHOO.util.DataSource.TYPE_JSON;
        > jsonData.responseSchema =
        > {
        > resultsList:"ResultSet.Result",
        > fields: [
        > {key: "rownumber",
        > parser:YAHOO.util.DataSource.parseNumber},
        > {key: "species_id",
        > parser:YAHOO.util.DataSource.parseNumber},
        > {key: "spec_auth_name"},
        > {key: "spec_auth_scientific"},
        > {key: "record_id",
        > parser:YAHOO.util.DataSource.parseNumber},
        > {key: "record_date",
        > parser:YAHOO.util.DataSource.parseDate},
        > {key: "record_location"},
        > {key: "record_comment"}
        > ]
        > };
        > jsonData.connMethodPost = true;
        >
        > var myTableConfig = {
        > initialRequest: '',
        > scrollable: true,
        > height: "100px"
        > };
        >
        > // Data table.
        > var columns =
        > [
        > { key: "rownumber", label: "No.", sortable: true,
        > resizeable: true },
        > { key: "spec_auth_name", label: "Species", sortable:
        > true, resizeable: true },
        > { key: "spec_auth_scientific", label: "Scientific
        Name",
        > sortable: true, resizeable: true },
        > { key: "record_date", label: "Date", minWidth: 80,
        > formatter: YAHOO.widget.DataTable.formatDate, sortable: true,
        > sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}, resizeable:
        > true },
        > { key: "record_location", label: "Location", sortable:
        > true, resizeable: true },
        > { key: "record_comment", label: "Comments", sortable:
        > true, resizeable: true }
        > ];
        >
        > var myTable = new YAHOO.widget.DataTable("datatable", columns,
        > jsonData, myTableConfig);
        >
        > });
        > </script>
        >
        > </body>
        > </html>
        >
        > Cheers
        > -- Mike --
        >
      • Mike Prince
        Hi Luke Yes I have. If I set a width on the container div it makes no difference, and if I set a width in the datatable config itself I get a horizontal
        Message 3 of 5 , Jun 30, 2008
        • 0 Attachment
          Hi Luke

          Yes I have. If I set a width on the container div it makes no
          difference, and if I set a width in the datatable config itself I get
          a horizontal scrollbar (as would be expected).

          -- Mike --

          --- In ydn-javascript@yahoogroups.com, "y_lsmith" <lsmith@...> wrote:
          >
          > Mike,
          >
          > Have you tried setting the width configuration to be in accord with
          > the iframe width?
          >
          > Luke
          >
        • y_lsmith
          Mike, I see what you mean. Unfortunately, your use case is particularly challenging, since you have most columns with auto widths, one column with a minWidth,
          Message 4 of 5 , Jul 1, 2008
          • 0 Attachment
            Mike,

            I see what you mean. Unfortunately, your use case is particularly
            challenging, since you have most columns with auto widths, one column
            with a minWidth, all resizeable columns, and an overall fixed width,
            all within a Y-scrollable table.

            I was able to achieve something close to what you need on this page:
            http://yuiblog.com/sandbox/yui/v252/examples/datatable/dt_in_iframe.html

            It may not scale well to your full app, but who knows. It definitely
            doesn't gracefully handle resizing columns, and otherwise it's largely
            untested, so YMMV.

            The next release of DataTable will have a new mechanism for managing
            column and table widths, so you might want to submit a SourceForge
            bug/feature request for your use case that we can try to validate our
            development against it.

            Hope this helps,
            Luke


            --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@...> wrote:
            >
            > Hi Luke
            >
            > Yes I have. If I set a width on the container div it makes no
            > difference, and if I set a width in the datatable config itself I get
            > a horizontal scrollbar (as would be expected).
            >
            > -- Mike --
            >
            > --- In ydn-javascript@yahoogroups.com, "y_lsmith" <lsmith@> wrote:
            > >
            > > Mike,
            > >
            > > Have you tried setting the width configuration to be in accord with
            > > the iframe width?
            > >
            > > Luke
            > >
            >
          • Mike Prince
            Hi Luke Thanks: this is very helpful. It works with my test example and nearly, but not quite properly, when fitted in to my application. Firstly I realised
            Message 5 of 5 , Jul 2, 2008
            • 0 Attachment
              Hi Luke

              Thanks: this is very helpful. It works with my test example and
              nearly, but not quite properly, when fitted in to my application.

              Firstly I realised that I didn't need resizeable columns so have
              removed that which should simplify things and make your fix work better.

              When applied to my application I no longer get the last column
              problem, but the header columns have become offset by a few pixels
              compared to the body columns.

              You should be able to see this in action in a test version of my
              application at
              http://www.bubo.org/test1/listing/View-List.html?list_id=2536.

              Based on your fix I have used the following:
              #listtable table {
              width: 615px;
              *width: 613px;
              }
              and set the datatable "listtable" width:
              width: "630px"

              Incidentally if you page to the last page the columns are no longer
              offset but are not quite sized optimally.

              Can't yet see whether this is due to something in your fix or in my code.

              Cheers
              -- Mike --

              --- In ydn-javascript@yahoogroups.com, "y_lsmith" <lsmith@...> wrote:
              >
              > Mike,
              >
              > I see what you mean. Unfortunately, your use case is particularly
              > challenging, since you have most columns with auto widths, one column
              > with a minWidth, all resizeable columns, and an overall fixed width,
              > all within a Y-scrollable table.
              >
              > I was able to achieve something close to what you need on this page:
              > http://yuiblog.com/sandbox/yui/v252/examples/datatable/dt_in_iframe.html
              >
              > It may not scale well to your full app, but who knows. It definitely
              > doesn't gracefully handle resizing columns, and otherwise it's largely
              > untested, so YMMV.
              >
              > The next release of DataTable will have a new mechanism for managing
              > column and table widths, so you might want to submit a SourceForge
              > bug/feature request for your use case that we can try to validate our
              > development against it.
              >
              > Hope this helps,
              > Luke
              >
              >
              > --- In ydn-javascript@yahoogroups.com, "Mike Prince" <bubomike@> wrote:
              > >
              > > Hi Luke
              > >
              > > Yes I have. If I set a width on the container div it makes no
              > > difference, and if I set a width in the datatable config itself I get
              > > a horizontal scrollbar (as would be expected).
              > >
              > > -- Mike --
              > >
              > > --- In ydn-javascript@yahoogroups.com, "y_lsmith" <lsmith@> wrote:
              > > >
              > > > Mike,
              > > >
              > > > Have you tried setting the width configuration to be in accord with
              > > > the iframe width?
              > > >
              > > > Luke
              > > >
              > >
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.