hi all,
i have succeeded to apply scrollbar to table
but it is appearing at the page load
but i want to appear the scrollbar only when it reaches certain height
i am using the following code
<style>
.table-overflow {
overflow: scroll !important;
height: 300px !important;
}
</style>
<div class="table-responsive table-overflow">
<asp:GridView ID="grvStudentDetails" runat="server" ShowFooter="True"
AutoGenerateColumns="False" onrowdeleting="grvStudentDetails_RowDeleting"
GridLines="None" CssClass=" table-bordered"
onrowdatabound="grvStudentDetails_RowDataBound1">
<Columns>
<asp:BoundField DataField="RowNumber" HeaderText="SNo" HeaderStyle-CssClass="th" />
<asp:TemplateField HeaderText="Dr/Cr" HeaderStyle-CssClass="mywidth1 col-sm-3 col-xs-3 col-lg-1 th">
<ItemTemplate>
<asp:DropDownList ID="ddlDr" onkeypress="return LedgerNext(event,this)" runat="server" CssClass="form-control">
<asp:ListItem>Dr</asp:ListItem>
<asp:ListItem>Cr</asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Particulars" HeaderStyle-CssClass="mywidth2 col-sm-3 col-xs-3 col-lg-4 th">
<ItemTemplate >
<asp:DropDownList ID="ddlItemLedger" onkeypress="return DebitNext(event,this)" runat="server" CssClass="form-control ">
</asp:DropDownList>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Debit" HeaderStyle-CssClass="mywidth3 col-sm-3 col-xs-3 col-lg-2 th">
<ItemTemplate>
<asp:TextBox ID="txtDebit" onkeypress="return MasterRemarks(event,this)" CssClass="form-control rightAlign" runat="server" ></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<asp:Label ID="lblDbTotal" CssClass="control-label" style="font-weight:bold;" runat="server" Text=""></asp:Label>
<span style="font-weight:bold">Dr</span>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Credit" HeaderStyle-CssClass="mywidth3 col-sm-3 col-xs-3 col-lg-2 th">
<ItemTemplate>
<asp:TextBox ID="txtCredit" onkeypress="return MasterRemarks(event,this)" CssClass="form-control rightAlign" runat="server" ></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<asp:Label ID="lblCrTotal" CssClass="control-label" style="font-weight:bold;" runat="server" Text=""></asp:Label>
<span style="font-weight:bold">Cr</span>
</FooterTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Remarks" HeaderStyle-CssClass="col-md-4 col-sm-3 col-xs-3 col-lg-4 th">
<ItemTemplate>
<asp:TextBox ID="txtNaration" CssClass="form-control" runat="server" ></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="left" />
<FooterTemplate>
<asp:Button ID="ButtonAdd" style="display: none" CssClass="btn btn-primary btn-sm tip-bottom" runat="server" Text="Add New Row" OnClick="ButtonAdd_Click"/>
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField ShowDeleteButton="True" DeleteText='<span class="glyphicon glyphicon-trash btn-sm"></span' HeaderStyle-CssClass="col-md-1 col-lg-1 col-sm-1 col-xs1 th" />
</Columns>
</asp:GridView>
</div>
in the above code i want to visible the scrollbar when it reaches 300px
but it is showing at the loading time
how can we do that?
Thanks,
Murali.
murali krishna14
but it is appearing at the page load
but i want to appear the scrollbar only when it reaches certain height
Instead of overflow property set to scroll,you need to use auto
Change your css like given below
<style>
.table-overflow
{
overflow: auto !important;
height: 300px !important;
}
</style>
Hi A2H
Thanks it is working
but it is raising another issue to me
in my code some other controls are placed below the gridview control
if i am using this code
<style> .table-overflow { overflow: auto !important; height: 300px !important; } </style>
by default 300px height is appearing in between gridview and their below controls?
please see the below snapshot
i dont want that gap between the controls.
Thanks,
Murali.
murali krishna14
by default 300px height is appearing in between gridview and their below controls?
Change your css like given below
<style>
.table-overflow
{
overflow: auto !important;
height:300px;
max-height:300px;
}
</style>
No,
Still it is appearing same
Please slove this issue
Hi A2H Thanks
.table-overflow
{
display: block;
overflow: auto !important;
max-height:300px !important;
min-height:50px !important;
}
i got the soluction based on your code
!important
declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted. If you use
!important
out of laziness, to avoid proper debugging, or to rush a project to completion, then you’re abusing it, and you (or those that inherit your projects) will suffer the consequences.
http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
Please go through your CSS and HTML, find out which style is over writing for once, then if it is necessary use !important.