GXT3 - TextField height. How to make a TextFields height bigger?

Question

GXT 3.0.1 GWT 2.5.1

I am trying to make a textfield the same height as the button next to it, but it does not work. I have tried the TextFields own set functions, the cointaner Layout functions and so on. Nothing seems to work like suspected.

VerticalLayoutContainer layout = new VerticalLayoutContainer();
HBoxLayoutContainer searchContainer = new HBoxLayoutContainer();
searchContainer.setPadding(new Padding(5));
searchContainer.setPack(BoxLayoutPack.CENTER);
BoxLayoutData boxLayout = new BoxLayoutData(new Margins(0, 5, 5, 0));
searchText = new TextField();
searchButton = new TextButton("Search");
searchContainer.add(searchText, boxLayout);
searchContainer.add(searchButton, boxLayout);
searchContainer.setBorders(true);
layout.add(searchContainer);

The snippet does not represent, what I have tried so far. The snippet shows in what context I am using the TextField and the Button (Containers). What am I missing? Or is it even possible to adjust the height over a fixed value like pixels? I am quite new to GXT.

Thank you very much.

Answer 1

I have found a CSS-free solution myself. But thanks to geert3 for his suggestion to look into the html itself to determine what component have to be adjusted to visualize the correct height. In the end the "input" field have to be modified. For this purpose I have written a small class that extends the Textfield itself and provides a method to adjust the input fields height. Almost every attribute of the TextFields input field can be modified this way. Here is the solution:

public class SearchTextField extends TextField {    

        public SearchTextField(){
            super();
        }

        public void setInputHeight(int heightValue) {
            getInputEl().getStyle().setHeight(20, Unit.PX);
        }

        public String getInputHeight() {
            return getInputEl().getStyle().getHeight();
        }
    }

Or you can have the same effect in one line of code. In the context, that was posted with the question, the solution would be:

searchText.getCell().getInputElement(searchText.getElement()).getStyle().setHeight(20, Unit.PX);

Answer 2

Try this:

searchText.getElement().getStyle().setLineHeight(20, Unit.PX);

If you want to do this often (ie for many components), you should consider using CSS to style the textfield. This involves:

1. add a stylename to the textfield

   searchText.addStyleName("mytextfield");

2. in your CSS, define the styles for mytextfield class:

   .mytextfield { line-height: 20px }