2011-11-13 24 views
1

私はアコーディオンとまったく同じように使い慣れていません。アコーディオンの幅を調整しようとしています。どのように簡単な方法で行うのですか?それに付属のサンプルのCSSですが、私は幅の調整が表示されません。ajax aspアコーディオンのサイズを調整する

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="Server" /> 
<asp:Accordion ID="MyAccordion" runat="server" 
         SelectedIndex="0" 
         HeaderCssClass="accordionHeader" 
         ContentCssClass="accordionContent" 
         FadeTransitions="true" 
         FramesPerSecond="40" 
         TransitionDuration="250" 
         AutoSize="None"> 
<Panes> 
     <asp:AccordionPane ID = "AccordionPane1" runat = "server"> 
     <Header> 
     <a href = "" onclick = "return false;" class = "accordionLink"> Section 1</a> 
     </Header> 
     <Content> 
     <p>Thi</p> 
     </Content> 
    </asp:AccordionPane> 

    <asp:AccordionPane ID = "AccordionPane2" runat = "server"> 
     <Header> 
     <a href = "" onclick = "return false;" class = "accordionLink"> Section 2</a> 
     </Header> 
     <Content> 
     <p>Joe</p> 
     </Content> 
    </asp:AccordionPane> 

    <asp:AccordionPane ID = "AccordionPane3" runat = "server"> 
     <Header> 
     <a href = "" onclick = "return false;" class = "accordionLink"> Section 3</a> 
     </Header> 
     <Content> 
     <p>So keep yoow Micro</p> 
     </Content> 
    </asp:AccordionPane> 

    <asp:AccordionPane ID = "AccordionPane4" runat = "server"> 
     <Header> 
     <a href = "" onclick = "return false;" class = "accordionLink"> Section 4</a> 
     </Header> 
     <Content> 
     <p>>test</p> 
     </Content> 
    </asp:AccordionPane> 
</Panes> 
</asp:Accordion> 


.accordionHeader 
{ 
    border: 1px solid #2F4F4F; 
    color: white; 
    background-color: #2E4d7B; 
    font-family: Arial, Sans-Serif; 
    font-size: 12px; 
    font-weight: bold; 
    padding: 5px; 
    margin-top: 5px; 
    cursor: pointer; 
} 

.accordionContent 
{ 
    background-color: #D3DEEF; 
    border: 1px dashed #2F4F4F; 
    border-top: none; 
    padding: 5px; 
    padding-top: 10px; 
} 

.accordionLink 
{ 
background-color: #D3DEEF; 
    color: white; 
} 

.watermark { 
    background: #FFAAFF; 
} 

.popupControl { 
    background-color:#AAD4FF; 
    position:absolute; 
    visibility:hidden; 
    border-style:solid; 
    border-color: Black; 
    border-width: 2px; 
} 

.modalBackground { 
    background-color:Gray; 
    filter:alpha(opacity=70); 
    opacity:0.7; 
} 

.modalPopup { 
    background-color:#ffffdd; 
    border-width:3px; 
    border-style:solid; 
    border-color:Gray; 
    padding:3px; 
    width:250px; 
} 

.sampleStyleA { 
    background-color:#FFF; 
} 

.sampleStyleB { 
    background-color:#FFF; 
    font-family:monospace; 
    font-size:10pt; 
    font-weight:bold; 
} 

.sampleStyleC { 
    background-color:#ddffdd; 
    font-family:sans-serif; 
    font-size:10pt; 
    font-style:italic; 
} 

.sampleStyleD { 
    background-color:Blue; 
    color:White; 
    font-family:Arial; 
    font-size:10pt; 
} 

答えて

0

アコーディオン用のコンテナを作成し、アコーディオンの幅を設定する幅を与えることもできます。次のようなもの:

<div id="divAccordionContainer" style="width:500px"> 
    <ajaxToolkit:Accordion ID="MyAccordion" runat="Server"> 
     ... 
    </ajaxToolkit:Accordion> 
</div> 
関連する問題