https://i.stack.imgur.com/ZaJE7.jpg
After viewing the image above, I am facing a challenge with stretching and fixing a gridview to contain the entire div where it is placed. The issue arises when the gridview adjusts automatically based on the content's width.
The gridview is set up with JavaScript commands to keep the header fixed. While adding a width=100% property to the gridview can achieve the desired result, it causes a problem due to an injected jQuery command which results in this:
https://i.stack.imgur.com/4qxkF.jpg
Below are the relevant codes:
<div class="GridviewPanelBody">
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black" GridLines="Vertical" Font-Size="Smaller" EmptyDataText="No Records Found" ShowHeaderWhenEmpty="True" AutoGenerateColumns="false" >
<emptydatarowstyle backcolor="white" forecolor="black"/>
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:BoundField HeaderText="Location" DataField="locationd" />
<asp:BoundField HeaderText="Retail Partner" DataField="name" />
<asp:BoundField HeaderText="FL Area" DataField="sqm" />
<asp:BoundField HeaderText="Previous Month" DataField="PreviousMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Current Month" DataField="CurrentMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Last Year Month" DataField="LastYearMonth" DataFormatString="{0:#,##0.00;(#,##0.00);0}" />
<asp:BoundField HeaderText="Sales/SQM" DataField="SALES/SQM" DataFormatString="{0:#,##0.00;(#,##0.00);0}"/>
<asp:BoundField HeaderText="Inc/Dec%" DataField="INC/DEC%" DataFormatString="{0:#,##0.00;}" />
</Columns>
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" Height="25px"/>
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
CSS segment:
.GridviewPanelBody {
background-color: #FaFaFa;
margin-left: auto;
margin-right: auto;
overflow: auto;
height: auto;
}