dhtmlxtabbar left orientation tab width

How do you modify the width of a tab when the tabbar is in a “left” orientation? I’ve searched the forums and API and found lots of references to setting the width but none of it is working for me. I’ve tried initializing the tabbar with a complete Json object (and have tried a multitude of options):

tabBarObj = {parent: "divId",
				image_path: "dhtmlx/imgs/",
				skin: "dhx_skyblue",
				tabs: [],
				mode: "left",
				size_by_content: true,
				auto_size: true,
				width: 100,
				height: 100};
//Populate tabBarObj.tabs with {id:"someId", label:"someLabel", width:"100px"}
tabbar = new dhtmlXTabBar(tabBarObj);

When that didn’t work I tried adding tabs in after constuction, with the width parameter set (attached dhtmlxLeftTabbar.png):

tabbar = new dhtmlXTabBar(this.divId, "left");
tabbar.addTab("someId", "someLabel", "100px");

The only way I was able to modify the width in any way was to set the parameter on the constructor. However, this completely broke the styling of the tabs (attached brokenTabs.png):

tabbar = new dhtmlXTabBar(this.divId, "left", 100);

So any help on how I can get the tabs to look nice and fit my text horizontally would be great.


Just wanted to provide an update that the second broken style image was a result of me forgetting to set the style when I tried that approach. After setting the style correctly, using addTab with the width parameter seems to affect height instead:

tabbar.addTab("a1", "Tab Number 1", 40);

using addTab with the width parameter seems to affect height instead

It is correct for the left and right oriented tabs. Tabbar in skyblue skin has fixed height (width in left and right tabs).

Probably it would be better to use image with rotated text as tabs label. This approach is used in our live demo:

dhtmlx.com/docs/products/dhtmlxT … ndex.shtml

I wanted to provide an update for anyone who might search for this problem in the future. I had seen the image solution posted somewhere else and after trying (and failing) to use css to rotate the text, we resorted to using the image solution.

What we did was build a server side rest method that can generate a vertical text image with a transparent background. This method can also return the height of the image. The method calls look like this:

http://localhost:8080/tabImage?method=imageHeight&text=Hello World&bold=true

http://localhost:8080/tabImage?method=image&bold=true&text=Hello World

The imageHeight method is important to call BEFORE setting the image into the tabbar. This is because dhtmlx doesn’t know the height of the image until the src url resolves, and in my experience it simply defaulted to 55px high. So during tab creation we request the imageHeight first, and in the callback method to that rest call, we set the label in the tabbar:

   this.requestTabText = function(text, index, bold) {
		$.getJSON("http://localhost:8080/tabImage?method=imageHeight&text=" + text +"&bold=" + bold + "&callback=?", this.setTabText.bind(this, text, index, bold));
	this.setTabText = function(text, index, bold, data) {
        //Use your own imageHeight.  Ours comes back as data.imageHeight
        this.tabbar.setLabel("" + index, '<div style="height:' + data.imageHeight + 'px;" id="tabImage' + text + '" ><img id="labelImage' + text + '" style=" margin-left: auto; margin-right: auto" src="http://localhost:8080/tabImage?method=image&bold=' + bold + '&text=' + text + '"/></div>');

For those using Java, here is the server side object we used to generate the image:

public class TabImageHandler {

	private static final String METHOD_PARAM = "method";
	private static final String BOLD_PARAM = "bold";
	private static final String TEXT_PARAM = "text";
	private static final String IMAGE_METHOD = "image";
	private static final String IMAGE_HEIGHT_METHOD = "imageHeight";
	public static final void doGet(HttpServletRequest request, HttpServletResponse response) throws Exception {
		String method = request.getParameter(METHOD_PARAM);
		String text = request.getParameter(TEXT_PARAM);
		String boldStr = request.getParameter(BOLD_PARAM);
		boolean bold = false;
		if(boldStr != null && !"".equals(boldStr))
			bold = Boolean.parseBoolean(boldStr);
		if(method.equals(IMAGE_METHOD)) {
			BufferedImage textImage = createTextImage(text, bold);
			ImageIO.write(textImage, "png", response.getOutputStream());
		else if(method.equals(IMAGE_HEIGHT_METHOD)) {
			FontMetrics metrics = getImageWidthHeight(text, getFont(bold));
			//Return imageHeight as metrics.stringWidth(text).  
			//Yes, I do mean stringWidth(text) as the 270 degree rotated image will use it's width as height.
	 * Takes in a string of text, and a boolean denoting whether or not the resulting text image should be rendered in bold font.
	 * @param text
	 * @param bold
	 * @return
	private static BufferedImage createTextImage(String text, boolean bold) throws IOException {
		String spacerGifPath = "";//Use your own path to the 1x1 transparent gif.
		BufferedImage transparentImage = ImageIO.read(new File(spacerGifPath));
		Font font = getFont(bold);
		FontMetrics metrics = getImageWidthHeight(text, font);
		//Since we are using 
	    int h = metrics.stringWidth(text);
	    int w = metrics.getHeight() + 5;
        BufferedImage img = new BufferedImage(w, h, BufferedImage.TYPE_INT_ARGB);
        Graphics2D g2d = img.createGraphics();
        g2d.drawImage(transparentImage, 0, 0, null);        
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
	    AffineTransform at = new AffineTransform();
	    at.setToRotation( 1.5 * Math.PI );
        g2d.drawString(text, (int) (-1 * h), w / 2);
        return img;
	 * Returns a Font that matches DHtmlx tabbar font.
	 * @param bold
	 * @return
	private static final Font getFont(boolean bold) {
		Font font;
			font = new Font("Tahoma", Font.BOLD, 12);
			font = new Font("Tahoma", Font.PLAIN, 12);
		return font;
	 * Creates a graphics object that can then be used to generate a FontMetrics object.  This
	 * object will contain the width and height required to contain the text.
	 * @param text
	 * @param font
	 * @return
	private static final FontMetrics getImageWidthHeight(String text, Font font) {
		BufferedImage tmpImg = new BufferedImage(400, 400, BufferedImage.TYPE_INT_ARGB);
		Graphics2D tmpG2D = tmpImg.createGraphics();
		tmpG2D.rotate(270 * java.lang.Math.PI/180);
		tmpG2D.drawString(text, 0, 0); 	
		return tmpG2D.getFontMetrics();