How to implement proper Horizontal Scrollable Custom EditField?

So we are trying to implement 3 text editfields for people to enter their user credentials in our blackberry app. However we are having trouble when the user's name for example ends up longer than the editfield box (the field must be inside a box and the box must remain stationary, the text must be horizontally scrollable.)

Here is my custom scrollable edit field class based on the scrollable edit field here:

import net.rim.device.api.ui.Manager;
import net.rim.device.api.ui.component.EditField;
import net.rim.device.api.ui.container.HorizontalFieldManager;

public class ScrollableEditField extends Manager {
private final static int        DEFAULT_TOP_PADDING     = 1;
private final static int        DEFAULT_BOTTOM_PADDING  = 1;
private final static int        DEFAULT_LEFT_PADDING    = 1;
private final static int        DEFAULT_RIGHT_PADDING   = 1; 

private int                     TOTAL_VERTICAL_PADDING  = DEFAULT_TOP_PADDING + DEFAULT_BOTTOM_PADDING;
private int                     TOTAL_HORIZONTAL_PADDDING = DEFAULT_LEFT_PADDING + DEFAULT_RIGHT_PADDING;

private int                     width  = -1;
private int                     height = -1;

private HorizontalFieldManager  hfm = new HorizontalFieldManager(HORIZONTAL_SCROLL);
private EditField               ef;

public ScrollableEditField(String label, String initialValue, int maxNumChars, long innerEditFieldStyle) {
    super(NO_HORIZONTAL_SCROLL);
    ef = new EditField(label, initialValue, maxNumChars, innerEditFieldStyle);
    hfm.add(ef);
    add(hfm);
}

protected void sublayout(int width, int height) {
    if (this.width != -1) {
        width = this.width;
    }

    if (this.height != -1) {
        height = this.height;
    } else {
        height = ef.getFont().getHeight();
    }

    layoutChild(hfm, width-TOTAL_HORIZONTAL_PADDDING, height-TOTAL_VERTICAL_PADDING);
    setPositionChild(hfm, DEFAULT_LEFT_PADDING, DEFAULT_TOP_PADDING);
    setExtent(width, height); // Maybe not..
}    

public EditField getEditField() {
    return ef;
}

public void setWidth(int width) {
    this.width = width;
}
public void setHeight(int height) {
    this.height = height;
}
protected void onFocus(int direction) {
    super.onFocus(direction);
    ef.setCursorPosition(0);
}

protected void onUnfocus() {
    hfm.setHorizontalScroll(0);
    super.onUnfocus();
}
};

And this is how I use this class in my code:

I put each of these fields into a HorizontalFieldManager and then place this hfm inside a grid cell (with a fixed size). Here are a few lines:

GridFieldManager gfm = new GridFieldManager(1, 2, 0);
gfm.setColumnProperty(0, GridFieldManager.FIXED_SIZE, Display.getWidth()* 1/5);
gfm.setColumnProperty(1, GridFieldManager.PREFERRED_SIZE_WITH_MAXIMUM,    Display.getWidth()* 4/5);

HorizontalFieldManager hfm1e = new HorizontalFieldManager(USE_ALL_WIDTH|USE_ALL_HEIGHT);

ScrollableEditField sef1 = new ScrollableEditField("", "", 32, EditField.FILTER_EMAIL);
sef1.setWidth((Display.getWidth()* 4/5)-5);
sef1.setHeight(getFont().getHeight());
sef1.setBorder(BorderFactory.createRoundedBorder(new XYEdges(1,1,1,1)));
hfm1e.add(sef1);
gfm2.add(hfm1e);

Those last lines are just taken here and there from a much bigger class, however they illustrate the way I am trying to add the custom edit field to the GUI.

Now for some reason, when I run this code the field is there and I can type in it, however its as if the field is one character wide and I cant see anything to the right of it, nor the field or the border. Can anyone help spot what I am doing wrong?

Solution

Try this code (I've removed some redundant code)

GridFieldManager gfm = new GridFieldManager(1, 2, 0);
gfm.setColumnProperty(0, GridFieldManager.FIXED_SIZE, Display.getWidth()* 1/5);
gfm.setColumnProperty(1, GridFieldManager.PREFERRED_SIZE_WITH_MAXIMUM, Display.getWidth()* 4/5);

ScrollableEditField sef1 = new ScrollableEditField("", "", 32, EditField.FILTER_EMAIL);
sef1.setBorder(BorderFactory.createRoundedBorder(new XYEdges(1,1,1,1)));
gfm2.add(sef1);

The size of sef1 is determined by its manager, gfm. Therefore, hfm1e, sef1.setWidth() and sef2.setWindth() are redundant.