Почему ширина GridView не увеличивается на 100% по всей странице, когда я устанавливаю ширину?

Question

У меня есть следующая разметка, я взял дополнительные вещи из divs, чтобы их было легче понять. Я установил свой 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 (хммм). Возможно, что-то локальное на этой странице?

Я не думаю, что это имеет какое-либо отношение к Аккордеану.

Посмотрите на скопированный код ниже, это то, что у меня есть в моем тестовом проекте, и это сработало.

Я бы рекомендовал начать с новой страницы без 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>