Hi,

I have been trying to set wrap="off" for Text Area by calling the onRender() method of TextArea and setting wrap="off" on the dom element created by the TextArea component. This works perfectly fine in IE and I get to see Horizontal scroll bar in my TextArea and the text does not get wrapped.

But in Firefox browser the text inside the TextArea does not get wrapped for the first time when it gets rendered. My TextArea component is inside a Tab, so when i switch tabs, then the Text does not get wrapped and Horizontal scroll bar gets displayed.
I have also tried refreshing TextArea by using the setStateful(true) attribute provided by GXT.

Here is the code snippet,

Code: For displaying GXT widgets on UI


Code:
public void onModuleLoad() {

        com.extjs.gxt.ui.client.widget.button.Button displayOutputButton = new com.extjs.gxt.ui.client.widget.button.Button("Display Tabs");
        displayOutputButton.setId("displayOutputButtonId");
        displayOutputButton
                .addSelectionListener(new SelectionListener<ButtonEvent>() {

                    @Override
                    public void componentSelected(ButtonEvent ce) {
                        mainLayoutContainer.add(defaultOutputArea);
                        firstTabOutput = new CommandProcessorTextArea();
                        //firstTabOutput.setStyleName("fixedWidth_inputText");
                        firstTabOutput.setReadOnly(true);
                        firstTabOutput.setSize(723, 335); // perdh02
                        firstTabOutput.setBorders(true);
                        secondTabOutput = new CommandProcessorTextArea();
                        //secondTabOutput.setStyleName("fixedWidth_inputText");
                        secondTabOutput.setReadOnly(true);
                        secondTabOutput.setSize(723, 335);
                        updateOutputBox();
                    }
                });
        portlet.setHeading("Scroll Bar Prototype");
        portlet.setId("scrollbarprototypePortletId");
        portlet.setHeight(463);
        portlet.setWidth(747);
        portlet.addButton(displayOutputButton);
        mainLayoutContainer.setId("mainLayoutContainerId");
        portlet.add(mainLayoutContainer);
        RootPanel.get("nameFieldContainer").add(portlet);
        tabPanel.setId("tabpanelId");
    }

    public void updateOutputBox() {
        List<TabItem> tabItemsList = tabPanel.getItems();
        defaultOutputArea.setId("defaultOutputAreaId");
        mainLayoutContainer.remove(defaultOutputArea);
        if (tabItemsList.size() == 2) {
            tabPanel.remove(tabOne);
            tabPanel.remove(tabTwo);
        }
        
        tabOne = new TabItem("Tab One");

        tabTwo = new TabItem("Tab Two");

        tabOne.add(firstTabOutput);
        tabTwo.add(secondTabOutput);
        firstTabOutput.setStateful(true);
        tabPanel.add(tabOne);
        tabPanel.add(tabTwo);
        tabPanel.setSelection(tabOne);

        mainLayoutContainer.add(tabPanel, new RowData(1, 0, new Margins(4)));
        firstTabOutput.setStateful(true);
        mainLayoutContainer.layout();
        firstTabOutput
                .setValue("Thisisverylongtextfortestingthefixforhorizontalscrollbarinfirefoxbrowserwhichdoesn'tseemtoworkonlyinfirefoxbutworkswellwithIEdon'tknowthereasonforthisbehavior.\n" +
                        "Tab one output\n" +
                        "Test \n");
        firstTabOutput.setReadOnly(true);
        secondTabOutput.setValue("Test");
        secondTabOutput.setReadOnly(true);
        tabPanel.setStateful(true);
    }
This is the code snippet for setting the wrap="off" on the onRender method of TextArea

Code:

Code:
package com.ca.scrollBar.prototype.client;

import com.extjs.gxt.ui.client.widget.form.TextArea;
import com.google.gwt.user.client.Element;

public class CommandProcessorTextArea extends TextArea{
    
    protected void onRender(Element parent, int pos) {
        super.onRender(parent, pos);
        this.el().dom.setAttribute("wrap", "off");
 }
    
}
Thanks,
Dheeraj