Autosize label

#1

Hi


I have a label / HTML label which I am putting text into via script. There could be different lengths of text in the label.


Is it possible to set a max/min height/width and have the label autosize to fit? Or do I need to count the number of letters and come up with a script kludge?



#2

“Is it possible to set a max/min height/width and have the label autosize to fit?” – There are properties to set height and width for a label (label properties -> Layout -> Position -> Width/Height) although it is not possible to specify max width/height or min width/height for a label. Unfortunately, the label in Dundas BI is not designed to auto-size based on the length of the label text that is updated by a script. A quick solution would be to set a higher width for the label beforehand in the UI to make sure that the label text set by the script always fits inside the label.



“Or do I need to count the number of letters and come up with a script kludge?” – If setting the label width beforehand is not a suitable option, you can set the label width in script if you know what to set based on the length of the text string. Basically, it is required to calculate the length of the string in pixels and then set the label width accordingly. The following script (under “Ready” event) calculates the length of the string in pixels and then sets the label width (tested for Chrome and EDGE):


function getWidthOfText(txt, fontname, fontsize) {

// Create dummy span
this.e = document.createElement("span");

// Set font-size
this.e.style.fontSize = fontsize;

// Set font-face / font-family
this.e.style.fontFamily = fontname;

// Set text
this.e.innerHTML = txt;

document.body.appendChild(this.e);

// Get width NOW, before removing the dummy span
var w = this.e.offsetWidth;

// Cleanup
document.body.removeChild(this.e);

// Return the width
return w;
}

label1.labelText = "A label that is very long to fit into the label area";

var labelTextWidthInPixel = getWidthOfText(label1.labelText, label1.fontFamily, label1.fontSize);

// You may need to add additional pixels for other browsers (for example IE)
label1.width = labelTextWidthInPixel;



#3

Thanks, this may work but will get complicated with wrapping...


I find that there's 'All browsers' and then there's IE. So anything I do, I test in IE.

#4

Hi David and Others,

Were you able to find a solution for this? I have a table with varying lengths of text and would like to set my table width to the max width of the column text.

Thanks for your help

#5

That may require a CSS override. If you use the element inspector in the browser dev tools, you’ll be able to find which element class it is you want to edit. From there, you’ll want to put something like this in the CSS class:

width: max-content;

Of course, this won’t work on IE or legacy Edge. Following stack overflow thread has some more suggestions on doing this with CSS in general:

1 Like