[RESOLVED]how to apply scrollbar to table?

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

https://www.facebook.com/photo.php?fbid=685395388234807&set=a.140484002725951.30333.100002930567133&type=1&theater

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.

Please read more here :

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.

Leave a Reply