Why doesn't the width of the GridView grow 100% across the entire page when I set the width?
I have the following markup, I took extra stuff from divs so it's easier to understand. I had the GridView set to 100% using the extensible extension panels and it was showing on the page. Then, instead of creating collapsible panel extensions and using accordion panels, the gridview only expands as much as necessary, no matter what I set the width for. Below is the markup:
<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>
a source to share
Xaisoft,
Not sure what is different in your environment. But I took the code you pasted in your question, added a grid, filled it with some test data and set the width to 100%, and it expanded across the page. The only thing I can think of is something in your CSS that might trigger it. The fact that it works on different pages means it might not be CSS (hmmm). Perhaps something local to this page?
I don't think it has anything to do with Accordian.
Take a look at the copied code below, this is what I have in my test project and it worked.
I would recommend starting with a new page without CSS and from there. Without looking at all your CSS, this will be difficult to answer.
<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>
a source to share