TextArea Horizontal Scrolling

[RFleming]

I hope that this is an appropriate question for this forum. So far I
have had some difficutly getting an answer to my problem. I have a
java application with a textarea. I would like the horizontal scroll
bar to work. I have managed to add the style overflow: scroll, which
has caused the scroll bars to stay on even when not needed, but for
some reason, text is wrapping in the textbox. If the line is too
long, it goes to the next line, but still performs the carriage return
linefeed at the end of the line. I have also tried to use the white-
space style property both nowrap, and pre, with still no luck. My
lines of text in the textarea are terminated with \r\n, which seems to
work okay. But if the line is longer than the textarea, it wraps to
the next line. Here is the JSP XML file: The textarea is named
txtRiderInfo. It is located almost at the end of this code block.

Thanks For Your Time

Ryan

<?xml version="1.0" encoding="UTF-8"?>
<!--
Document : Page1
Created on : Mar 27, 2008, 9:55:59 AM
Author : hitrf
-->
<jsp:root version="2.1" xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/
JSP/Page" xmlns:webuijsf="http://www.sun.com/webui/webuijsf">
<jsp:directive.page contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"/>
<f:view>
<webuijsfage binding="#{RaceReport.page1}" id="page1">
<webuijsf:html binding="#{RaceReport.html1}" id="html1">
<webuijsf:head binding="#{RaceReport.head1}"
id="head1">
<webuijsf:link binding="#{RaceReport.link1}"
id="link1" url="/resources/stylesheet.css"/>
</webuijsf:head>
<webuijsf:body binding="#{RaceReport.body1}"
id="body1" style="-rave-layout: grid">
<br/>
<webuijsf:form binding="#{RaceReport.form1}"
id="form1">
<webuijsf:label
binding="#{RaceReport.lblTitle}" id="lblTitle"
style="font-size: xx-large; height: 46px;
left: 0px; top: 24px; position: absolute; text-align: center; vertical-
align: middle; width: 958px" text="Reports"/>
<webuijsf:calendar
binding="#{RaceReport.dpDateTime}" id="dpDateTime"

onChange="webui.suntheme.common.timeoutSubmitForm(this.form,
'layoutPanel1:dpDateTime');"
style="left: 24px; top: 96px; position:
absolute"
valueChangeListenerExpression="#{RaceReport.dpDateTime_processValueChange}"/<webuijsfanelLayout
binding="#{RaceReport.comboLayout}" id="comboLayout"
panelLayout="flow" style="height: 22px; left: 216px; top: 96px;
position: absolute; width: 718px">
<webuijsf:dropDown
binding="#{RaceReport.cmbRaceEvents}" id="cmbRaceEvents"

items="#{RaceReport.cmbRaceEventsDefaultOptions.options}"

onChange="webui.suntheme.common.timeoutSubmitForm(this.form,
'cmbRaceEvents');" style="height: 24px; width: 144px"
valueChangeListenerExpression="#{RaceReport.cmbRaceEvents_processValueChange}"/<webuijsf:dropDown
binding="#{RaceReport.cmbRaceClass}" id="cmbRaceClass"
items="#{RaceReport.cmbRaceClassDefaultOptions.options}"

onChange="webui.suntheme.common.timeoutSubmitForm(this.form,
'cmbRaceClass');"
style="height: 24px; margin-left: 5mm;
position: relative"
valueChangeListenerExpression="#{RaceReport.cmbRaceClass_processValueChange}"/<webuijsf:dropDown
binding="#{RaceReport.cmbRaceReport}" id="cmbRaceReport"

items="#{RaceReport.cmbRaceReportDefaultOptions.options}"

onChange="webui.suntheme.common.timeoutSubmitForm(this.form,
'comboLayout:cmbRaceReport');"
style="height: 24px; margin-left: 5mm"
valueChangeListenerExpression="#{RaceReport.cmbRaceReport_processValueChange}"/</webuijsfanelLayout>
<h:inputTextarea
binding="#{RaceReport.txtRiderInfo}" id="txtRiderInfo" style="border-
width: 2px; border-style: solid; font-family: 'Courier
New','Courier',monospace; font-size: 12px; height: 672px; left: 24px;
top: 168px; position: absolute; width: 912px; overflow: scroll; white-
space: nowrap" />
</webuijsf:form>
</webuijsf:body>
</webuijsf:html>
</webuijsfage>
</f:view>
</jsp:root>

 

[SAM]

(e-mail address removed) a écrit :

I hope that this is an appropriate question for this forum. So far I
have had some difficutly getting an answer to my problem. I have a
java application with a textarea. I would like the horizontal scroll
bar to work. I have managed to add the style overflow: scroll, which
has caused the scroll bars to stay on even when not needed, but for
some reason, text is wrapping in the textbox.

normal feature for a textarea, no ?

try one or a combination of following css rules

textarea { overflow: auto; }
textarea { width: 90% }
textarea { white-space: pre; } /* no wrap */
textarea { overflow-x: scroll; } /* horizontal lift */

or (not more allowed) :
<textarea no-wrap></textarea>

 

[RFleming]

I attempted to use the advice below, but still I keep getting word
wrap in my inputtextarea. I am very new to XML and CSS, and I do not
totally understand the layout. Below is the single XML line I am
modifying:

<h:inputTextarea binding="#{RaceReport.txtRiderInfo}" wordWrap="true"
id="txtRiderInfo" style="border-width: 2px; border-style: solid; font-
family: 'Courier New','Courier',monospace; font-size: 12px; height:
75%; left: 24px; top: 144px; position: absolute; width: 96%; overflow-
x: scroll"/>

I have tried all the suggestionss below, but am not exactly sure how
<textarea no-wrap></textarea> should be used. For example if
<txtRiderInfo no-wrap></txtRiderInfo> is correct, than I also tried
that method with no luck either. For some reason the horizontal
scroll bar is greyed out, and the text wraps. Any additional advice
would be greatly appreciated!

Thanks

Ryan

 

[nate]

I see you have the code

wordWrap="true"

maybe try changing that to "false"