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

Datatable and Tabview

Expand Messages
  • Bernard Guile
    Dear All, Need help. I am trying to attach Datatable inside Tabview, the only thing I cant solve is to set height of datatable equal to Tabview. Tabview is
    Message 1 of 4 , Oct 2, 2008
    • 0 Attachment
      Dear All,

      Need help.

      I am trying to attach Datatable inside Tabview, the only thing I cant solve is to set height of datatable equal to Tabview. Tabview is attached at center part of layout manager.

      I had tried many different ways, using Dom.setStyle or myDataTable.set(), on css file, including upgrading to 2.6.0.

      The purpose is the table should be scrollable inside the TabView, but when I did put {scrollable:true, height:"10em"} on constructor, it also made table width scrollable, which is it should not happen.

      Any advise?

      Thanks in advance.
      Bernard.

      Source code as follow
      YAHOO.Bernard.myDataTable = new YAHOO.widget.DataTable(tbl_id, YAHOO.Bernard.myColumnDefs, YAHOO.Bernard.myDataSource);
      Dom.setStyle(tbl_id, 'height', YAHOO.Bernard.layout.getSizes().center.h - 80 +'px');
      YAHOO.Bernard.myDataTable.set('height', YAHOO.Bernard.layout.getSizes().center.h - 80 +'px');
      YAHOO.Bernard.myDataTable._syncColWidths();

      CSS as follow
      .yui-dt {
          border:1px solid transparent;
      }
      .yui-dt-noop {
          border:none;
      }
      .yui-skin-sam .yui-dt table {
          margin: 31px 0px 0px 0px;
          padding: 0;
          font-family: arial;
          font-size: inherit;   
          overflow: auto;
          width: 100%;
          border-collapse: collapse;
          border-spacing: 0;
      }


    • squawk97
      I have a very similar problem with YUI 2.6.0 If, as below, I set {scrollable:true, height: 10em }, I get an unwanted vertical scroll bar on the datatable and
      Message 2 of 4 , Oct 2, 2008
      • 0 Attachment
        I have a very similar problem with YUI 2.6.0

        If, as below, I set {scrollable:true, height:"10em"}, I get an
        unwanted vertical scroll bar on the datatable and screwed up alignment.

        As a workaround I set the width of each column and the problem doesn't
        occur. But this solution is not ideal!

        It occurs in IE7 (there's a surprise), but not FF.



        --- In ydn-javascript@yahoogroups.com, Bernard Guile
        <bernard_guiliano@...> wrote:
        >
        > Dear All,
        >
        > Need help.
        >
        > I am trying to attach Datatable inside Tabview, the only thing I
        cant solve is to set height of datatable equal to Tabview. Tabview is
        attached at center part of layout manager.
        >
        > I had tried many different ways, using Dom.setStyle or
        myDataTable.set(), on css file, including upgrading to 2.6.0.
        >
        > The purpose is the table should be scrollable inside the TabView,
        but when I did put {scrollable:true, height:"10em"} on constructor, it
        also made table width scrollable, which is it should not happen.
        >
        > Any advise?
        >
        > Thanks in advance.
        > Bernard.
        >
        > Source code as follow
        > YAHOO.Bernard.myDataTable = new YAHOO.widget.DataTable(tbl_id,
        YAHOO.Bernard.myColumnDefs, YAHOO.Bernard.myDataSource);
        > Dom.setStyle(tbl_id, 'height',
        YAHOO.Bernard.layout.getSizes().center.h - 80 +'px');
        > YAHOO.Bernard.myDataTable.set('height',
        YAHOO.Bernard.layout.getSizes().center.h - 80 +'px');
        > YAHOO.Bernard.myDataTable._syncColWidths();
        > CSS as follow
        > .yui-dt {
        > border:1px solid transparent;
        > }
        > .yui-dt-noop {
        > border:none;
        > }
        > .yui-skin-sam .yui-dt table {
        > margin: 31px 0px 0px 0px;
        > padding: 0;
        > font-family: arial;
        > font-size: inherit;
        > overflow: auto;
        > width: 100%;
        > border-collapse: collapse;
        > border-spacing: 0;
        > }
        >
      • squawk97
        that should of course read unwanted horizontal scroll bar duh!
        Message 3 of 4 , Oct 2, 2008
        • 0 Attachment
          that should of course read "unwanted horizontal scroll bar"
          duh!


          --- In ydn-javascript@yahoogroups.com, "squawk97" <squawk97@...> wrote:
          >
          > I have a very similar problem with YUI 2.6.0
          >
          > If, as below, I set {scrollable:true, height:"10em"}, I get an
          > unwanted vertical scroll bar on the datatable and screwed up alignment.
          >
          > As a workaround I set the width of each column and the problem doesn't
          > occur. But this solution is not ideal!
          >
          > It occurs in IE7 (there's a surprise), but not FF.
          >
          >
          >
          > --- In ydn-javascript@yahoogroups.com, Bernard Guile
          > <bernard_guiliano@> wrote:
          > >
          > > Dear All,
          > >
          > > Need help.
          > >
          > > I am trying to attach Datatable inside Tabview, the only thing I
          > cant solve is to set height of datatable equal to Tabview. Tabview is
          > attached at center part of layout manager.
          > >
          > > I had tried many different ways, using Dom.setStyle or
          > myDataTable.set(), on css file, including upgrading to 2.6.0.
          > >
          > > The purpose is the table should be scrollable inside the TabView,
          > but when I did put {scrollable:true, height:"10em"} on constructor, it
          > also made table width scrollable, which is it should not happen.
          > >
          > > Any advise?
          > >
          > > Thanks in advance.
          > > Bernard.
          > >
          > > Source code as follow
          > > YAHOO.Bernard.myDataTable = new YAHOO.widget.DataTable(tbl_id,
          > YAHOO.Bernard.myColumnDefs, YAHOO.Bernard.myDataSource);
          > > Dom.setStyle(tbl_id, 'height',
          > YAHOO.Bernard.layout.getSizes().center.h - 80 +'px');
          > > YAHOO.Bernard.myDataTable.set('height',
          > YAHOO.Bernard.layout.getSizes().center.h - 80 +'px');
          > > YAHOO.Bernard.myDataTable._syncColWidths();
          > > CSS as follow
          > > .yui-dt {
          > > border:1px solid transparent;
          > > }
          > > .yui-dt-noop {
          > > border:none;
          > > }
          > > .yui-skin-sam .yui-dt table {
          > > margin: 31px 0px 0px 0px;
          > > padding: 0;
          > > font-family: arial;
          > > font-size: inherit;
          > > overflow: auto;
          > > width: 100%;
          > > border-collapse: collapse;
          > > border-spacing: 0;
          > > }
          > >
          >
        • jennykhan
          Hi folks, I am not able to reproduce your issues in my local environment. I suspect it may be influenced by your data and the layout of your pages. Can you
          Message 4 of 4 , Dec 1, 2008
          • 0 Attachment
            Hi folks,

            I am not able to reproduce your issues in my local environment. I
            suspect it may be influenced by your data and the layout of your
            pages. Can you post URLs for further debugging?

            Thanks,
            Jenny



            --- In ydn-javascript@yahoogroups.com, "squawk97" <squawk97@...>
            wrote:
            >
            > that should of course read "unwanted horizontal scroll bar"
            > duh!
            >
            >
            > --- In ydn-javascript@yahoogroups.com, "squawk97" <squawk97@>
            wrote:
            > >
            > > I have a very similar problem with YUI 2.6.0
            > >
            > > If, as below, I set {scrollable:true, height:"10em"}, I get an
            > > unwanted vertical scroll bar on the datatable and screwed up
            alignment.
            > >
            > > As a workaround I set the width of each column and the problem
            doesn't
            > > occur. But this solution is not ideal!
            > >
            > > It occurs in IE7 (there's a surprise), but not FF.
            > >
            > >
            > >
            > > --- In ydn-javascript@yahoogroups.com, Bernard Guile
            > > <bernard_guiliano@> wrote:
            > > >
            > > > Dear All,
            > > >
            > > > Need help.
            > > >
            > > > I am trying to attach Datatable inside Tabview, the only thing
            I
            > > cant solve is to set height of datatable equal to Tabview.
            Tabview is
            > > attached at center part of layout manager.
            > > >
            > > > I had tried many different ways, using Dom.setStyle or
            > > myDataTable.set(), on css file, including upgrading to 2.6.0.
            > > >
            > > > The purpose is the table should be scrollable inside the
            TabView,
            > > but when I did put {scrollable:true, height:"10em"} on
            constructor, it
            > > also made table width scrollable, which is it should not happen.
            > > >
            > > > Any advise?
            > > >
            > > > Thanks in advance.
            > > > Bernard.
            > > >
            > > > Source code as follow
            > > > YAHOO.Bernard.myDataTable = new YAHOO.widget.DataTable(tbl_id,
            > > YAHOO.Bernard.myColumnDefs, YAHOO.Bernard.myDataSource);
            > > > Dom.setStyle(tbl_id, 'height',
            > > YAHOO.Bernard.layout.getSizes().center.h - 80 +'px');
            > > > YAHOO.Bernard.myDataTable.set('height',
            > > YAHOO.Bernard.layout.getSizes().center.h - 80 +'px');
            > > > YAHOO.Bernard.myDataTable._syncColWidths();
            > > > CSS as follow
            > > > .yui-dt {
            > > > border:1px solid transparent;
            > > > }
            > > > .yui-dt-noop {
            > > > border:none;
            > > > }
            > > > .yui-skin-sam .yui-dt table {
            > > > margin: 31px 0px 0px 0px;
            > > > padding: 0;
            > > > font-family: arial;
            > > > font-size: inherit;
            > > > overflow: auto;
            > > > width: 100%;
            > > > border-collapse: collapse;
            > > > border-spacing: 0;
            > > > }
            > > >
            > >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.