Tabbed Panel content overflow problem

Hi everyone,
I'm a newbie to this, but have successfully used a few Spry
elements and am loving them.
My problem right now is that I'm trying to get a tabbed panel
to work where the panel contents have different amounts of text. It
works great in IE6 and looks fantastic, but in IE7 and Firefox 2
the content is visible although it overflows beneath the styled
content area.
You can see it here:
http://www.pranayogacollege.com/yoga-workshops.php
I imagine it's a simple thing that I've overlooked, but I'd
be very appreciative if someone could point me in the right
direction.
Thanks in advance,
Jade

"spiderjade" <[email protected]> wrote in
message
news:eqt5mt$d32$[email protected]..
> You can see it here:
>
http://www.pranayogacollege.com/yoga-workshops.php
>
> I imagine it's a simple thing that I've overlooked, but
I'd be very
> appreciative if someone could point me in the right
direction.
.TabbedPanelsContent {
padding: 4px;
/*ADD NEW*/
height: 276px;
overflow: auto;
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"

Similar Messages

Anchor tag inside Spry Tabbed Panel Content

I have successful been able to use code I found listed on
here to open a specific tab in a Spry Tabbed Panel form a link. Now
I am wondering if anyone has found out how to add an anchor tag
code this so that is goes to a specific location inside that Tabbed
Panel Content?

I was looking for an answer on how to open a tab from another tab and found it!
In return I'll give you a hint on how to open a tab from another tab using an anchor
for example,
if you were working on a file named "projects.php"
create an anchor in tab 2
<a name="anchor1" id="anchor1"></a>come next to me
in tab 1 create the link to the anchor in tab 2
<a href="projects.php#anchor1" onclick="TabbedPanels1.showPanel(1); return false;">open tab 2 and go to its anchor 1</a>
In your case you are overlooking the file name and jumping directly to the anchor name.....am I right??
cheers from Lima, Perú

Adding a scroll bar to tabbed panel content?

I have set a specific height to tabbed panels and I don't
want them to expand according to content. Instead I want to add a
scroll bar to the tabbed panels. How can i do this?

Sure it's possible.
Edit the TabbedPanelsContent class in the CSS file.
Add a specific height to it and then add an overflow:auto;
rule to it.
.TabbedPanelsContent {
padding: 4px;
overflow: auto;
height: 200px;
When styling Spry Widgets, for the most part, just think of
them as HTML. Add a height and a scrollbar just as you would to any
DIV.
Hope this helps,
Don

Spry Tabbed Panel 2.0 Problem

I have used the Spry Tabbed Panel 2.0 in DWCS5 and 6 html pages before without a problem. However, last week I tried to add a panel to an html page and while it works lovally in live view locally, I get errors that appear to be a path problem, but I cannot figure out the problem. You can view a plain html page with nothing but the Tabbed Panels 2.0 created with DWCS6 and see the errors at http://www.scotchplainsnj.gov/tabs.html
When the page loads it gives errors for each of the .js modules as it tries to load them. I have replicated this problem in CS5 and 6 in Windows 7. I also saw a comment in another forum where someone else was also experiencing the same problem and error sessages.
SpryPanelSet.js requires SpryWidjet.js
The prograns are in the default directories with no changes.
Any help would be appreciated.
Morris

1)
I can't really answer that, so what I would suggest is posting that answer in the correct forums: http://forums.adobe.com/community/labs/widgetbrowser you might get more luck there with finding an answer to your question
I do share the same feelings about this issue, I think allot of users would still love to be able to configure the widgets through DW. But the issue is that the widget browser is based on the Open Ajax Metadata specification which does not include such functionality in to its specification.
Aleast, there is no way for developers to "tell" Dreamwaver which markup they should add to create a new panel or instance. While it would nice to have i doubt its techically possible at this point. But those are just my 2 cents =
2)
The tabbed panel supports of allot different markup. But they can only ship one markup with the Widget Browser. As you will see in the SpryTabbedPanels documentation you can specify the tabs and content panels manually by adding the CSS selector for those in to the constructor of the widget: http://labs.adobe.com/technologies/spry/ui/samples/tabbedpanels2/SpryTabbedPanels2_sample1 .html
3)
There is no way to specify "default" settings for all widgets. As the developer of the widget decides the markup that ships with the widget. As for DW, you can specify the default document type through the preferences panel > new document > Default Document Type ?
While the responses of on these user to user forums by the Adobe product team members might seem minimal this does not mean they do not monitor the discussions that occure here. So it's always wise to speak you mind and let the community and product team know how you feel.
~ Arnout

