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

Re: [ydn-javascript] Re: Scrollable Datatable problem

Expand Messages
  • German Escallon
    ... Hash: SHA1 Debby is right, I faced the same issue a couple of weeks ago, and defining the width for my columns worked in my case. I would recommend you to
    Message 1 of 4 , Dec 4, 2008
      -----BEGIN PGP SIGNED MESSAGE-----
      Hash: SHA1

      Debby is right, I faced the same issue a couple of weeks ago, and
      defining the width for my columns worked in my case.
      I would recommend you to fill a bug request if this is not a viable
      solution for your implementation.
      ~G


      Debby wrote:
      >
      > I didn't take the time to analyze this thoroughly, but try adding a
      > width in addition to a height on your scrollable table.
      >
      > Debby
      >
      > --- In ydn-javascript@yahoogroups.com
      > <mailto:ydn-javascript%40yahoogroups.com>, "Jeff Lange"
      > <jlange6648@...> wrote:
      >>
      >> I'm having a problem with my datatable when I set
      >> scrollable:true. The headers are not the same width as the
      >> columns. If I set scrollable:false, everything works as expected.
      >>
      >>
      >> I read over a bunch of messages talking about something similar
      >> with 100% width tables, but it doesn't matter if I have this in a
      >> 100%
      > width
      >> div or not.
      >>
      >> Below is an ascii representation of what I'm seeing
      >> ------------------------------------------- | Header 1 | Header
      >> 2| | |-------------------------------------------| | Data for
      >> column one | Data for column two |
      >> -------------------------------------------
      >>
      >> Has anyone seen this? I'm pulling my hair out here....
      >>
      >> Here is the code that demonstrates this problem.. please tell me
      >> what I'm doing wrong. Thanks!
      >>
      >> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      >> "http://www.w3.org/TR/html4/strict.dtd
      > <http://www.w3.org/TR/html4/strict.dtd>">
      >> <html> <head> <meta http-equiv="content-type" content="text/html;
      >> charset=utf-8"> <title>Table Test</title>
      >>
      >> <style type="text/css"> body { margin:0; padding:0; } </style>
      >>
      >> <!-- Combo-handled YUI CSS files: --> <link rel="stylesheet"
      >> type="text/css"
      >>
      > href="http://yui.yahooapis.com/combo?2.6.0/build/datatable/assets/skins/\
      >
      > <http://yui.yahooapis.com/combo?2.6.0/build/datatable/assets/skins/>>
      > sam/datatable.css">
      >> <!-- Combo-handled YUI JS files: --> <script
      >> type="text/javascript"
      >>
      > src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-do\
      >
      > <http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-do>>
      >
      > m-event.js&2.6.0/build/connection/connection-min.js&2.6.0/build/element/\
      >
      >>
      > element-beta-min.js&2.6.0/build/datasource/datasource-min.js&2.6.0/build\
      >
      >> /datatable/datatable-min.js"></script>
      >>
      >> </head>
      >>
      >> <body class=" yui-skin-sam"> <h1>Non Scrollable</h1> <div
      >> id="table"></div>
      >>
      >> <h1>Scrollable</h1> <div id="table2"></div>
      >>
      >> <script type="text/javascript"> data = {"Result":
      >> [{"syslog_entry": {"timestamp": "2008-12-02T11:40:42Z",
      >> "message": "eth0: Link Up", "updated_at": "2008-12-03T14:21:27Z",
      >> "identity": "kernel", "node": 1, "facility": "LOG_KERN", "level":
      >> "2", "id": 1, "userTag": "", "created_at":
      >> "2008-12-03T14:21:27Z"}}, {"syslog_entry": {"timestamp":
      >> "2008-12-02T11:40:48Z", "message": "jldkfj sdlkfjdslkfjd
      >> dlkjfsdlfkjldskf lsdkjfl dskjfl", "updated_at":
      > "2008-12-04T20:54:07Z",
      >> "identity": "lkjlk", "node": 1, "facility": "foo", "level": "4",
      >> "id": 4, "userTag": "", "created_at": "2008-12-04T20:54:07Z"}},
      >> {"syslog_entry": {"timestamp": "2008-12-02T11:40:43Z", "message":
      >> "Another Log Message goes here", "updated_at":
      >> "2008-12-04T20:54:49Z", "identity": "identity", "node": 1,
      >> "facility": "LOG_FOO", "level":
      > "1",
      >> "id": 5, "userTag": "foo", "created_at":
      >> "2008-12-04T20:54:49Z"}}]};
      >>
      >> YAHOO.util.Event.addListener(window, "load", function() {
      >> YAHOO.example.Scrolling = function() { var dataSource = new
      >> YAHOO.util.LocalDataSource(data) dataSource.responseType =
      >> YAHOO.util.DataSource.TYPE_JSON; dataSource.responseSchema = {
      >> resultsList : "Result", fields:[{key:"syslog_entry.timestamp"},
      >> {key:"syslog_entry.message"}] }; dataSource.connXhrMode =
      >> "queueRequests";
      >>
      >> var columnDefs = [ {key:"syslog_entry.timestamp", label:"Time",
      >> sortable:true, formatter:"date"}, {key:"syslog_entry.message",
      >> label:"Message"}];
      >>
      >> var dataTable1 = new YAHOO.widget.DataTable("table", columnDefs,
      >> dataSource, {caption:"Table Caption"}); var dataTable2 = new
      >> YAHOO.widget.DataTable("table2", columnDefs, dataSource,
      >> {caption:"Table Caption", scrollable:true, height:100});
      >>
      >> return { dt1: dataTable1, dt2: dataTable2, ds: dataSource };
      >>
      >> }(); }); </script>
      >>
      >> </body> </html>
      >>
      >
      >
      > ______________________________________________________________________
      > This email has been scanned by the MessageLabs Email Security
      > System. For more information please visit
      > http://www.messagelabs.com/email
      > ______________________________________________________________________
      > <!-- #ygrp-mkp{ border: 1px solid #d8d8d8; font-family: Arial;
      > margin: 14px 0px; padding: 0px 14px; } #ygrp-mkp hr{ border: 1px
      > solid #d8d8d8; } #ygrp-mkp #hd{ color: #628c2a; font-size: 85%;
      > font-weight: bold; line-height: 122%; margin: 10px 0px; } #ygrp-mkp
      > #ads{ margin-bottom: 10px; } #ygrp-mkp .ad{ padding: 0 0; }
      > #ygrp-mkp .ad a{ color: #0000ff; text-decoration: none; } --> <!--
      > #ygrp-sponsor #ygrp-lc{ font-family: Arial; } #ygrp-sponsor
      > #ygrp-lc #hd{ margin: 10px 0px; font-weight: bold; font-size: 78%;
      > line-height: 122%; } #ygrp-sponsor #ygrp-lc .ad{ margin-bottom:
      > 10px; padding: 0 0; } --> <!-- #ygrp-mlmsg {font-size:13px;
      > font-family:
      > arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}
      > #ygrp-mlmsg table {font-size:inherit;font:100%;} #ygrp-mlmsg
      > select, input, textarea {font:99%
      > arial,helvetica,clean,sans-serif;} #ygrp-mlmsg pre, code {font:115%
      > monospace;*font-size:100%;} #ygrp-mlmsg * {line-height:1.22em;}
      > #ygrp-text{ font-family: Georgia; } #ygrp-text p{ margin: 0 0 1em
      > 0; } #ygrp-tpmsgs{ font-family: Arial; clear: both; } #ygrp-vitnav{
      > padding-top: 10px; font-family: Verdana; font-size: 77%; margin: 0;
      > } #ygrp-vitnav a{ padding: 0 1px; } #ygrp-actbar{ clear: both;
      > margin: 25px 0; white-space:nowrap; color: #666; text-align: right;
      > } #ygrp-actbar .left{ float: left; white-space:nowrap; }
      > .bld{font-weight:bold;} #ygrp-grft{ font-family: Verdana;
      > font-size: 77%; padding: 15px 0; } #ygrp-ft{ font-family: verdana;
      > font-size: 77%; border-top: 1px solid #666; padding: 5px 0; }
      > #ygrp-mlmsg #logo{ padding-bottom: 10px; } #ygrp-reco {
      > margin-bottom: 20px; padding: 0px; } #ygrp-reco #reco-head {
      > font-weight: bold; color: #ff7900; } #reco-grpname{ font-weight:
      > bold; margin-top: 10px; } #reco-category{ font-size: 77%; }
      > #reco-desc{ font-size: 77%; } #ygrp-vital{ background-color:
      > #e0ecee; margin-bottom: 20px; padding: 2px 0 8px 8px; } #ygrp-vital
      > #vithd{ font-size: 77%; font-family: Verdana; font-weight: bold;
      > color: #333; text-transform: uppercase; } #ygrp-vital ul{ padding:
      > 0; margin: 2px 0; } #ygrp-vital ul li{ list-style-type: none;
      > clear: both; border: 1px solid #e0ecee; } #ygrp-vital ul li .ct{
      > font-weight: bold; color: #ff7900; float: right; width: 2em;
      > text-align:right; padding-right: .5em; } #ygrp-vital ul li .cat{
      > font-weight: bold; } #ygrp-vital a{ text-decoration: none; }
      > #ygrp-vital a:hover{ text-decoration: underline; } #ygrp-sponsor
      > #hd{ color: #999; font-size: 77%; } #ygrp-sponsor #ov{ padding: 6px
      > 13px; background-color: #e0ecee; margin-bottom: 20px; }
      > #ygrp-sponsor #ov ul{ padding: 0 0 0 8px; margin: 0; }
      > #ygrp-sponsor #ov li{ list-style-type: square; padding: 6px 0;
      > font-size: 77%; } #ygrp-sponsor #ov li a{ text-decoration: none;
      > font-size: 130%; } #ygrp-sponsor #nc{ background-color: #eee;
      > margin-bottom: 20px; padding: 0 8px; } #ygrp-sponsor .ad{ padding:
      > 8px 0; } #ygrp-sponsor .ad #hd1{ font-family: Arial; font-weight:
      > bold; color: #628c2a; font-size: 100%; line-height: 122%; }
      > #ygrp-sponsor .ad a{ text-decoration: none; } #ygrp-sponsor .ad
      > a:hover{ text-decoration: underline; } #ygrp-sponsor .ad p{ margin:
      > 0; } o{font-size: 0; } .MsoNormal{ margin: 0 0 0 0; } #ygrp-text
      > tt{ font-size: 120%; } blockquote{margin: 0 0 0 4px;}
      > .replbq{margin:4} -->
      -----BEGIN PGP SIGNATURE-----
      Version: GnuPG v2.0.4-svn0 (GNU/Linux)
      Comment: Using GnuPG with SUSE - http://enigmail.mozdev.org

      iD8DBQFJOFk7kt7KGge+MvERAnFPAJ9CHPZgaCLFzpTBGoBJMdQlVr7rRwCeOfcI
      t9Pv1hnvdm2kaNVqe0l/B8Q=
      =8aOU
      -----END PGP SIGNATURE-----


      ______________________________________________________________________
      This email has been scanned by the MessageLabs Email Security System.
      For more information please visit http://www.messagelabs.com/email
      ______________________________________________________________________
    Your message has been successfully submitted and would be delivered to recipients shortly.