modalpanel and scrollbars

[tomzi]

Hi,

I am currently using a modalpanel which contains a rich:tree. I'd like to have the modalpanel display html scrollbars if the rich:tree within extends the modalpanel. Is there a 'proper' way to do that?

It seems that if I use style="overflow:scroll" (or auto) as an attribute in modalpanel, that this would will be overwritten. Also setting overflow for the css '.rich-mpnl-body' does not work since the div element using this class overwrites this value in the style attribute (BTW this css attribute seems to be wrong on the homepage (.rich-mpnl-pnl-body does not exist in the html source code).

*ref: http://labs.jboss.com/file-access/default/members/jbossrichfaces/freezone/docs/devguide/en/html_single/index.html#modalPanel

[ilya_shaikovsky]

You may put the div element as a child to modal panel and include all you content to this div. After set the scrolls for this element.

[tomzi]

I'm currently trying that - but I have difficulties making the scrollbars fit within the modalpanel, since style="height:100%" together with 'overflow:auto' makes the scrollbars larger than the modalpanel.

[tomzi]

For those who are interested. I found a way to add a scrollbar to the modalpanel. The main problem is that if I used the .rich-mpnl-body class to overwride with overflow:auto!important it always needed the height attribute as well. But since % are ugly to use I searched a little bit through the html source-code and found the .dr-mpnl-pnl class which adds a scrollbar nicely fitted in the modal-panel.

<style type="text/css">
 .dr-mpnl-pnl {overflow:auto!important}
 .rich-mpnl-body { height: 92%; width:99%; padding:0px; }
 .rich-mpnl-body .content { padding: 10px; }
</style>

<a href="javascript:Richfaces.showModalPanel('webacform3:panel3')">
<h:outputText id="currentlySelectedProduct"
 value="#{chooseActivation_backing.productTypes.selectedProduct
 == null ? 'Produkt auswählen' :
 chooseActivation_backing.productTypes.selectedProduct.name}"/></a>
<rich:modalPanel id="panel3"
 resizeable="false" moveable="false" height="300" width="400">
 <f:facet name="header">
 <h:outputText value="Produkt auswählen"></h:outputText>
 </f:facet>
 <f:facet name="controls">
 <a href="javascript:Richfaces.hideModalPanel('webacform3:panel3')">X</a>
 </f:facet>
 <div class="content" >Mögliche Produkte: <br />
 <rich:tree id="tree" switchType="client"
 value="#{chooseActivation_backing.productTypes.currentProducts2}"
 var="data" ajaxSubmitSelection="true"
 reRender="currentlySelectedProduct"
 preserveModel="none"
 immediate="false"
 nodeSelectListener="#{chooseActivation_backing.productTypes.onTreeSelect}">
 </rich:tree></div>
</rich:modalPanel>

[andi404]

It seems that this solution doesn't work if <rich:modalPanel autosize="true">...

[ilya_shaikovsky]

if panel autosized - it's expanded to the content. Where do you want scrolls in this case?

[andi404]

Right, the modal panel will be expanded according to the size of its content. However, if your browser window is too small, no scrollbars will be attached to the modal panel and you can only see a small part of the panel.

[ilya_shaikovsky]

modal panel in this case expanded to the size of content. And not depends on browser window size.

[andi404]

Yes, you said that before... however, that doesn't solve the problem.

For instance: Suppose that your panel content is higher than your browser window's height. In addition, suppose that your modalpanel resides in a container with a fixed height. Then, if the panel pops up, no scrollbar will be attached to the browser's window and you won't be able to scroll to the bottom of the modal box.

[sergeysmirnov]

What I have in my project is below. The dialog height is adopted for the height of the window. The scroll is appeared only if no enough space for content.  resizeCTDialog() is invoked when windows is resized. The listener is added on the parent page with

jQuery(window).bind('resize', function() {resizeCTDialog()})

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:s="http://jboss.com/products/seam/taglib"
    xmlns:rich="http://richfaces.org/rich">

        <rich:modalPanel id="ctDialog"
             onshow="adoptCTDialogHeight()"
             autosized="true">
            <a4j:form>
                <a4j:outputPanel id="createLibraryTasks" layout="block">       
                    <a4j:outputPanel id="ctContent" styleClass="dte-content" layout="block">

                        dialog content here
                                                            
                    </a4j:outputPanel>

                         buttons

                </a4j:outputPanel>
            </a4j:form>   
        </rich:modalPanel>       
       
    <script>
        //<![CDATA[
        function adoptCTDialogHeight() {

            if (jQuery(window).height() -
                    jQuery(#{rich:element('ctContent')}).height() < 130) {
                        addScrollToCTDialog();
                }
        }

        function resizeCTDialog() {
            if (#{rich:component('ctDialog')}.shown) {
                #{rich:component('ctDialog')}.hide();
                resetScrollToCTDialog();
                #{rich:component('ctDialog')}.show();
                adoptCTDialogHeight();
            }
        }
        //]]>
    </script>
   
    <rich:jQuery name="addScrollToCTDialog" timing="onJScall" selector="#ctContent"
        query="css('overflow-y','auto').css('overflow-x','hidden').css('height', jQuery(window).height() - 130)" />
       
    <rich:jQuery name="resetScrollToCTDialog" timing="onJScall" selector="#ctContent"
        query="css('height','auto').css('overflow-y','auto').css('overflow-x','hidden')" />
       
       
</ui:composition>

[kiekie96]

If you use DIV and got difficult to adjust DIV size to modal panel size, you can use this tricked

http://www.hell0w0rld.co.cc/2010/09/how-to-make-scroll-bar-in-richfaces-modalpanel/

[klaus11]

I have a scrolllbar with an div between the richfaces modalpanel, and everything works fine, also when I resize the window.

the only problem is, that when I popup up the modalpanel, the scrolling from the main page is also used when I reach the bottom of the scrolling in the modal panel.

overflow: hidden would be great for the html or body section in that time when I popup the modal panel.

Anyone any idea how to pass this on to the main styles ?
thanks,

Klaus