Hitachi Vantara Pentaho Community Forums
Results 1 to 5 of 5

Thread: Changing Styles of Dashboard Component

  1. #1

    Default Changing Styles of Dashboard Component

    Is is possible to change the styles of dashboard components within CDF 3.x? That is, apply a standard css style expression like "width:280px;font-size:.8em;" etc.

    Would like to be able to control the width of TextInput, SelectMulti, autocompleteBox, etc.

  2. #2
    pstoellberger Guest

    Default

    you can just add a CSS class / style definition to your Dashboard element. e.g <div id="textInput" class="myStyle"></div>
    i think that would be the easiest way. CSS files could be placed 1) in tomcat/webapps/pentaho-style/ - since its accessible without authentication there (e.g href="../pentaho-style/myStyle.css") or with the help of the GetCDFResource servlet ( href="GetCDFResource?resource=/my-solution/my-dashboard/my-style.css" )

  3. #3

    Default

    Thanks Paul, very helpful. This works for some style elements (e.g. font-size), but doesn't appear work with "width". Also, does not appear to work with newer (I think, jquery based) components like auto complete.

    I wonder if there alternatives. In earlier versions of CDF, you could pass a parameter through the component and then apply it within dashboards.js, but it seems the component model is more integrated in 3.x+ so doing this might be tougher.

    Thanks again for your help.

  4. #4

    Default

    I did find one way, which is a bit of a hack. Change corecomponents.js and add a new "style" parameter to the build of the html:

    var TextInputComponent = BaseComponent.extend({
    update : function() {
    selectHTML = "<input";

    // lines added below
    if(this.style != undefined) {
    selectHTML += " style = '" + this.style + "'";
    }
    // end of addition



    Then you can call it in the template.html:

    myInput =
    {
    name: "myInput",
    type: "textInputComponent",
    parameters:[],
    parameter: "input",
    htmlObject: "sampleObject",
    executeAtStart: true,
    style: "width:100px",
    postChange: function(){alert("you typed: " + input);}
    };


    There is certainly a better, smarter place to put this, but the concept works. Not exactly sure at quick glance how it will apply to autocomplete, but the concept is there.

  5. #5
    Join Date
    Jul 2007
    Posts
    2,497

    Default

    Jeez, don't do this; You can do it like paul said; the reason it may not work with the components you mentioned is because they have it's own css classes; just overwrite those on your files (general css select hierarchies) and they will be used.

    I don't recommend changing the source of cdf for this.

    Worst case scenario, you can do in the postExecution something like function(){ $("#myInput").css("width","100px") }, but I def. recommend using .css files for this
    Pedro Alves
    Meet us on ##pentaho, a FreeNode irc channel

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 - 2019 Hitachi Vantara Corporation. All Rights Reserved.