Hitachi Vantara Pentaho Community Forums
Results 1 to 1 of 1

Thread: Changing Bootstrap container element in a CDE dashboard

  1. #1
    Join Date
    Jun 2012
    Posts
    19

    Default Changing Bootstrap container element in a CDE dashboard

    A common request for dashboard layouts is to change the element where the bootstrap .container class is added. The use cases for this vary from already having it defined in the .html template, setting the container class to .container-fluid (always stretches to the entire viewport) or adding multiple parallel container elements in the same dashboard.

    My standard approach to this usually involves two steps:

    1. Removing the .container class from the root element, that was added by CDE. This can be achieved using a simple jquery snippet, usually similar to
      Code:
      $('body > .container').removeClass('container');
      Your .html template might have a different structure, and the div.container element might not be a child of body, so YMMV.
    2. Using freeform layout components to place the container elements where needed. This kind of layout components allow the user to place any kind of html element on the dashboard, also specifying its attributes. The default is a div with no classes, attributes or IDs, so I simply add the .container class manually.


    Here's an example of usage for a specific use case:

    Last edited by gundisalwa; 04-14-2015 at 05:51 AM.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Privacy Policy | Legal Notices | Safe Harbor Privacy Policy

Copyright © 2005 - 2017 Pentaho Corporation. All Rights Reserved.