List in a vertical scrolling box

**Egg Bramhill** · 13 May 2013, 11:58 PM

Here's one I made using JavaScript from searching the web.

**SteveP** · 14 May 2013, 07:26 AM

Morning James

Ok, a good night's sleep helps. I think we're almost there, but still experiencing a glitch. I've set up a fresh testing page, but can't seem to see ALL the text I pasted into the boz

There are two screen grabs attached

001 - Is what it looks like in preview mode. Note the great expanse of nothingness after the 26 September entry

002 - Is the view within WD9. Note the the nothingness mentioned in 001 begins at the point where the text hits the bottom of the page design

Appreciate any wisdom you can offer.

Thanks

Steve

Originally Posted by SteveP

Hi James

We're getting there!

I've now enlarged the box by stretching it, but because the list is sooooo long it reached the bottom of the designed page and the red arrow still shows. I can't expand it any more downwards as there's just no room.

Off for a paracetamol now

Think I'll give it a break tonight - thanks James for your help so far. I'll pick it up tomorrow

**jamesd** · 14 May 2013, 07:59 AM

Good morning Steve, right click on the page and select "Web page options" and uncheck "clip to page edges" that sould fix it

**SteveP** · 14 May 2013, 08:02 AM

Hi James

Thanks - meant to say that it's already unchecked based on your advice yesterday

Steve

**jamesd** · 15 May 2013, 08:18 PM

Hi Steve, sorry for the delay in getting back to you. Clip to page edges doesn't work for the bottom of the page, my bad

The only way I can get it to work is to use a placeholder.

Replace the code you had in the head section of your placeholder, page or website with this code

HTML Code:

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

Then create a rectangle the size you would like the scroll box to be and place it where it should be. While selected give it the name htmlclass=scroll1, then while still selected go to placeholder >> Replace with html (body) and paste this code

HTML Code:

<p>
Enter your text here
</p>

You can't style the text directly with xara, but if you have a text style already created you can add the class to the name eg: htmlclass=scroll1 TextStyle
Otherwise you have to syle the text with css.

**SteveP** · 16 May 2013, 05:08 AM

Morning James

Thanks again. It's working! Thank you Thank you Thank you - except that the text is just 'raw' black text - doesn't seem to reflect carriage returns, font etc - but I think you said it needed styling. Perhaps as a last request, just run through the 'add class to the name bit' again for me?

<Happy Bunny>

Cheers

Steve

**jamesd** · 17 May 2013, 10:55 PM

Originally Posted by SteveP

Morning James

Thanks again. It's working! Thank you Thank you Thank you - except that the text is just 'raw' black text - doesn't seem to reflect carriage returns, font etc - but I think you said it needed styling. Perhaps as a last request, just run through the 'add class to the name bit' again for me?

<Happy Bunny>

Cheers

Steve

Hi Steve, I have had very little spare time at the computer this week... sorry for the delay in getting back to you.

Here is the basics of styling the text in your scroll box.

Click image for larger version.

Name: styling-textbox.jpg
Views: 360
Size: 133.2 KB
ID: 96196

If you already have text on the page with the style you want to use in the scroll box, make sure you have saved that style. You can do this by clicking into the text with the text tool active then go to the dropdown and Create style. Just say you named it TextStyle(don't leave spaces in the name) add this to the name you already gave the placeholder earlier
eg: htmlclass=scroll1 TextStyle leaving a space between scroll1 and TextStyle.

Click image for larger version.

Name: text-style.png
Views: 94
Size: 63.2 KB
ID: 96195

If you want a different text style for your text box, change the code you placed in the <head> section
from

HTML Code:

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

to

HTML Code:

<style type="text/css">
.scroll1{
padding-left: 5px;
padding-right: 5px;
border-color: #6699CC;
border-width: 1px;
border-style: solid;
overflow: auto;
}
.scroll1 p{
font-family: arial;
color: #888888;
font-size: 18px;
}
</style>

**SteveP** · 18 May 2013, 04:57 AM

Thanks again James

We're away for a few days, so I'll look at it on Monday/Tuesday.

Appreciate all your support with this. Have a good weekend.

Steve