Dividing Spry Tabbed Panels content area into columns?

Hi there.
I am building a website and I want to divide the content area of a Spry Tabbed Panel into 3 columns for text.
How can I do this?
I thought about making divs inside the Panel but it would be too messy.
Please let me know if there is a simple way to do this.
Thanks in advance.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<style>
* {box-sizing: border-box;}
body {width: 960px; margin: auto;}
.TabbedPanelsContentVisible {overflow: auto;}
.col33 {width: 33.3333%; float: left; padding: 15px;}
</style>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">
        <div class="col33">
          <h3>Column 1</h3>
        <p>Content 1</p>
        <p>Dicta sunt explicabo. Nisi ut aliquid ex ea commodi consequatur? Neque porro quisquam est, aut odit aut fugit, ut aut reiciendis voluptatibus maiores alias. Iste natus error sit voluptatem dicta sunt explicabo. Sed quia consequuntur magni dolores eos itaque earum rerum hic tenetur a sapiente delectus, cum soluta nobis est eligendi optio. Omnis voluptas assumenda est, nemo enim ipsam voluptatem neque porro quisquam est.</p>
        <p>Eaque ipsa quae ab illo inventore veritatis totam rem aperiam, qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, aut odit aut fugit, ut enim ad minima veniam. Id est laborum et dolorum fuga. Atque corrupti quos dolores et quas molestias qui ratione voluptatem sequi nesciunt. Temporibus autem quibusdam saepe eveniet ut et voluptates repudiandae sint sed quia non numquam eius modi.</p>
      </div>
        <div class="col33">
          <h3>Column 2</h3>
        <p>Content 1</p>
        <p>It is the star to every wand'ring bark, which alters when it alteration finds, love alters not with his brief hours and weeks. Or bends with the remover to remove. That looks on tempests and is never shaken; admit impediments; love is not love let me not to the marriage of true minds.</p>
      </div>
        <div class="col33">
          <h3>Column 3</h3>
        <p>Content 1</p>
        <p>The three cs - customers, competition and change - have created a new world for business while those at the coal face don't have sufficient view of the overall goals. In order to build a shared view of what can be improved, building a dynamic relationship between the main players. Highly motivated participants contributing to a valued-added outcome.</p>
        <p>Whether the organization's core competences are fully in line, given market realities the components and priorities for the change program an important ingredient of business process reengineering. Taking full cognizance of organizational learning parameters and principles, organizations capable of double-loop learning, working through a top-down, bottom-up approach. In order to build a shared view of what can be improved, maximization of shareholder wealth through separation of ownership from management measure the process, not the people. Presentation of the process flow should culminate in idea generation, taking full cognizance of organizational learning parameters and principles, the components and priorities for the change program. An investment program where cash flows exactly match shareholders' preferred time patterns of consumption from binary cause and effect to complex patterns, working through a top-down, bottom-up approach.</p>
      </div>
    </div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Anchor Tag In Tabbed Panel Content

I used this code to jump to and open the tab. I would like to
add an anchor tag name to it so that it jumps to a specific section
I have named in the content panel.
<a href="#" onclick="TabbedPanels1.showPanel(2); return
false;">
This solution does not work:
<a href="#anchorname" onclick="TabbedPanels1.showPanel(2);
return false;">
Has anyone found a work around for this?

