Formatting value label to fit without being cut off

Question

I've got an issue where i'm automatically formatting my jQuery.Knob instance and it's being cut off incorrectly. It ends up looking like this:

etc....

This slider just goes up in range (max will be around $10,000,000, potentially more), so you can understand that a larger portion of the displayed value will be cut off as it grows, which isn't what I want....

I managed to counter-act that with overloading the draw method, applying the following, but this isn't a full-proof method of doing so as the font size grows:

$(this.i).css('font-size', '90%').val('$' + parseFloat(this.cv, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,").toString());

But, I'd like a cleaner method without having to apply my own CSS to the presented label.

I did try through the format with the following, but it's overloading:

format: function (value) {
    return '$' + parseFloat(value, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
},

DEMO

^{I am using Bootstrap if that has anything to do with it, and the HTML for this container looks like this below:}

<div class='row margin-top-45'>
    <div class='col-lg-4'>
        <input value="50000" class="dial" data-step="5000" data-min="0" data-max="10000000" data-thickness="0.2" data-fgColor="#16A085" data-skin="tron">
    </div>
</div>

@adeneo My "knob" just isn't playing ball today! (*ps, thanks, you made my day !*) — Darren, Feb 12 '16 at 01:16
Are you need to automatically fit the text based on its size ? (without your own formatting) — Soundar, Feb 12 '16 at 04:03
I recommend reducing font dynamically based on the number of digits being display or switching to ($100k) format to fit everything inside. — dchayka, Feb 12 '16 at 04:21

score 0 · Accepted Answer · answered Feb 12 '16 at 04:56

Here is my example of dynamically changing the font if you decide to go with this solution: https://jsfiddle.net/3c4d7L53/3/ Try changing the value from xxxxx.xx to xxxxxx.xx and you'll notice font reduce itself. From here you decide what the font value will be based on the number of digits you have to display using basic math.

Code itself is below. I kept your overloaded format function and added change function:

jQuery('.dial').knob({
  format: function(e) {
    return '$' + parseFloat(e, 10).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,")
  },
  change: function(v) {
    var v = parseInt(v);
    var valLength = String(v).length;
    var defaultFontSize = 22;

    if (valLength > 5) {
      var defaultFontSize = 22 - ((valLength - 5) * 4);
      this.i.css({
        font: 'bold ' + defaultFontSize + 'px Arial'
      });
    } else {
      this.i.css({
        font: 'bold ' + defaultFontSize + 'px Arial'
      });
    }

  }
});

Formatting value label to fit without being cut off

1 Answers1