我有一个引导下拉的第二个文本框。这有一个大的内容。我需要调整大小,其下拉文本框的大小。下拉溢出,并蔓延到其他文本框左下方。
更新日期:
下拉菜单应限制在红色指示区域,如下图所示
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<style>
.dropdown .list-group-item {
width: 100px!important;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="input-group">
<button type="button" role="button" title="Delete" class="material-symbols-outlined text-secondary input-group-text bg-theme delrow">delete</button>
<input type="text" placeholder="Key" class="form-control key">
<input type="text" placeholder="Value" class="form-control form-select value suggest coltitle-tags meta-tags typeable dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
<div class="dropdown-menu border-secondary fdropdown-menu show" data-popper-placement="bottom-start" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(16.8px, 38.4px, 0px);">
<div>
<input type="search" placeholder="Type to search..." class="m-3 mt-2 form-control search"> <span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Timestamp}}" title="Timestamp
" href="#">Timestamp</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Email Address}}" title="Email Address
ⓘ Column B" href="#">Email Address</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Class name}}" title="Class name
ⓘ Column C" href="#">Class name</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Instructor}}" title="Instructor
ⓘ Column D" href="#">Instructor</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Level of effort [Level of effort you put into the course]}}" title="Level of effort [Level of effort you put into the course]
ⓘ Column E" href="#">Level of effort [Level of effort you put into the course]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Contribution to learning}}" title="Contribution to learning
ⓘ Column F" href="#">Contribution to learning</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Skill and responsiveness of the instructor [Instructor was an effective lecturer/demonstrator]}}" title="Skill and responsiveness of the instructor [Instructor was an effective lecturer/demonstrator]
ⓘ Column G" href="#">Skill and responsiveness of the instructor [Instructor was an effective lecturer/demonstrator]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Skill and responsiveness of the instructor [Presentations were clear and organized]}}" title="Skill and responsiveness of the instructor [Presentations were clear and organized]
ⓘ Column H" href="#">Skill and responsiveness of the instructor [Presentations were clear and organized]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Skill and responsiveness of the instructor [Instructor stimulated student interest]}}" title="Skill and responsiveness of the instructor [Instructor stimulated student interest]
ⓘ Column I" href="#">Skill and responsiveness of the instructor [Instructor stimulated student interest]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Skill and responsiveness of the instructor [Instructor effectively used time during class periods]}}" title="Skill and responsiveness of the instructor [Instructor effectively used time during class periods]
ⓘ Column J" href="#">Skill and responsiveness of the instructor [Instructor effectively used time during class periods]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Skill and responsiveness of the instructor [Instructor was available and helpful]}}" title="Skill and responsiveness of the instructor [Instructor was available and helpful]
ⓘ Column K" href="#">Skill and responsiveness of the instructor [Instructor was available and helpful]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Skill and responsiveness of the instructor [Grading was prompt and had useful feedback]}}" title="Skill and responsiveness of the instructor [Grading was prompt and had useful feedback]
ⓘ Column L" href="#">Skill and responsiveness of the instructor [Grading was prompt and had useful feedback]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Course content [Learning objectives were clear]}}" title="Course content [Learning objectives were clear]
ⓘ Column M" href="#">Course content [Learning objectives were clear]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Course content [Course content was organized and well planned]}}" title="Course content [Course content was organized and well planned]
ⓘ Column N" href="#">Course content [Course content was organized and well planned]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Course content [Course workload was appropriate]}}" title="Course content [Course workload was appropriate]
ⓘ Column O" href="#">Course content [Course workload was appropriate]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Course content [Course organized to allow all students to participate fully]}}" title="Course content [Course organized to allow all students to participate fully]
ⓘ Column P" href="#">Course content [Course organized to allow all students to participate fully]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{What aspects of this course were most useful or valuable?}}" title="What aspects of this course were most useful or valuable?
ⓘ Column Q" href="#">What aspects of this course were most useful or valuable?</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{How would you improve this course?}}" title="How would you improve this course?
ⓘ Column R" href="#">How would you improve this course?</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Why did you choose this course?}}" title="Why did you choose this course?
ⓘ Column S" href="#">Why did you choose this course?</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Instructor}}" title="Instructor
ⓘ Column T" href="#">Instructor</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Level of effort [Level of effort you put into the course]}}" title="Level of effort [Level of effort you put into the course]
ⓘ Column U" href="#">Level of effort [Level of effort you put into the course]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Contribution to learning}}" title="Contribution to learning
ⓘ Column V" href="#">Contribution to learning</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Skill and responsiveness of the instructor [Instructor was an effective lecturer/demonstrator]}}" title="Skill and responsiveness of the instructor [Instructor was an effective lecturer/demonstrator]
ⓘ Column W" href="#">Skill and responsiveness of the instructor [Instructor was an effective lecturer/demonstrator]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Skill and responsiveness of the instructor [Presentations were clear and organized]}}" title="Skill and responsiveness of the instructor [Presentations were clear and organized]
ⓘ Column X" href="#">Skill and responsiveness of the instructor [Presentations were clear and organized]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Skill and responsiveness of the instructor [Instructor stimulated student interest]}}" title="Skill and responsiveness of the instructor [Instructor stimulated student interest]
ⓘ Column Y" href="#">Skill and responsiveness of the instructor [Instructor stimulated student interest]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Skill and responsiveness of the instructor [Instructor effectively used time during class periods]}}" title="Skill and responsiveness of the instructor [Instructor effectively used time during class periods]
ⓘ Column Z" href="#">Skill and responsiveness of the instructor [Instructor effectively used time during class periods]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Skill and responsiveness of the instructor [Instructor was available and helpful]}}" title="Skill and responsiveness of the instructor [Instructor was available and helpful]
ⓘ Column AA" href="#">Skill and responsiveness of the instructor [Instructor was available and helpful]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Skill and responsiveness of the instructor [Grading was prompt and had useful feedback]}}" title="Skill and responsiveness of the instructor [Grading was prompt and had useful feedback]
ⓘ Column AB" href="#">Skill and responsiveness of the instructor [Grading was prompt and had useful feedback]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Course content [Learning objectives were clear]}}" title="Course content [Learning objectives were clear]
ⓘ Column AC" href="#">Course content [Learning objectives were clear]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Course content [Course content was organized and well planned]}}" title="Course content [Course content was organized and well planned]
ⓘ Column AD" href="#">Course content [Course content was organized and well planned]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Course content [Course workload was appropriate]}}" title="Course content [Course workload was appropriate]
ⓘ Column AE" href="#">Course content [Course workload was appropriate]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Course content [Course organized to allow all students to participate fully]}}" title="Course content [Course organized to allow all students to participate fully]
ⓘ Column AF" href="#">Course content [Course organized to allow all students to participate fully]</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{What aspects of this course were most useful or valuable?}}" title="What aspects of this course were most useful or valuable?
ⓘ Column AG" href="#">What aspects of this course were most useful or valuable?</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{How would you improve this course?}}" title="How would you improve this course?
ⓘ Column AH" href="#">How would you improve this course?</a></span><span class="dropdown-tag-questions"><a class="dropdown-tag-questions-item" data-value="{{Why did you choose this course?}}" title="Why did you choose this course?
ⓘ Column AI" href="#">Why did you choose this course?</a></span>
<li>
<hr class="dropdown-divider">
</li>
<span class="dropdown-tag-meta"><a class="dropdown-tag-meta-item" data-value="{{Response Number}}" title="Response Number
ⓘ Form Response number" href="#"> Response Number </a></span><span class="dropdown-tag-meta"><a class="dropdown-tag-meta-item" data-value="{{Form Name}}" title="Form Name
ⓘ The name of the Google Form" href="#"> Form Name </a></span><span class="dropdown-tag-meta"><a class="dropdown-tag-meta-item" data-value="{{Form Url}}" title="Form Url
ⓘ A link to the associated Google Form" href="#"> Form Url </a></span><span class="dropdown-tag-meta"><a class="dropdown-tag-meta-item" data-value="{{Response Id}}" title="Response Id
ⓘ Unique response ID generated by Google Form" href="#"> Response Id </a></span><span class="dropdown-tag-meta"><a class="dropdown-tag-meta-item" data-value="{{Response Url}}" title="Response Url
ⓘ Directly link to view / edit the current form submission" href="#"> Response Url </a></span><span class="dropdown-tag-meta"><a class="dropdown-tag-meta-item" data-value="{{Response Date}}" title="Response Date
ⓘ The full timestamp when a form was submitted" href="#"> Response Date </a></span><span class="dropdown-tag-meta"><a class="dropdown-tag-meta-item" data-value="{{All Markers}}" title="All Markers
ⓘ An HTML table containing all the form responses in a neat tabular format." href="#"> All Markers </a></span>
</div>
</div>
<button type="button" role="button" title="Add new" class="material-symbols-outlined input-group-text bg-theme addrow">add</button>
</div>
<script>
$(document).ready(function() {
$(`body`).on("click", '.addrow,.addnewrow', function() {
$(this).parent().after(`<div class="input-group">
<button type="button" role="button" title="Delete" class="material-symbols-outlined input-group-text bg-theme delnewrow">delete</button>
<input type="text" placeholder="Key" class="form-control key">
<input type="text" placeholder="Value" class="form-control form-select value suggest coltitle-tags meta-tags typeable dropdown-toggle" data-bs-toggle="dropdown" data-bs-display="static" data-bs-auto-close="outside" aria-expanded="false">
<button type="button" role="button" title="Add new" class="material-symbols-outlined input-group-text bg-theme addnewrow">add</button>
</div>`);
addsuggest(wid, tid);
}).on("click", '.delnewrow', function() {
$(this).parent().remove();
});
});
</script>
</body>
</html>
1条答案
按热度按时间rdrgkggo1#
我很快就尝试了我作为一个评论张贴,所以我只是添加了一个.dropdown Package 器,它有点进入正确的方向