GWT TextArea在TabLayoutPanel的ScrollPanel中 - 如何取得100％的高度？

這是一個模擬UI，展示了我的問題。這是通常的UIBinder樣板，加上三個小部件：TabLayoutPanel，ScrollPanel，TextArea。我希望TextArea佔用選項卡的所有可用空間，並且如果它不適合，我希望它具有滾動條。但是這段代碼產生了兩行高的TextArea。你如何解決這個問題？爲什麼忽略了身高？GWT TextArea在TabLayoutPanel的ScrollPanel中 - 如何取得100％的高度？

enter image description here

在ui.xml文件：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> 
    <ui:style>   
     .scrollPanel { 
      height: 100%; 
     } 
     .textArea { 
      height: 100%; 
     } 
     </ui:style> 
    <g:TabLayoutPanel barHeight="20" barUnit='PX'> 
    <g:tab> 
     <g:header>Text Area</g:header> 
     <g:ScrollPanel styleName='{style.scrollPanel}'> 
     <g:TextArea ui:field='textArea' styleName='{style.textArea}'></g:TextArea> 
     </g:ScrollPanel> 
    </g:tab> 
    </g:TabLayoutPanel> 
</ui:UiBinder>

和Java文件中：

package com....client; 

import com.google.gwt.core.client.GWT; 
import com.google.gwt.uibinder.client.UiBinder; 
import com.google.gwt.uibinder.client.UiField; 
import com.google.gwt.user.client.ui.ResizeComposite; 
import com.google.gwt.user.client.ui.TextArea; 
import com.google.gwt.user.client.ui.Widget; 

public class BugDemoLayout extends ResizeComposite { 

    private static BugDemoLayoutUiBinder uiBinder = GWT.create(BugDemoLayoutUiBinder.class); 

    interface BugDemoLayoutUiBinder extends UiBinder<Widget, BugDemoLayout> {} 

    @UiField TextArea textArea; 

    public BugDemoLayout() { 
     initWidget(uiBinder.createAndBindUi(this)); 
     StringBuilder junk = new StringBuilder(); 
     for (int i=1; i<300; i++) { 
      junk.append("Line " + i + "\n");    
     } 
     textArea.setText(junk.toString()); 
    } 
}

的模塊文件只是將用戶界面到根：

public void onModuleLoad() {  
    BugDemoLayout bd = new BugDemoLayout(); 
    RootLayoutPanel.get().add(bd);

來源

2012-01-14 Rob N

TabLayoutPanel和ScrollPanel都實現了RequireResize接口，並使用絕對定位自動調整到可用空間。
您爲ScrollPanel中的內容指定了相對高度（100％）。這不起作用，因爲父項中的大小未明確設置（有關更多詳細信息，請參閱here）。

所以，你可以：

在ScrollPanel像素設置一個明確的大小，然後的textarea的高度設置爲100％。
擴展TextArea和實現RequiresResize接口（實現在其中設置的TextArea

高度/寬度的在onResize（）方法的第二個方法是在吸塵器建議之一，因爲它也調整大小的TextArea時調整瀏覽器窗口它看起來類似的東西：

文本區：

public class ResizableTextArea extends TextArea implements RequiresResize { 

    public void onResize() { 

     int height = getParent().getOffsetHeight(); 
     int width = getParent().getOffsetWidth(); 
     setSize(width+"px",height+"px"); 
    } 
}

你必須把你的TabLayoutPanel放入RootLayoutPanel。這將確保有一個連貫的鏈接LayoutPanels或Widget實現RequiresResize/ProvidesResize接口一直到您的自定義TextArea。

來源

2012-01-14 16:53:54

我喜歡這一點，它幾乎可以工作。問題在於初始佈局。起初UI看起來像之前，但是當我調整窗口大小來觸發onResize（）時，那麼自定義TextArea會根據需要展開。如何在開始時獲得正確的佈局？我嘗試在將所有內容添加到RootLayoutPanel後手動調用onResize - 不起作用。顯然有一些延遲，因爲如果我把這個相同的電話放在延遲的計時器中，它會工作......但是這一切都變得很難看。 – 2012-01-14 17:58:01

正常情況下，「RootLayoutPanel」應負責在呈現/構造時實現「RequiresResize」接口的子部件上調用onResize（）。這實際上應該照顧最初的佈局。我很驚訝，它不適用於你的情況。你如何構建TabLayoutPanel？手動調用''onResize（）''將不起作用，因爲該小部件尚未連接到DOM。（更多細節見[這裏]（http://markmail.org/message/waanbhkstg7zpad2））。您可以嘗試在應該修復它的TabLayoutPanel上調用foreceLayout（）。 – 2012-01-14 18:26:42

設置我的測試應用程序的代碼很簡單，我會在第二個問題中加入。它創建這個小部件並將其添加到'RootLayoutPanel'。 – 2012-01-14 22:43:55

您在ScrollPanel中放置了一個TextArea，但ScrollPanel不是必需的，因爲TextArea已經具有內置的可滾動性。如果你拿出ScrollPanel，它應該可以正常工作（在我的測試中它可以正常工作）。

來源

2012-01-18 19:20:28

這不適合我。也許它取決於瀏覽器和操作系統。我在OS X 10.7上使用Chrome。 textarea不滾動，只有將光標放在textarea中並用箭頭鍵向下移動才能看到後面的行。它看起來像GWT佈局面板設置溢出：隱藏在textarea上。 – 2012-01-29 03:32:51

可能，但我的測試在Windows 7上的Chrome和Firefox上都可以使用，所以如果Mac上的Chrome在這方面的行爲有所不同，那將會很奇怪。也許你可以最小化你的代碼示例併發布它，這樣我們就可以看到問題出在哪裏？ – 2012-02-02 21:22:47

我在我的問題中使用了最小化的代碼示例，除了我在ui.xml文件中註釋了2行之外 - 的開始和結束標記。所以，正如你所建議的那樣，TextArea直接在選項卡中。沒有滾動。 – 2012-02-09 16:22:46

我要跳過這個問題的大小部分，但回答滾動部分（因爲這似乎從未解決？）。

我有同樣的問題，所以我置於ScrollPanel的標籤內，並且嵌套在一個HTMLPanel，尺寸爲100％該父ScrollPanel的寬度和高度。然後，我用panel.add(new HTML("my text"));填充它。

我還用我的實際長文本字符串替換"\n"與"<br />"。（這適用於我的需求）。現在

，這是不太一樣的東西爲TextArea，當然，但它確實讓你顯示長時間運行的滾動TabLayoutPanel內的文本。

來源

2017-02-14 00:09:48 BuvinJ

GWT TextArea在TabLayoutPanel的ScrollPanel中 - 如何取得100％的高度？

回答

相關問題