-
1. Re: rich:tabPanel increases the size of the parent element
rich:panel is a DIV, rich:tabPanel is a TABLE. So, your code equals to:
<div> <div> <table width="100%"> ...... </table> </div> </div>
does this construction works fine in IE (in plain html)? -
2. Re: rich:tabPanel increases the size of the parent element
Perhaps I am missing something - I am trying to have a tabPanel as a child of a panel, like the original post. However, I want the parent panel to produce the scrollbar if the tabPanel extends over the parent panels boundaries. I am definitely a beginner in CSS, HTML, JSF and RichFaces so any help is appreciated. I'm using RichFaces 3.0.1 and I also tried it with the snapshot 3.0.2-20070606.
<rich:panel > <rich:tabPanel > a whole bunch of tabs that extend beyond the size of the screen <rich:tab> </rich:tab> </rich:tabPanel> </rich:panel>
The parent panel appears to recognize that the tab panel extends beyond its bounds because it creates the scroll bar - however the tabPanel doesn't look like its a child of the parent panel - because as I scroll the parent panels scrollbar - then tabPanel stays in one place. And only when I scroll the actual browser scroll bar - does it scroll across the tabPanel.
I've tried setting the panel style="width:100%; overflow:auto" for the parent panel, then the width="100%" for the tabPanel. And nothing seems to be working to make the tabPanel a child of the panel.
Thanks,
Bryan -
3. Re: rich:tabPanel increases the size of the parent element
When you define panel style="width:100%; overflow:auto", this style is applied on the whole panel (top div), but you need to define overflow:auto for content (inner div). rich:panel has a "bodyClass" attribute that exactly defines the styles for content div.
-
4. Re: rich:tabPanel increases the size of the parent element
Thank you for replying so quickly!
I added the bodyClass attribute to my panel and included it in my css. I don't know if it makes a difference, but this is all included in my template file (I'm using facelets). I am trying to get it to work here, before putting the tabPanel where I want it to go (inside a panel, that contains a panelGrid and the tabPanel will be in the 2nd column of the panelGrid - but for now, I'd be happy with getting this to work)<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:s="http://jboss.com/products/seam/taglib" xmlns:rich="http://richfaces.ajax4jsf.org/rich" xmlns:h="http://java.sun.com/jsf/html"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>My Test Page</title> <link href="stylesheet/theme.css" rel="stylesheet" type="text/css" /> </head> <body> <rich:panel bodyClass="tester"> <rich:tabPanel> <f:facet name="header">test tab panel</f:facet> <rich:tab label="more tabs"> ...etc tabs...
My css.tester { overflow:auto; }
And yes the scroll bar appears, but the tab panel is extending over the parent panel. It's almost as if the parent panel is recognizing that it needs to create the scroll bar, but the tab panel just won't be a part of the panel. Does that make any sense? -
5. Re: rich:tabPanel increases the size of the parent element
to make overflow:auto workable, you need to define the size (height and width) of the panel explicitly.
For example:.tester { overflow:auto; height:300px; width:500px; }
You can define only height if you want to have the vertical, but not horizontal scrollbar.
P.S. Try to avoid defining height (or/and width) of the whole panel and using bodyClass attribute simultaneously. Otherwise, different browsers interpret them different ways. -
6. Re: rich:tabPanel increases the size of the parent element
Sergey -
Thanks for helping with a seemingly simple problem, but its still not working for me. I tried setting the width:400px and overflow:auto both as the style of the outer panel and separately as the bodyClass. Neither worked.
When I set it for the outer panel, yes, my outer panel was 400px wide and when my tabPanel was placed in there - the scrollbar appeared and had scrollable room for the width of the tabPanel. However, when I scrolled the scroll bar - the tabPanel did not move. The only way I am able to scroll and see the rest of the tabPanel is if I scroll the actual browsers scroll bar. I even added a border around my outer panel - and the tabPanel is extending over the panel's border.
I've also tried for the body class to set the width:400px and overflow:auto, but when the tabPanel gets in there - it just extends over the bounds of the parent panel.
I also tried by taking my css file completely out of the loop and it is still occuring.
I guess the only reason this is an issue is because for my project, I have a border around the encompassing panel - so when my tabPanel extends over it - it doesn't look good. Maybe I'll just take the border out and alter the length of my headers - if there are no other solutions. But it still seems like there is something wrong with my implementation that would make the tabPanel extend over the parent panel. -
7. Re: rich:tabPanel increases the size of the parent element
The example of panel shown on "Look Customization" tab at http://livedemo.exadel.com/richfaces-demo/richfaces/panel.jsf shows scrollable content. Do you see it working there in your browser?
-
8. Re: rich:tabPanel increases the size of the parent element
When I use the example from the website, yes the scroll bar appears as displayed on the website. However, when I put a tab panel in the body of the panel, like the code below, the tab panel extends over the outer panel and goes all the way across the screen, but the outer panel is still 200px wide and shows a scroll bar as if the tab panel is within the panel. I?m using IE7, Update Versions; SP2. But when I display the code below in Firefox it works. So there must be something wrong with the difference in rendering for ie and firefox, but I can't figure it out. I tried it out on another developers machine and ie, and the same issue appeared.
<style> .body3 { height:100px; overflow:auto; } </style> <rich:panel style="width:200px;" bodyClass="body3"> <f:facet name="header"> Scrolling Text Panel </f:facet> <rich:tabPanel> <f:facet name="header">Another attempt</f:facet> <rich:tab label="1"> </rich:tab> (30 tabs) </rich:tabPanel> </rich:panel>
I tried a whole bunch of variations of using style, bodyClass, no bodyClass, having a tabPanel style, styleClass, set width, no set width, overflow:auto, etc - but nothing is giving me the desired result for ie - except when I view it in firefox. I realize there are more important issues out there, so I appreciate the time you've spent helping me. Thank you.