This is such a great solution--thanks so much for sharing. I'm having a problem with the name of my collapsible panels (which operate similarly to Tabbed Panels, as far as I understand). Basically I am trying to use anchor tags and my goal is to create a hyperlink on page 1 that points to content within a spry widget on page 2 of my webpage. I obviously want the spry widget on page 2 to open up on click and the user to be taken to where my anchor tag is located. In this thread (http://forums.adobe.com/message/209107#209107), Mr. Celic seems to indicate using something like this:
<a href="#anchorname" onclick="TabbedPanels1.showPanel(2);">
My exact code is like this: <a href="pagetwo.html#myanchortag" onclick="CollapsiblePanel1.open();">content here</a>
The good news is that this works, but my problem is that page 1 of my website also has a CollapsiblePanel1 so when I click on the link above, CollapsiblePanel1 on page 1 opens, not the CollapsiblePanel1 on page 2 of my site. I went into page 2 and clicked on "CollapsiblePanel1" and in the "Properties" panel renamed it to "CollapsiblePanel11" then changed my code to
<a href="pagetwo.html#myanchortag" onclick="CollapsiblePanel11.open();">content here</a>
but that didn't do a thing! I'm super stuck and don't know how else to rename the collapsible panels or how to get it to work.
One thing I can't figure out from the original solution (<a href="#" onclick="TabbedPanels1.showPanel(2);">) is what is "showPanel(2)"? Where did she get this from/where can I find the equivalent for my collapsible panel spry? This could be where I'm going wrong.
Any thoughts would be greatly appreciated.
Thanks so much! Catherine

Placing an image in a tabbed panel content area, it shows up on all three panels

This is crazy. It should be so simple. But sometimes this happens to me. Like today.
I have many pages that use a simple tabbed panel feature with three tabs.
Each content area has a text frame and an image frame.
Sometimes when I try to place an image into the content area of the first tab, the image shows up on all three content areas. I have tried and tried placing the image, making very sure I am in the "content area" on not just on the page. But nevertheless, the image seems to be "stuck" on the page, in front of the accordian feature, and therefore showing on all three tabs.
How am I not targeting the placement of those images correctly? There just aren't that many options for me to screw up, it's a simple tabbed panel, that's all!
Help please.
Barbara

Are you using the latest version of Muse/Air?
The borders of the Content Area of a tab gets highlighted as soon as you drag over an element over it so it is very unlikely that something like this could happen. However, I believe it could be due to messed up Layers configuration as the only way I could reproduce this problem is through moving the image into a layer above a layer that contains the Tabbed panel or in case of just one layer, you might have the image at the very top.
Thanks,
Vinayak

Make the height of a tabbed panel content container adjust to the individual tab's content.

I am designing a site and on one page I am using two tabs to seperate two different kinds of content. One tab has more content and as such is longer on the page. But I noticed that MUSE uses which ever tab is the longest as the basis for how long the page is. This is fine while on that tab, but on the other tab it makes the page much longer (bunch of dead space) then it needs to be. Is there a way of getting around this or is this a limitation of muse?
Take a look at the page here and you will see what I mean. Click on cuff cases and scroll down and you will see what I mean.
http://pgl0.businesscatalyst.com/accessories---prince-gun-leather.html

