Stange tabs

I'm using gxt 3.0-rc.

Here is a window source I'm currently coding :

Code:

---

package com.kogitec.admin.settings;


import com.sencha.gxt.core.client.util.Margins;
import com.sencha.gxt.widget.core.client.ContentPanel;
import com.sencha.gxt.widget.core.client.TabPanel;
import com.sencha.gxt.widget.core.client.Window;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData;


public class SettingsWindow extends Window {


    public SettingsWindow() {
        setHeadingText("Settings");
        setPixelSize(600, 400);
       
        BorderLayoutContainer container = new BorderLayoutContainer();
       
        ContentPanel categoryTree = new ContentPanel();
       
        BorderLayoutData westData = new BorderLayoutData(200);
        westData.setCollapsible(true);
        westData.setMargins(new Margins(0));
        container.setWestWidget(categoryTree, westData);
               
        TabPanel tabPanel = new TabPanel();
        BorderLayoutData centerData = new BorderLayoutData();
        centerData.setMargins(new Margins(0));
       
        container.setCenterWidget(tabPanel, centerData);
       
        add(container);
       
        BorderLayoutContainer blContainer = new BorderLayoutContainer();
        blContainer.setCenterWidget(new TextButton("asdf"));
        tabPanel.add(blContainer, "Users");
        tabPanel.add(new BorderLayoutContainer(), "Other");


    }
}

---

Which appears like this :

Attachment 33753

Do someone know why there is a space before the first tab and why the blue bar beside the tabs are thicker than usual?

Emmanuel

I can't reproduce the issue with just your code sample. The closest I can get is with a bullet point to the left of each tab, as a result of not listing the reset.css file in the html page.

This is typically loaded via a line like this:

Code:

---

<link rel="stylesheet" type="text/css" href="modulename/reset.css" />

---

where `modulename` is replaced by the name of your module - this file lives in the same directory as your compiled files, and is copied into the file during compilation, and when starting up dev mode.

Edit: I do see this in chrome, but in FF the bullets are still visible. This confirms the issue, make sure the reset.css is present on your page and is loading correctly.

Yeah! I don't know what this css file is, but it worked! Thanks!

Emmanuel