Re textArea growByLimit issues in layerLayout

Question

I set the textArea setGrowByContent true and setGrowLimit to 2, but there is always only one row. So i twisted the code and increase the height of textArea by twice if the size of textArea is greater than Button size. Below is the codes. My issue is at the end of the question:

      Button homeButtonn = new Button(btnIcon){

      @Override
      protected Dimension calcPreferredSize() {
      System.out.println("Button size: " + super.calcPreferredSize());
      return super.calcPreferredSize(); 
      }

      @Override
      public void setUIID(String id) {
          super.setUIID("homeButtonn"); 
          }
      };

      TextArea buttonTitle = new TextArea(title){

      @Override
           protected Dimension calcPreferredSize() {
           System.out.println("textArea title: " + getText());
           System.out.println("Textarea size: " +super.calcPreferredSize());
           System.out.println("");
           return super.calcPreferredSize(); 
           }
      };
      buttonTitle.setUIID("smallLabel");
      buttonTitle.getAllStyles().setAlignment(Label.LEFT);
      zeroPaddingMargin(buttonTitle);                   

      if (buttonTitle.getPreferredW() -10 > homeButtonn.getPreferredW()) {
         buttonTitle.setPreferredH(buttonTitle.getPreferredH() * 2);
      }
      buttonTitle.setPreferredW(homeButtonn.getPreferredW() - 10);
      buttonTitle.getAllStyles().setMargin(3, 3, 3, 3);
      buttonTitle.setEditable(false);
      buttonTitle.setGrowByContent(true);
      buttonTitle.setGrowLimit(2);
      buttonTitle.setScrollVisible(false);
      gridContainer.add(LayeredLayout.encloseIn(homeButtonn, FlowLayout.encloseRightBottom(buttonTitle)));  

OUTPUT:

Button size: width = 146 height = 140
textArea title: DJ and Sound
Textarea size: width = 194 height = 25

Here textArea size is greater than button size but if i set size of the textArea with exact size of button, it fits well. So how can textArea size be greater than button size and also all texts of textArea fits well inside button? The problem i got is that since textArea size is greater than button size, the height of textArea is multiplied by twice its own height but textArea fit well in single line and it leaves extra line/row below.

PS see the screenshot. Thankyou

without calcPreferred size or preferredSize:

If calcPreferredSize is removed, it takes whole screenwidth though it is in gridlayout with 3 column

Update: Recent Code without calcPreferredSize & textArea nested in a container too

GridLayout gl2 = new GridLayout(counter / 3 + 1, 3);
gl2.setAutoFit(true);
Container gridContainer = new Container(gl2);
gridContainer.setScrollableY(true);
f.addComponent(gridContainer);  

imageUrl = entry.get("img").toString();
title = entry.get("name").toString();
homePlaceholder = homePlaceholder.scaled(screenWidth / 3 - 20, screenWidth / 3 - 26);
encodedHomePlaceholder = EncodedImage.createFromImage(homePlaceholder, true);
Image btnIcon = URLImage.createToStorage(encodedHomePlaceholder, "home_" + title + imageUrl, allUrl.globalHomeImageUrl + imageUrl, URLImage.RESIZE_SCALE_TO_FILL);
homeButton.setIcon(btnIcon);
TextArea buttonTitle = new TextArea(title);
buttonTitle.getAllStyles().setAlignment(Label.LEFT);
buttonTitle.getAllStyles().setMargin(3, 3, 3, 3);
buttonTitle.setEditable(false);
buttonTitle.setGrowByContent(true);
buttonTitle.setGrowLimit(2);
buttonTitle.setScrollVisible(false);
Container btnTitleContainer = new Container();
btnTitleContainer.addComponent(buttonTitle);
gridContainer.add(LayeredLayout.encloseIn(homeButton, FlowLayout.encloseRightBottom(btnTitleContainer)));
f.revalidate();

Answer 1

Don't use calcPreferredSize, setPreferred* or any such API when you want something to be automatically calculated.

By definition you are disabling the automatic calculation when you are using these APIs that is why most of those API's are deprecated.

You need to only use layout logic.

Answer 2

What ever i did to make it right in layer layout and textarea, it didnt work so i tried other things and it work. I set the bg image of the container with border layout & keep the textarea in the south of borderlayout.

homePlaceholder = homePlaceholder.scaled(screenWidth / 3, screenWidth / 3);
encodedHomePlaceholder = EncodedImage.createFromImage(homePlaceholder, true);
Image btnIcon = URLImage.createToStorage(encodedHomePlaceholder, "home_" + title + imageUrl, allUrl.globalHomeImageUrl + imageUrl, URLImage.RESIZE_SCALE_TO_FILL);

Container innerContainer = new Container(new BorderLayout());
innerContainer.getAllStyles().setBgImage(btnIcon);
innerContainer.getAllStyles().setBackgroundType(Style.BACKGROUND_IMAGE_SCALED);
gridContainer.add(innerContainer);

TextArea buttonTitle = new TextArea(properCase(title));
buttonTitle.setUIID("smallLabel");
zeroPaddingMargin(buttonTitle);
innerContainer.add(BorderLayout.SOUTH,buttonTitle);

buttonTitle.setEditable(false);
buttonTitle.setGrowByContent(true);
buttonTitle.setGrowLimit(2);
buttonTitle.setScrollVisible(false);

gridContainer.revalidate();