Right align numeric dimensions in pivot and table widgets

Comments

6 comments

  • Avatar
    Jessica Orlando

    This is great! When I change my field to a Currency field, it changes back a left align. The Number and Percent type remain right aligned. 

     

    Any idea what could  cause this? Thanks!

    0
    Comment actions Permalink
  • Avatar
    Sam Ovenshine

    Hi Jessica,

    It's likely because of the condition below, which you would need to remove or rewrite to handle the currency case:

    I just tested this in Chrome and it worked successfully:

    widget.on('domready', function (a, b) {
    _.each ($('td', element), function (td) {
    var $td = $(td);
    if (!isNaN(parseFloat($td.text().substring(1,)))) {
    $td.css({ 'text-align': 'right' });
    }
    });
    });

    0
    Comment actions Permalink
  • Avatar
    Jessica Orlando

    How would the script need to change if I have a Text field followed by 2 Date fields that all should be left aligned and I only want to right align the numbers?

    0
    Comment actions Permalink
  • Avatar
    Brian Wilson

    Hi Jessica,

    You can manually set each column individually with this code:

     

    widget.on('ready', function(sender, ev){
    $('td[fidx=1]',element).css('text-align','left');                     / / Column 1
    $('td[fidx=2]',element).css('text-align','left');                      // Column 2
    $('td[fidx=3]',element).css('text-align','left');                      // Column 3
    $('td[fidx=4]',element).css('text-align','right');                      // Column 4
    $('td[fidx=5]',element).css('text-align','right');                      // Column 5
    });

    0
    Comment actions Permalink
  • Avatar
    Pramata Corporation

    Hello Brian,

    Using the above script to change "text field followed Date fields that all should be left aligned and only want to right align the numbers" it won't work and still remain left align for all- though provided specifically "right" for column 4(it is a numerical field). Used the following script for my requirement: 

    /*widget.on('ready', function(sender, ev){
    $('td[fidx=1]',element).css('text-align','left'); /// / Column 1
    $('td[fidx=2]',element).css('text-align','left'); // Column 2
    $('td[fidx=3]',element).css('text-align','left'); // Column 3
    $('td[fidx=4]',element).css('text-align','right'); // Column 4
    $('td[fidx=5]',element).css('text-align','left'); // Column 5
    $('td[fidx=6]',element).css('text-align','left'); // Column 6
    $('td[fidx=7]',element).css('text-align','left'); // Column 7
    $('td[fidx=8]',element).css('text-align','left'); // Column 8
    $('td[fidx=9]',element).css('text-align','left'); // Column 9
    $('td[fidx=10]',element).css('text-align','left'); // Column 10
    $('td[fidx=11]',element).css('text-align','left'); // Column 11
    $('td[fidx=12]',element).css('text-align','left'); // Column 12
    });*/

    Kindly, suggest. Would be really helpful.

    Regards,

    Ananya

    0
    Comment actions Permalink
  • Avatar
    Brian Wilson

    Hi Ananya,

    I'm including one more line here which is the default line -- I'm not an expert, just passing along what has worked for me.

    widget.on('ready', function(sender, ev){
    $('td',element).css('text-align','left'); //default
    });

    widget.on('ready', function(sender, ev){
    $('td[fidx=1]',element).css('text-align','right'); //col1
    $('td[fidx=2]',element).css('text-align','left'); //col2
    $('td[fidx=3]',element).css('text-align','right'); //col3
    $('td[fidx=4]',element).css('text-align','left'); //col4
    $('td[fidx=5]',element).css('text-align','right'); //col5
    });

    Just to confirm -- you have your code wrapped in comment tags -- you've removed those in your actual widget code, correct?

    0
    Comment actions Permalink

Please sign in to leave a comment.