Swing components move as TextArea filled, in Scala

Question

I'm having a basic issue with alignment in a BoxPanel. When either of the TextAreas takes input, the other components in the panel, that aren't the width of the panel, shift along with the characters.

What is my mistake? Thanks!

val exitButton = new Button {
  text = "Exit"
  borderPainted = true
  enabled = true
}

val japaneseTranslation = new TextArea(5, 25)
val englishTranslation = new TextArea(5,25)

val translationPanel = new BoxPanel (Orientation.Vertical) {
  contents += new Label {
    text = "Translation"
    font = new Font("Ariel", java.awt.Font.PLAIN, 20)
    horizontalAlignment = Alignment.Center
  }

  contents += new Label {
    text = "Japanese"
    font = new Font("ariel", java.awt.Font.PLAIN, 10)
  }

  /*contents += new TextField ("Japanese") {                                                                                                                  
    editable = false                                                                                                                                          
  }*/
  contents += japaneseTranslation


  contents += new Label {
    text = "English"
    font = new Font("ariel", java.awt.Font.PLAIN, 10)
  }
  contents += englishTranslation

  contents += exitButton

}

Answer 1

Wrapping the TextArea components into a ScrollPane helps:

val exitButton = new Button {
  text = "Exit"
  borderPainted = true
  enabled = true
}

val japaneseTranslation = new TextArea(5, 25)
val englishTranslation = new TextArea(5,25)

val translationPanel = new BoxPanel (Orientation.Vertical) {
  contents += new Label {
    text = "Translation"
    font = new Font("Ariel", java.awt.Font.PLAIN, 20)
    horizontalAlignment = Alignment.Center
  }

  contents += new Label {
    text = "Japanese"
    font = new Font("ariel", java.awt.Font.PLAIN, 10)
  }

  /*contents += new TextField ("Japanese") {                                                                                                                  
    editable = false                                                                                                                                          
  }*/
  contents += new ScrollPane(japaneseTranslation)


  contents += new Label {
    text = "English"
    font = new Font("ariel", java.awt.Font.PLAIN, 10)
  }
  contents += new ScrollPane(englishTranslation)

  contents += exitButton

}

Another possibility is, as implied by Aqua in his comment, to set the alignmentX of your TextArea components:

val japaneseTranslation = new TextArea(5, 25) {
  peer.setAlignmentX(0)
}
val englishTranslation = new TextArea(5,25) {
  peer.setAlignmentX(0)
}

Please post a SSCCE next time.