Marcusw
Nuke Ace
Posts:59
 |
| 17 Jul 2007 4:48 PM |
|
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. |
|
|
|
|
jncraig
Nuke Master II
Posts:2034
|
| 17 Jul 2007 5:33 PM |
|
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. |
|
Joe Craig
DNN Creative Support
Subscribe to the website |
|
|
Marcusw
Nuke Ace
Posts:59
|
| 18 Jul 2007 2:11 AM |
|
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. |
|
|
|
|
leesykes
Posts:3004
|
| 18 Jul 2007 3:11 AM |
|
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]
|
|
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts |
|
|
leesykes
Posts:3004
|
|
Marcusw
Nuke Ace
Posts:59
|
| 18 Jul 2007 4:13 AM |
|
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
|
|
|
|
|
leesykes
Posts:3004
|
|
aggiedan97
Nuke Active Member
Posts:23
|
| 30 Jun 2008 9:52 PM |
|
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>
>
>
|
|
|
|
|
aggiedan97
Nuke Active Member
Posts:23
|
| 30 Jun 2008 10:12 PM |
|
Not sure what happened with the text editor above...
However, I applied the ... around the HTML text and it applied as expected. While I am most grateful, I would appreciate knowing how to apply this to a skin.
Thanks again for your input. |
|
|
|
|
jncraig
Nuke Master II
Posts:2034
|
| 30 Jun 2008 10:56 PM |
|
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. |
|
Joe Craig
DNN Creative Support
Subscribe to the website |
|
|
aggiedan97
Nuke Active Member
Posts:23
|
| 30 Jun 2008 11:00 PM |
|
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
"<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>
" |
|
|
|
|
aggiedan97
Nuke Active Member
Posts:23
|
| 30 Jun 2008 11:01 PM |
|
nevermind, I can't seem to paste html in this editor without it accepting it as HTML text....~ |
|
|
|
|
jncraig
Nuke Master II
Posts:2034
|
|
aggiedan97
Nuke Active Member
Posts:23
|
| 30 Jun 2008 11:06 PM |
|
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 > |
|
|
|
|
leesykes
Posts:3004
|
|
leesykes
Posts:3004
|
|
aggiedan97
Nuke Active Member
Posts:23
|
| 01 Jul 2008 6:26 AM |
|
Attached is the skin I am attempting to create the scrolling window within.
I was able to accomplish it by adding he ... within the HTML/text module.
In the attached skin I have attempted to add it to the content pane. |
 Attachment: 171263119971.zip
|
|
|
|
leesykes
Posts:3004
|
| 01 Jul 2008 7:02 AM |
|
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
|
|
Lee Sykes
Site Administrator
Subscribe to the website : DotNetNuke Video Tutorials : The Skinning Toolkit : DotNetNuke Podcasts |
|
|
aggiedan97
Nuke Active Member
Posts:23
|
| 01 Jul 2008 10:33 PM |
|
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. |
|
|
|
|