Hi Lukewind,
This has come up in the forum archive. There is not currently a way to create a tabbed panel with adjustable/variable height content containers. This is not actually a bug in Muse, but it is a feature request. Please create an Idea topic for this feature in the Ideas for Features in Adobe Muse forum (http://forums.adobe.com/community/muse/ideas).
Here is the content from the archive request:
Have the depth of tabbed panels adjust to the size of the content.
The boxes in tabbed panels should be adjustable to the content rather than have all the tabs open in the same size as the biggest text box.

Spry Tabbed Panel Content editable region not functioning

I have a web page I created in dreamweaver CS5 with a tabbed panel. When my client opens the page to edit in contibute, the content and tabs do not function properly. Basically, the tabs do not function and the content for all of the tabbed regions is listed down the page on the first tab window. The page works fine when I open in Contibute on my computer, but only if it is through the Contibute Program. If I try to edit through firefox, I get the same issue as my client.
http://menwieldingfire.com.previewdns.com/bbq/bbq-menu.html
also, I get a space between the header image and the horizontal menu that goes white. I end up having to re-upload the page from dreamweaver. Why would the follow code get added to the page when a draft is created in Contribute, when this page is based on a template with editable regions?
< p style="margin-top: 0; margin-bottom: 0;"> </p >
Any ideas?

Check http://blogs.adobe.com/contribute/2010/06/paragraph_spacing_options_in_a.html and also http://blogs.adobe.com/contribute/2010/06/spry_widget_rendering.html it should be helpful to resolve the issue.

Skinned Panel Content Area Problem

I have instances of the Panel component that was skinned
using the Flex Skin Component Kit for Flash. The problem is that
the content areas of these panels occupy the entire panel area. An
unskinned panel has a content area that is within the panel's edges
and header. For my skinned panels, the content area extends to all
four edges of the panel (top, bottom, left, right). Any components
placed inside the panel goes beyond the usual white content area
and overlaps the header. How can I fix this content area size
problem? Please help. Thanks.

Can you use content area coordinates, or some manipulation of
the global, local, and content coordinates?

Spry Tabbed panels content loading

Hello,
I have created a tabbed interface, it looks good, however the
content in some tabs it is a little heavy on some internet
connections.
Is there a way to load the content of each tab separately?
What i wanted to do is for each tab content to load only if
the user clicks on the tab, this way the start page will load much
faster. With the current settings all the content on all tabs loads
at the same time. Did not find anything on sprytabbedpanels.css
that could do this.
Can anyone help me?
Thanks in advance.
Joao.

On Thu, 13 Sep 2007 00:57:12 +0000 (UTC), "manzas"
<[email protected]> wrote:
>Hello,
> I have created a tabbed interface, it looks good,
however the content in some
>tabs it is a little heavy on some internet connections.
> Is there a way to load the content of each tab
separately?
> What i wanted to do is for each tab content to load only
if the user clicks
>on the tab, this way the start page will load much
faster. With the current
>settings all the content on all tabs loads at the same
time. Did not find
>anything on sprytabbedpanels.css that could do this.
> Can anyone help me?
> Thanks in advance.
> Joao.
>
>
May we see it?

Spry Tabbed Panels content open verticaly on web site opening?

Hello,
As long as the client does'nt authorised javascript my opening web site page does'nt make sense, we see all the content of the tabs openned vertically.
Is there a way to have an acceptable opening page , maybe without the the tabs working for the one who dont accept javascript?
Thank You in advance

picotine7 wrote:
Hi,
Thank's for the hint.
Unfortunatly when I use the noscript tag at the beginning and at he end of my div, I loose my tabs completely.
Yes and so it should when one uses a JS-enabled browser; but if one turns JS off then you will see the tabs.
A bit of imagination is required to juggle between what you want the different browsers to see. Anything within the NOSCRIPT tags will only be seen by non-JS-browsers.
If you want to remove a particular piece of code from JS-enabled-browsers you could use
<div id="dynamiccontent">
<script type="text/javascript">
    // If JS is enabled, we want to prevent the table from flashing
    // when the page is first loaded.
    Spry.$("dynamiccontent").style.display = "none";
</script>

</div>
I hope this helps.
Ben

Making tab panel content auto resize

I'm using a SlidingTabPanel which has dynamic content. How can I get the panels to dynamically resize according to the amount of content in each panel?

No,
This is one the limitations of the sliding panels, it needs a wrapper div, with a minimum height in order to make the divs inside the wrapper slide. If you want such functionality on your site, you might want to create a custom effect for that using the SpryEffects library.
http://labs.adobe.com/technologies/spry/articles/effects_coding/index.html

Tabbed Panel table content flowing over and past container content.

How can I "contain" the tabbed panel content, which happens to be a table, inside the main content area and "push" the rest of the container (just the footer) down the web page. It's like the tabbed menu table section "floats" above, over and past the container section which then pushes the footer information over to the side of the container. This is my first time to use the tabbed panel and I thought it was goin to be so easy....obviously I'm doing something wrong. Thanks in advance for your advice!

Normally, tabbed panel content (the panel itself) will expand and contract to accommodate your content. If you have set a fixed height on the panel group, or constrained the height of the panel in any way, it will do as you ask, and not expand or contract any more.
If you want to accommodate contents that are variable in length, remove any height restrictions. If you still need to restrain the height, leave it in and add overflow: auto; to bring up a scroll bar when the content is too long and you don't want to pop out of the box.
If you add the height and the overflow attributes to the .TabbedPanelsContentGroup selector, your tabs will remain stationary and your panel contents will scroll.
Beth

Tabbed Panels: Two content areas?

Hi, I want to set up my Tabbed Panels so that when a certain tab is clicked, the content displayss in one content area/div and an image shows in another content area/div. Is that possible? If it is, will it change the CSS? On most pages, I want to use the same CSS style for tabbed panels, but only one content area.
Thanks very much,
Mike

You could do 2 things.
1) include the "area" inside the tabbed panels content, and use position:absolute; to position it everywhere that you want on your page
2) create onclick function on each tabbedpanel tab that will display the content for you.

Tabbed Panel content overflow problem

Similar Messages

Maybe you are looking for