Datatable show entries dropdown height

Bootstrap Studio Help
1

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.

enter image description here

<!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>
2

Sorry this is the image : https://postimg.org/image/8tfdblo3vv/

3

Your example code is leaving out some useful info as well as proper code which I could think maybe a result of the Forum stripping some things out.

Anyways I took a look at https://datatables.net/manual/styling/bootstrap#Example

In Chrome if you right click on the selectbox and select Inspect element, you can see the CSS applied to the selectbox. I'd say take a look at

.input-sm {
    height: 30px;
    padding: 5px 10px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
}
select.input-sm {
    height: 30px;
    line-height: 30px;
}

and maybe adjust the padding or height/lineheight in a custom CSS of those properties. Find a way to single out that selectbox based on a parent elements class or ID so that way you don't take the chance of restyling all selectboxes.

Saj

4

Hi,

Thanks for the reply, which file to look in for this code, there are too many .css files ?

Thank You

5

View the site in your browser like you are doing in your screenshot. Then right click on the selectbox and select Inspect element. This will bring up the Dev Tools for Chrome/Firefox/IE 11/Edge.

You will then see the HTML and the CSS. On the side where the CSS is, it will tell you which file the CSS is in based on the HTML element you have selected in the HTML section. However, you don't want to be editing that file. You want to edit your custom CSS file <link href="../assets/css/style.css" rel="stylesheet" type="text/css" />. Also you need to move that CSS file link below all the other CSS file links so that it can override any/all of the CSS file links that come before it.

Then you can try adding your override CSS rules in your custom CSS file to override the selectbox styling.

Saj

6

This is what I found. The one highlighted in red is causing the issue, so I removed in firefox to test and it shows fine, but I am not able to find it in any css file, it says this is in scss file but in scss file its all jumbled alphanumeric.. https://postimg.org/image/1m175e0w3v/ https://postimg.org/image/8em8rurydn/

7

I tried the custom css file method, no changes in select box appearance..

8

Appreciate your help, the issue is resolved I had found the this line to be the problem : select.form-control-sm:not([size]):not([multiple]){height:1.8125rem} and removed the height:1.8125rem. Now its showing fine.

https://postimg.org/image/6pbvlz7hl7/

Thanks a lot.

9

This was in bootstrap.min.css

10

You shouldn't remove it from that file you should override it in your custom CSS. With it removed, inspect it again and see what is the styling of it now and then put that in your custom CSS file.

Otherwise, if you add any other selectbox in your project that would work fine with it, you no longer have it. Which is why I said earlier to find a way to single out that selectbox so that you aren't going to effect any other selectbox.

Now that I have looked at the screenshot better, if you are able to remove the class form-control-sm from the selectbox then you would have had the same effect. Rather then altering the CSS.

Saj