Hi,

Can anyone tell me how to add a vertical scroll bar in the content pane of my skin. I suspect I need to creat a new CSS class element to do it but can't figure out the correct syntax?

If I could see any examples that'd also be great.

Thanks,

Marcus.

The scroll bar would actually be attached to a module that lives in the content pane, or any other pane.

But, I think that most modules are set to expand vertically to the space that they need.

But, the real question is why do you want a scroll bar, and what do you want it to scroll? If you'll give us some idea of what you are trying to accomplish, that would help.

I need to be able to set my content pane to a fixed height (say 500px). Then when a Text/HTML module (for example) is placed inside it a vertical scroll bar appears inside the content pane (when the content is higher than 500px). Rather than the whole screen scrolling up and down.

I'm sure I've seen DNN sites that do this.

Cheers,

Marcus.

Hello,

I use this CSS for displaying code on the site:

.codebox
{
    font-family: 'courier new',courier,monospace;
    color: #000;
    background:#E0E0E0;
    border: 1px dotted #999;
    padding: 10px;
    margin: 10px;
    overflow: auto;
}

If the code is wider than the display pane a horizontal scroll bar is automatically displayed, if you try this:
.codebox
{
    font-family: 'courier new',courier,monospace;
    color: #000;
    background:#E0E0E0;
    border: 1px dotted #999;
    padding: 10px;
    margin: 10px;
    overflow: auto;
    height: 100px;
}

when the height exceeds 100px a vertical scroll bar will be displayed


In your text / html module use:

( [] used instead of < > so that is displays in the forum

[div class="codebox"]the test text etc.[/div]

PS. - If you want this to work for any modules that you insert into the pane, then you could apply this technique to either the skin or the containers.

Thanks Lee!

I've managed to get that working inside my Text/HTML module but can't seem to get the syntax right in my skin. Here it is (ascx)....

[tr]
[td rowspan="3" colspan="3" valign="top" bgcolor="#ffffff" id="contentPane" runat="server"][p][/p][/td]
[td colspan="2" valign="top" bgcolor="#ffffff" class="menubackground"][p][/p][/td]
[td][img src="[%= SkinPath %]spacer.gif" width="1" height="1" border="0" alt=""][/td]
[/tr]

It's tricky putting the div in here without chnaging the layout of the table.

Cheers,

Marcus

 

have you tried adding the class into the table cell?

[td rowspan="3" colspan="3" valign="top" bgcolor="#ffffff" class="codebox" id="contentPane" runat="server"][/td]

I am also in need of this exact functionality. However, I have attempted the above with no success.
[dnn ver. 4.7.01, IIS v.5.1]
10 paragraphs of lorem ipsum text

(css snippet)
.codebox
{
font-family: Verdana, Tahoma, Arial, Helvetica;
color: #000;
background:#E0E0E0;
border: 1px dotted #999;
padding: 10px;
margin: 10px;
overflow: auto;
height: 50px;
}

(html skin snippet)
<table cellpadding="3" cellspacing="0" width="60%" border="0" align="right">
   <tr>
        <td class="codebox" id="ContentPane" runat="server" valign="top" align="center">td>
   >
>

Not sure what happened with the text editor above...

However, I applied the ...

The < and > were interpreted as tag delimiters. When you post code, make sure that both of those characters are surrounded by white space.

If you've done the css correctly and your content page has the right class, the code should work.

Actually, the last two > > are not actually show that way..they are a product of attempting to edit my post in this forum.

this is the html snippet

<TD class=codebox id=ContentPane vAlign=top align=left runat="server">

"<table cellpadding="3" cellspacing="0" width="60%" border="0" align="right">

<tr><td class="codebox" id="ContentPane" runat="server" valign="top" align="left">td>

tr>

table>
"

Just put in the spaces ...

try this again..

< table cellpadding="3" cellspacing="0" width="60%" border="0" align="right" >
< tr >
< td class="codebox" id="ContentPane" runat="server" valign="top" align="left" >< /td >
< /tr >
< /table >

Hello,

So have you got this working in a content pane? table? or is that what you are attempting?

Thanks,

PS. you can attach files in the forum, so if you want to zip up your code, you can attach a zip file.

Attached is the skin I am attempting to create the scrolling window within.

I was able to accomplish it by adding he ...

ok, it works if we do this:

/*Code for scrolling HTML/text box*/
.codebox .Normal
{
    padding: 3px;
    margin: 3px;
    overflow: auto;
    height: 150px;
}

The problem is that DNN adds the Normal class to the text in each container, so we have specified that for any text that uses the Normal class inside the codebox class scroll the text

Well - I have good news and bad news...

Bad News - I updated ".codebox .Normal" and it didn't work.

Good News - based on something you stated about the .Normal evaluation made me think to move it after the actual .Normal evaluation in the css file.  As I understand it, this will cause it to be evaluated after the .Normal and therefore it is evaluated and not overriden.

Again, thanks a bunch and I appreciate everything.