幅を設定しても、GridViewの幅がページ全体で100％拡大しないのはなぜですか？

Question

私は次のマークアップを持っています。私はdivから余分なものを取り出しましたので、理解しやすくなりました。 GridViewが折りたたみ可能なパネルエクステンダで100％に設定されていて、ページ上で正常に表示されていました。次に、折りたたみ可能なパネルエクステンダを使用し、アコーディオンパネルを使用する代わりに、幅を何に設定しても、必要なだけグリッドビューが展開されます。

<div> 
    <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0" 
        HeaderCssClass="collapsePortfolioHeader" 
        FadeTransitions="true" 
        FramesPerSecond="40" 
        TransitionDuration="250" 
        AutoSize="None"> 
     <Panes> 
      <cc1:AccordionPane runat="server"> 
       <Header> 
        Create Portfolio</Header> 
       <Content> 
        <br /> 
        <div style="height: 290px;"> 
         <div style="float: left; width: 250px; 
            margin-right: 75px;"> 
         </div> 
         <div style="float: left; width: 250px;"> 
         </div> 
         <div style="float: left; width: 70px; 
            margin: 5px;"> 
         </div> 
         <div style="float: left; width: 250px; 
            margin: 5px;"> 

         </div> 
         <div class="clear"> //just a clear both; 
         </div> 
        </div> 
       </Content> 
      </cc1:AccordionPane> 
      <cc1:AccordionPane runat="server"> 
       <Header> 
        Create Portfolio By Location</Header> 
       <Content> 

        <div style="height: 150px;"> 
         <div style="float: left; width: 170px; 
            margin: 5px;"> 

         </div> 
         <div style="float: left; 
            margin-right: 5px;"> 
         </div> 
         <div style="float: left; width: 250px; 
            margin-right: 5px;"> 

         </div> 
         <div style="float: left; width: 70px; 
            padding-top: 100px;"> 
         </div> 
         <div style="float: left; width: 250px; 
            margin-left: 15px;"> 

         </div> 
         <div class="clear"> 
         </div> 
        </div> 
       </Content> 
      </cc1:AccordionPane> 
     </Panes> 
    </cc1:Accordion> 
</div> 

<div class="grid"> //the grid class just has margin:0; 
// GridView goes here 
</div> 

Answer 1

Xaisoft、

お使いの環境で異なっているのかわからない：ここでは、以下のマークアップです。しかし、質問に貼り付けたコードを取り出し、グリッドビューを追加し、テストデータを入力して幅を100％に設定し、ページ全体に広げました。私が考えることのできる唯一のことは、あなたのCSSにそれが原因かもしれない何かがあることです。異なるページで動作するということは、CSS（hmmm）ではない可能性があることを意味します。おそらくこのページのローカルなものでしょうか？

私はアコーデオンとは関係がないとは思わない。

以下のコピーされたコードを見てください。これは私のテストプロジェクトでのものです。

CSSがない新しいページから開始することをお勧めします。 CSS全体を見ることなく、これは答えにくいでしょう。

<div> 
      <ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0" HeaderCssClass="collapsePortfolioHeader" 
       FadeTransitions="true" FramesPerSecond="40" TransitionDuration="250" AutoSize="None"> 
       <Panes> 
        <ajaxToolkit:AccordionPane runat="server"> 
         <Header> 
          Create Portfolio</Header> 
         <Content> 
          <br /> 
          <div style="height: 290px;"> 
           <div style="float: left; width: 250px; margin-right: 75px;"> 
           </div> 
           <div style="float: left; width: 250px;"> 
           </div> 
           <div style="float: left; width: 70px; margin: 5px;"> 
           </div> 
           <div style="float: left; width: 250px; margin: 5px;"> 
           </div> 
           <div class="clear"> 
           </div> 
          </div> 
         </Content> 
        </ajaxToolkit:AccordionPane> 
        <ajaxToolkit:AccordionPane runat="server"> 
         <Header> 
          Create Portfolio By Location</Header> 
         <Content> 
          <div style="height: 150px;"> 
           <div style="float: left; width: 170px; margin: 5px;"> 
           </div> 
           <div style="float: left; margin-right: 5px;"> 
           </div> 
           <div style="float: left; width: 250px; margin-right: 5px;"> 
           </div> 
           <div style="float: left; width: 70px; padding-top: 100px;"> 
           </div> 
           <div style="float: left; width: 250px; margin-left: 15px;"> 
           </div> 
           <div class="clear"> 
           </div> 
          </div> 
         </Content> 
        </ajaxToolkit:AccordionPane> 
       </Panes> 
      </ajaxToolkit:Accordion> 
     </div> 
     <div class="grid"> 
      <asp:GridView ID="GridView1" runat="server" Width="100%"> 
      </asp:GridView> 
     </div>