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

Re: Incorrect column resizing of datatable in Firefox

Expand Messages
  • y_lsmith
    Mike, Have you tried setting the width configuration to be in accord with the iframe width? Luke ...
    Message 1 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 2 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 3 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 4 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.