Print Page - Jquery EasyUI Accordion

Code:

    <div id="aa" class="easyui-accordion" style="width:300px;height:200px;">  
        <div title="Title1" iconCls="icon-save" style="overflow:auto;padding:10px;">  
            <h3 style="color:#0099FF;">Accordion for jQuery</h3>  
            <p>Accordion is a part of easyui framework for jQuery.   
            It lets you define your accordion component on web page more easily.</p>  
        </div>  
        <div title="Title2" iconCls="icon-reload" selected="true" style="padding:10px;">  
            content2  
        </div>  
        <div title="Title3">  
            content3  
        </div>  
    ***************test words put here can not display correctly
    </div>

Css file (accordion part)

Code:

        .accordion{
    	background:#fff;
    	overflow:hidden;
    }
    .accordion .accordion-header{
    	background:#efefef;
    	border-top-width:0;
    	cursor:pointer;
    }
    .accordion .accordion-header .panel-title{
    	font-weight:normal;
    }
    .accordion .accordion-header-selected .panel-title{
    	font-weight:bold;
    }
    .accordion-noborder .accordion-header{
    	border-width:0 0 1px;
    }
    .accordion-noborder .accordion-body{
    	border-width:0px;
    }
    .accordion-collapse{
    	background:url('images/accordion_collapse.png') no-repeat;
    }
    .accordion-expand{
    	background:url('images/accordion_expand.png') no-repeat;
    }

The problem is I would like to making the same effect like jsfiddle sidebar, when i put the test word ,it can not display correctly. It can display only when all panels are slided up. I have tried to look at some css to see whether the problem occur but i just can not figure it out.Thank you.

[1]:(http://i.stack.imgur.com/sJRrG.jpg)
[2]:(http://i.stack.imgur.com/cIBH0.jpg)

I have post it to the stackoverflow and i hope the result help:

The text isn't displayed properly because the accordion uses a fixed height, and it then calculates the panel-body and the header heights. So when you expand a panel, the text will not be displayed anymore (or partially) because it uses up all space.

A simple workaround for this is to add some height after pageload to the easyui-accordion container to compensate for your text.

see
http://jsfiddle.net/hFsxP/15/

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: foodil on March 02, 2012, 02:12:22 AM