Datatable show entries dropdown height

Datatable show entries dropdown height

HuuDHuuD Posts: 1Questions: 1Answers: 0

Hi,

I have this bootstrap datatable whose show entries dropdown is too small, how can I change its height, this is an admin template downloaded from internet.

https://postimg.org/image/8tfdblo3vv/

<!DOCTYPE html>
<html>
        <link href="../assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="../assets/css/style.css" rel="stylesheet" type="text/css" />
        <link href="../assets/plugins/bootstrap-select/css/bootstrap-select.min.css" rel="stylesheet" />
        <link href="../assets/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
        <!--Footable-->
        <link href="../assets/plugins/footable/css/footable.core.css" rel="stylesheet">
        <!-- DataTables -->
        <link href="../assets/plugins/datatables/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
        <link href="../assets/plugins/datatables/buttons.bootstrap4.min.css" rel="stylesheet" type="text/css" />
        <!-- Responsive datatable examples -->
        <link href="../assets/plugins/datatables/responsive.bootstrap4.min.css" rel="stylesheet" type="text/css" />
        <!-- Begin page -->
        <div class="row">
            <div class="col-12">
              <h5 class="mt-0 m-b-20">Search and View student fee status</h5>
                    <table id="datatable" class="table table-bordered table-colored table-custom table-hover toggle-circle m-b-0" data-page-size="7">
                        <tr class="active">
                            <td colspan="5">
                                <div class="text-right">
                                    <ul class="pagination pagination-split footable-pagination m-t-10 m-b-0"></ul>
                                </div>
                            </td>
                        </tr>
                        </tfoot>
                    </table>
        </div>
              </div> <!-- end row -->
            </div>
        </div>
    </div>
</div>
    <!-- END wrapper -->
        <!-- jQuery  -->
    <script src="../assets/js/jquery.min.js"></script>
    <script src="../assets/js/tether.min.js"></script><!-- Tether for Bootstrap -->
    <script src="../assets/js/bootstrap.min.js"></script>
    <!-- App js -->
    <script src="../assets/js/jquery.core.js"></script>
    <script src="../assets/js/jquery.app.js"></script>
    <script src="../assets/plugins/select2/js/select2.min.js" type="text/javascript"></script>
    <script src="../assets/plugins/bootstrap-select/js/bootstrap-select.js" type="text/javascript"></script>
    <script src="../assets/plugins/timepicker/bootstrap-timepicker.js"></script>
    <script src="../assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script src="../assets/pages/jquery.form-pickers.init.js"></script>
    <script src="../assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
    <!--FooTable-->
    <script src="../assets/plugins/footable/js/footable.all.min.js"></script>
    <script src="../assets/plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../assets/plugins/datatables/dataTables.bootstrap4.min.js"></script>
    <!-- Responsive examples -->
    <script src="../assets/plugins/datatables/dataTables.responsive.min.js"></script>
    <script src="../assets/plugins/datatables/responsive.bootstrap4.min.js"></script>
    <script type="text/javascript">
                $('#datatable').DataTable();
        </script>
    </body>
</html>


Answers

  • tdespenzatdespenza Posts: 1Questions: 0Answers: 0
    edited February 2019

    "I'm having the same problem. It keeps adding form-group-sm class. I need to remove this but don't know how. Has anyone else solved this? I've been trying to figure this out for a long time."

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @tdespenza ,

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

This discussion has been closed.