List in a vertical scrolling box

**SteveP** · 12 May 2013, 04:13 PM

Hi Guys.

Anyone know if there's a widget or equivalent in the paid-for version of WD9 Premium that allows me to quickly create a vertical scrolling box? - see attached - I couldn't see one there, so am I right in that I'd need to create it from scratch?

Cheers

Steve

**Cloud** · 12 May 2013, 04:45 PM

You can try the following:

First create your text box as normal making the box the width you want and to accommodate the text in length. Then select it with the selector tool, using the yellow tag icon give it a name eg: scroll1 also give it the name HTMLBlockText.

Add the following code into the <head> section under the 'placeholder' tab in web properties.

<style type="text/css">
#scroll1 {
height: 100px;
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
overflow: auto;
}
</style>

Change the colours/sizes as you need

**zaphodeist** · 12 May 2013, 04:48 PM

Don't think there is, but this works

Click image for larger version.

Name: scrollable_text_box.jpg
Views: 141
Size: 48.1 KB
ID: 96080

More modern versions you add the code in the placeholder "body" option

FROM :- http://xara-users.info/demos/scrollable-text-panel/

**SteveP** · 12 May 2013, 04:55 PM

Thanks guys! Appreciate your help!

Steve

**Acorn** · 12 May 2013, 05:01 PM

Steve, you can make your own with CSS3, avoiding IFRAMES and it approximates what you build onto your Xara page.

Make a note of the width of the current text is (say it is 400px) We are going to pad this out with 20px either side --> 440px.
You also need to pick a height.

Add the following to the Page HTML code (head) and experiment:

Code:

<style>
  .moreWords {
  height: 250px;
  width: 440px;
  overflow: auto;
  border-radius: 20px;
  border: solid 2px red;
  background: orange;
  color: blue;
  padding: 20px;
 }
</style>

You must add a Class Name to your text block; I chose htmlclass=moreWords in Utilities > Names...

Acorn

**Cloud** · 12 May 2013, 05:07 PM

IS that not what I suggested?

**jamesd** · 12 May 2013, 06:35 PM

@ Skech, Acorns solution uses the new undocumented feature in v9 to add classes to an object

htmlclass=myclassname

@SteveP, IE8 and below doesn't support round corners, so it might be better to place a round edge rectangle behind your text box so that it looks as intended on all browsers.
I had made a tutorial on scrolling text box a couple of years ago if you need more info http://www.talkgraphics.com/showthre...xt-box-in-Xara

**Cloud** · 12 May 2013, 07:09 PM

That would be why then. Thank you James

**Acorn** · 12 May 2013, 07:09 PM

Originally Posted by skech

IS that not what I suggested?

Slightly different. It keeps the SPANs intact, something Xara are keen to suggest to retain a true WYSIWYG:

5. "HTMLBlockText" - if this name is applied to the text object, the text is exported without placing every line in a separate span element. This is less WYSIWYG than the default export but it may be more suitable for further editing of the exported HTML in the external editors and web authoring tools.

It avoids more than one item having the same ID if you are applying the same solution to multiple test blocks on the same page, which meets the W3C standard. If there was a jQuery function working on the ID, it only would apply it to the first one it found.

Our solutions crossed in the aether and I'm happy that we thinking along the same lines.

Acorn

**Cloud** · 12 May 2013, 07:23 PM

Thank you.

Thread: List in a vertical scrolling box

Thread Tools

Display

List in a vertical scrolling box

Re: List in a vertical scrolling box

Re: List in a vertical scrolling box

Re: List in a vertical scrolling box

Re: List in a vertical scrolling box

Re: List in a vertical scrolling box

Re: List in a vertical scrolling box

Re: List in a vertical scrolling box

Re: List in a vertical scrolling box

Re: List in a vertical scrolling box

Bookmarks

Bookmarks

Posting Permissions