TextArea Horizontal Scrolling [JavaScript]

Prev: help - onChange and Confirm
Next: node.offsetWidth vs clientWidth vs scrollWidth

From: RFleming on 10 Apr 2008 23:38

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"?>

<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>
<webuijsf:page 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}"/
>
<webuijsf:panelLayout
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}"/
>
</webuijsf:panelLayout>
<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>
</webuijsf:page>
</f:view>
</jsp:root>

From: SAM on 11 Apr 2008 04:26

RFleming(a)nationalsteel.com 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>

--
sm

From: RFleming on 14 Apr 2008 15:29

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

>
> 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>
>
> --
> sm

From: nate on 22 Apr 2008 22:23

I see you have the code

> wordWrap="true"

maybe try changing that to "false"

|
Pages: 1
Prev: help - onChange and Confirm
Next: node.offsetWidth vs clientWidth vs scrollWidth