• Register
  • Log In
  • Home
  • Quick Start
    • Configurator
    • Download YUI 3
  • Documentation
    • User Guides
    • Examples
    • API Docs
    • Environments
    • Tutorials
  • Community
    • Gallery
    • Blog
    • Forums
    • YUI Theater
    • Calendar
  • Contribute
    • YUI on GitHub »
    • File a Ticket
    • View Tickets
    • Dashboard
  • Other Projects
    • Shifter »
    • Yogi »
    • YUI 2
    • YUI Doc »
    • YUI Test
    • YUI Website
    • YUI Compressor »
    • YUI Builder »
    • YUI PHP Loader
    • Grid Builder »
    • Skin Builder »
  • YUI
  • >
  • Community
  • >
  • Gallery

Gallery

Modules

  • Home
  • Featured
  • Popular
  • New
  • All

Documentation

  • Yogi Documentation
  • Shifter Documentation
  • Developer Guide
  • Module Setup

Tag Cloud

Context Navigation

    YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

    gallery-user-patch-2529968 (gallery-user-patch-2529968)

    Last Updated: 07/6/11
    + 0 -

    Eamon Brosnan

    YUI Contributor

    See 6 more by this user.

    Created: 07/6/11
    Project: YUI 3
    License: YUI BSD
    YUI Version: 3.3.0
    Free for use.

    Creating a table with no caption still creates the caption node.

    The main problem is that the caption node is styled with 1em padding, which
    causes unwanted whitespace.

    In this patch we attach or remove the node depending on whether the caption is set.

    • Tags:
    • eamonb
    • Download
    • Docs
    • Homepage
    • Bugs
    • Source
    • Example
    • Forum
    • History

    You can now omit the caption attribute when you instantiate DataTable and the node will not appear in the DOM.

    If you set the caption attribute via dt.set('caption') the node will be re-appended to the DOM. If that value becomes null, the node is removed.

    Code Sample

    YUI().use('gallery-user-patch-2529968', function(Y) {
     
    var mockresponse = {
        response: {
            results: [
                { "id" : "1", "name" : "Joe" },
                { "id" : "2", "name" : "Andrew" }
            ]
        }
    };
     
    var dt = new Y.DataTable.Base({
        columnset : [ 
            { key:"id", sortable: true }, 
            { key:"name", sortable: true }
        ],
        summary : "User patched DataTable Instance",
        recordset : mockresponse.response.results
    });
     
    dt.render('#example'); // Now there isn't a 1em padding above the table node
     
    // Although if you want a caption later you can still set it:
    dt.set('caption', 'Table showing users');
     
    // And setting it to null will remove it entirely
    dt.set('caption', null);
     
    });

    © 2006-2013 Yahoo! Inc. All rights reserved.
    All code on this site is licensed under the BSD License unless stated otherwise.
    About This Site · Security Contact Info