CODEWITHSUNDEEP
javagwtheighttextfieldgxt
vitsja
vitsja

Reputation: 41

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

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.

Upvotes: 0

Views: 429

Answers (2)

vitsja
vitsja

Reputation: 41

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);

Upvotes: 1

geert3
geert3

Reputation: 7321

Try this:

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

If you want to do this often (i.e. 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 }

Upvotes: 0

Related Questions