我需要更改时间选择器下拉菜单的大小。
我尝试更改一些高度，但没有得到结果。
我需要尽可能小的下拉菜单。
时间选择器CSS的链接：https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css
我正在使用MDBootstrap。
enter code here
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Eblity Attendance Page</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<!-- MDBootstrap Datatables -->
<link href="css/addons/datatables.min.css" rel="stylesheet">
<!-- Date-Picker CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/zebra_datepicker@latest/dist/css/bootstrap/zebra_datepicker.min.css">
<!-- New added CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" />
<!--<link rel="stylesheet" type="text/css" href="timepicker.css">-->
<!-- Styling -->
<style type="text/css">
.text{
font-weight: bold;
color: #4d5656;
margin-top: 1%;
}
.theader th{
font-weight: bold;
background-color: #616a6b;
color: white;
}
.Commitment input{
display: none;
}
.Zebra_DatePicker{background: white}
.Zebra_DatePicker td:hover{background: #3498db}
/*.Zebra_DatePicker .dp_icon{height:16px;background-image:url('https://www.flaticon.com/free-icon/calendar_1801179') !important}*/
.table tbody td{
vertical-align: middle;
}
.table tbody th{
vertical-align: middle;
text-align: center;
}
.text{
font-weight: bold;
margin-top: 2%;
}
/* nth-child(1) = the first td in each tr */
td:nth-child(1) {
width: 2%;
}
td:nth-child(2) {
width: 5%;
}
td:nth-child(3) {
width: 1%;
}
td:nth-child(4) {
width: 13%;
}
td:nth-child(5) {
width: 13%;
}
td:nth-child(6) {
width: 13%;
}
td:nth-child(7) {
width: 13%;
}
td:nth-child(8) {
width: 13%;
}
</style>
</head>
<body>
<!--Navbar -->
<nav class="mb-1 navbar navbar-expand-lg navbar-dark info-color">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent-4"
aria-controls="navbarSupportedContent-4" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent-4">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
<i class="fas fa-home"></i> Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<i class="fas fa-tachometer-slow"></i>Dashboard
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-555" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false"><i class="fas fa-contact"></i>Contact Us
</a>
<div class="dropdown-menu dropdown-menu-right dropdown-secondary" aria-labelledby="navbarDropdownMenuLink-555">
<a class="dropdown-item" href="#"><i class="fab fa-facebook-f"></i> Facebook</a>
<a class="dropdown-item" href="#"><i class="fab fa-instagram"></i> Instagram</a>
<a class="dropdown-item" href="#"><i class="fas fa-phone"></i> Call Us</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink-4" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user"></i> Profile </a>
<div class="dropdown-menu dropdown-menu-right dropdown-info" aria-labelledby="navbarDropdownMenuLink-4">
<a class="dropdown-item" href="#">My account</a>
<a class="dropdown-item" href="#">Log out</a>
</div>
</li>
</ul>
</div>
</nav>
<!--/.Navbar -->
<div class="container-fluid">
<h3 class="text">Attendance</h3>
<hr style="border: 3px solid #515a5a; border-top: 0px; margin-bottom: 2%">
</div>
<div class="container-fluid">
<!-- Input for date-picker -->
<input type="text" class="datepicker" style="width: 100%;margin-bottom: 5%">
<!-- Table -->
<div class="table-responsive">
<table class="table table-bordered table-hover" id="dtBasicExample" cellspacing="0" width="100%">
<!-- Table head -->
<thead class="theader">
<tr>
<th>Grade</th>
<th>Student</th>
<th>
P/A
</th>
<th>Check-In</th>
<th>Check-Out</th>
<th>Tutor</th>
<th>Videos</th>
<th>Others</th>
<th>Commitment</th>
</tr>
</thead>
<!-- Table head -->
<!-- Table body -->
<tbody>
<tr>
<td class="text">6</td>
<td class="text">Nupur</td>
<th scope="row">
<!-- Default un -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tableDefaultCheck2" >
<label class="custom-control-label" for="tableDefaultCheck2"></label>
</div>
</th>
<td>
<div class="input-group date" id="datetimepicker3" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker3" />
<div class="input-group-append" data-target="#datetimepicker3" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
</div>
</td>
<td><div class="input-group date" id="datetimepicker4" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker4" />
<div class="input-group-append" data-target="#datetimepicker4" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
</div></td>
<td><div class="input-group date" id="datetimepicker5" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker5" />
<div class="input-group-append" data-target="#datetimepicker5" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
</div></td>
<td><div class="input-group date" id="datetimepicker6" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker6" />
<div class="input-group-append" data-target="#datetimepicker6" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
</div></td>
<td><div class="input-group date" id="datetimepicker7" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker7" />
<div class="input-group-append" data-target="#datetimepicker7" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
</div></td>
<td class="Commitment">
<div class="md-form">
<input type="text" value="" id="form2" class="form-control">
<!-- <label for="form2">New Commitment</label> -->
<p class="text">Commitment</p>
</div>
</td>
</tr>
<tr>
<td class="text">6</td>
<td class="text">Nupur</td>
<th scope="row">
<!-- Default un -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="tableDefaultCheck2" >
<label class="custom-control-label" for="tableDefaultCheck2"></label>
</div>
</th>
<td>
<div class="input-group date" id="datetimepicker8" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker8" />
<div class="input-group-append" data-target="#datetimepicker8" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
</div>
</td>
<td><div class="input-group date" id="datetimepicker9" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker9" />
<div class="input-group-append" data-target="#datetimepicker9" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
</div></td>
<td><div class="input-group date" id="datetimepicker10" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker10" />
<div class="input-group-append" data-target="#datetimepicker10" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
</div></td>
<td><div class="input-group date" id="datetimepicker11" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker11" />
<div class="input-group-append" data-target="#datetimepicker11" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
</div></td>
<td><div class="input-group date" id="datetimepicker12" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker12" />
<div class="input-group-append" data-target="#datetimepicker12" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-clock-o"></i></div>
</div>
</div></td>
<td class="Commitment">
<div class="md-form">
<input type="text" value="" id="form2" class="form-control">
<!-- <label for="form2">New Commitment</label> -->
<p class="text">Commitment</p>
</div>
</td>
</tr>
</tbody>
<!-- Table body -->
</table>
<!-- Table -->
</div>
</div>
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- MDBootstrap Datatables -->
<script type="text/javascript" src="js/addons/datatables.min.js"></script>
<!-- DatePicker -->
<script src="https://cdn.jsdelivr.net/npm/zebra_datepicker@1.9.6/dist/zebra_datepicker.min.js"></script>
<!-- Datetime picker another version -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
<!-- Fonts -->
<script src="https://use.fontawesome.com/5084a9e4d5.js"></script>
<script>
//Pagination
$(document).ready(function () {
$('#dtBasicExample').DataTable({
"pagingType": "full_numbers" // "simple" option for 'Previous' and 'Next' buttons only
});
$('.dataTables_length').addClass('bs-select');
});
//Commitment
$('.md-form input').keydown(function(e) {
if (e.keyCode == 13 && $(this).val().length >0) {
$(this).next().show().text($(this).val())
$(this).hide();
}
});
$('.Commitment p').click(function() {
$(this).prev().show();
$(this).hide();
})
$(document).ready(function() {
// assuming the controls you want to attach the plugin to
// have the "datepicker" class set
$('input.datepicker').Zebra_DatePicker(
{
format: 'M d, Y'
});
});
/* $(function () {$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});*/
$(function() {
$("div[id^='datetimepicker']").datetimepicker({
format : 'LT'
});
});
</script>
</body>
</html>
答案 0 :(得分：0)
您可以使用CSS更改下拉列表的大小
public function trustLevel(){
return max(1, ceil($this->points / 25));
}