Hi Josh, Here's my try. I did't in Tour De Jewel removing the code in one of the sections and adding the following code and result is in this animated gif: https://imgur.com/a/jL56lx5
Let me know if this can be a solution for your problem Thanks <c:ExampleAndSourceCodeTabbedSectionContent xmlns:fx=" http://ns.adobe.com/mxml/2009"; xmlns:j="library://ns.apache.org/royale/jewel" xmlns:html="library://ns.apache.org/royale/html" xmlns:js="library://ns.apache.org/royale/basic" xmlns:c="components.*" sourceCodeUrl="HeadingsAndText.mxml"> <fx:Script> <![CDATA[ [Bindable] private var myStackTrace:String = "expected: <2> to be equal to <1> Error\n" + "at new org.apache.royale.test.AssertionError\n" + "(file:///C:/Users/josht/Development/Work/PrintUI/RoyaleUnitSandbox/bin/js-debug/org/apache/royale/test/AssertionError.js:32:34) \n" + " at Function.org.apache.royale.test.Assert.failWithUserMessage\n"+ "(file:///C:/Users/josht/Development/Work/PrintUI/RoyaleUnitSandbox/bin/js-debug/org/apache/royale/test/Assert.js:275:9) \n"; ]]> </fx:Script> <j:beads> <js:ContainerDataBinding/> </j:beads> <j:Card width="100%"> <j:beads> <j:ScrollingViewport/> </j:beads> <j:Form> <j:FormItem label="Stack Trace"> <html:Pre text="{myStackTrace}"/> </j:FormItem> </j:Form> </j:Card> </c:ExampleAndSourceCodeTabbedSectionContent> El mar., 29 oct. 2019 a las 19:38, Josh Tynjala (<[email protected]>) escribió: > It's not ideal, but I was able to get percentWidth to work by adding the > <html:Pre> directly to the form, instead of wrapping it in a form item: > > <j:Form> > <j:FormItem label="Stack Trace"/> > <j:Container percentWidth="100"> > <j:beads> > <j:ScrollingViewport/> > <j:VerticalLayout/> > </j:beads> > <html:Pre text="{myStackTrace}"/> > </j:Container> > </j:Form> > > -- > Josh Tynjala > Bowler Hat LLC <https://bowlerhat.dev> > > > On Tue, Oct 29, 2019 at 11:08 AM Josh Tynjala <[email protected]> > wrote: > > > Let's say that I have a <j:Form> like this: > > > > <j:Form> > > <j:FormItem label="Stack Trace"> > > <html:Pre text="{myStackTrace}"/> > > </j:FormItem> > > </j:Form> > > > > The variable myStackTrace is a string that contains the stack trace from > > an error, and I would like it to scroll horizontally if any of the lines > > are too long to appear on screen. > > > > Example stack trace with long lines: > > > > expected: <2> to be equal to <1> Error > > at new org.apache.royale.test.AssertionError > > > (file:///C:/Users/josht/Development/Work/PrintUI/RoyaleUnitSandbox/bin/js-debug/org/apache/royale/test/AssertionError.js:32:34) > > at Function.org.apache.royale.test.Assert.failWithUserMessage > > > (file:///C:/Users/josht/Development/Work/PrintUI/RoyaleUnitSandbox/bin/js-debug/org/apache/royale/test/Assert.js:275:9) > > at Function.org.apache.royale.test.Assert.failNotEquals > > > (file:///C:/Users/josht/Development/Work/PrintUI/RoyaleUnitSandbox/bin/js-debug/org/apache/royale/test/Assert.js:201:35) > > at Function.org.apache.royale.test.Assert.assertEquals > > > (file:///C:/Users/josht/Development/Work/PrintUI/RoyaleUnitSandbox/bin/js-debug/org/apache/royale/test/Assert.js:67:33) > > at tests.SuiteTestsA.myTestB > > > (file:///C:/Users/josht/Development/Work/PrintUI/RoyaleUnitSandbox/bin/js-debug/tests/SuiteTestsA.js:41:33) > > at org.apache.royale.test.runners.MetadataRunner.runTestMethods > > > (file:///C:/Users/josht/Development/Work/PrintUI/RoyaleUnitSandbox/bin/js-debug/org/apache/royale/test/runners/MetadataRunner.js:123:22) > > at org.apache.royale.test.runners.MetadataRunner.run > > > (file:///C:/Users/josht/Development/Work/PrintUI/RoyaleUnitSandbox/bin/js-debug/org/apache/royale/test/runners/MetadataRunner.js:82:10) > > at > > org.apache.royale.test.runners.SuiteRunner.org > .apache.royale.test.runners.ParentRunner.createNextRunner > > > (file:///C:/Users/josht/Development/Work/PrintUI/RoyaleUnitSandbox/bin/js-debug/org/apache/royale/test/runners/ParentRunner.js:168:25) > > > > As best I can tell, I need to use a <j:Container> with > > <j:ScrollingViewport> to create a scrollable region. If I set the width > of > > the <j:Container> to a pixel value, it will scroll horizontally: > > > > <j:Container width="200"> > > <j:beads> > > <j:ScrollingViewport/> > > <j:VerticalLayout/> > > </j:beads> > > <html:Pre text="{myStackTrace}"/> > > </j:Container> > > > > However, I would like it to have a fluid layout that takes up as much > > horizontal space as possible. percentWidth="100" doesn't seem to work. I > > suspect that there are some specific flexbox styles that are necessary, > but > > I can't seem to figure out which ones. > > > > -- > > Josh Tynjala > > Bowler Hat LLC <https://bowlerhat.dev> > > > -- Carlos Rovira http://about.me/carlosrovira
