close ad
WARNING: Do Not Install the DREAMWEAVER CC 2017 or 2018 Update »
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Page shifts when Spry Panel opens & closes

Thread began 4/21/2010 12:37 pm by josh.blum402472 | Last modified 4/22/2010 3:44 pm by josh.blum402472 | 2941 views | 4 replies |

josh.blum402472

Page shifts when Spry Panel opens & closes

I'm having a problem with my page shifting to the left when I open the Spry Collapsible Panel links that I set up. I have a lot of content in the Panel Content divs with the overflow set to "auto". I understand that the text will shift left when the scroll bars are activated but I'm not sure why the page shifts when the panels are opening.

Any help would be greatly appreciated.

Here's the link to the page:
april10_test2/

Here's the SpryCollapsiblePanel.css:
@charset "UTF-8";

/* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
* default style, the CollapsiblePanel is responsible for drawing the borders
* around the widget.
*
* If you want to constrain the width of the CollapsiblePanel widget, set a width on
* the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
* up available space.
*
* The name of the class ("CollapsiblePanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* CollapsiblePanel container.
*/
.CollapsiblePanel {
margin: 0px;
padding: 0px;
}

/* This is the selector for the CollapsiblePanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open or close the panel.
*
* The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* CollapsiblePanel panel tab container.
*/
.CollapsiblePanelTab {
font: bold 0.7em sans-serif;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
}

/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
* you should never put any padding on the content area element if you plan to
* use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
* element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
*
* The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style a
* CollapsiblePanel content container.
*/
.CollapsiblePanelContent {
margin: 0px;
padding: 5px 30px 20px 20px;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
line-height: 18px;
overflow: auto;
background-color: #FFFFFF;
height: 250px;
text-align: center;
}

/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
* keyboard focus ring appears *inside* the tab instead of around the tab.
* This is an example of how to make the text within the anchor tag look
* like non-anchor (normal) text.
*/
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
}

/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "CollapsiblePanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the CollapsiblePanel.
*/
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #FFFFFF;
}

/* This is an example of how to change the appearance of the panel tab when the
* CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
* whenever the CollapsiblePanel is closed.
*/

.CollapsiblePanelClosed .CollapsiblePanelTab {
/* background-color: #EFEFEF */
}

/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
*/
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
background-color: #FFFFFF;
}

/* This is an example of how to change the appearance of all the panel tabs when the
* CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
* whenever the CollapsiblePanel gains or loses keyboard focus.
*/
.CollapsiblePanelFocused .CollapsiblePanelTab {
background-color: #FFFFFF;
}

Sign in to reply to this post

Jason ByrnesWebAssist

the page is shifting because when you open one of the tabbed panels, it causes the page length to grow and generates scrolbars.


see the following for a fix:
article.cfm?cid=528a0

Sign in to reply to this post

josh.blum402472

Thanks

It works great in Safari but not in FireFox. I'll keep playing with it. Thanks for the help.

Sign in to reply to this post

Jason ByrnesWebAssist

set the min height to more that 100%:
min-height: 150%;

Sign in to reply to this post

josh.blum402472

Yup

That did the trick. It still shifts the text left because of the scroll bar issue but the page doesn't shift anymore. Thanks again.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...