스크롤로 인해 반응 형 테이블 내부의 부트 스트랩 버튼 드롭 다운이 보이지 않음
overflow: auto;속성 때문에 드롭 다운이 표시되지 않기 때문에 응답하고 스크롤 할 때 테이블 내부의 드롭 다운 단추에 문제가 있습니다 . 버튼이 축소되었을 때 드롭 다운 옵션을 표시하려면 어떻게해야합니까? 일부 jQuery를 사용할 수 있지만 왼쪽에서 오른쪽으로 스크롤하는 데 문제가 있으므로 다른 솔루션을 찾기로 결정했습니다. 더 잘 이해하기 위해 사진을 첨부했습니다.
나는 이것을 스스로 해결하고 동일한 문제가있는 다른 사용자를 돕기 위해 답변을 범위에 넣었습니다. 부트 스트랩에 이벤트가 있으며 해당 이벤트를 사용하여 설정할 수 overflow: inherited있지만 부모 컨테이너에 CSS 속성이 없으면 작동합니다. .
$('.table-responsive').on('show.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "inherit" );
});
$('.table-responsive').on('hide.bs.dropdown', function () {
$('.table-responsive').css( "overflow", "auto" );
})
info: 이 바이올린 예제에서 이상하게 작동하고 왜 그런지 모르겠지만 내 프로젝트에서는 잘 작동합니다.
CSS 유일한 해결책은 오버플로 y 축을 허용한다.
http://www.bootply.com/YvePJTDzI0
.table-responsive {
overflow-y: visible !important;
}
편집하다
또 다른 CSS 유일한 해결책은 뷰포트 너비에 따라 오버플로를 반응 적으로 적용하는 것입니다.
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 768px) {
.table-responsive {
overflow: inherit;
}
}
https://www.codeply.com/go/D3XBvspns4
나는 다른 접근 방식을 취했고 부모에서 요소를 분리하고 jQuery에 의해 절대 위치로 설정했습니다.
작동하는 JS 파일 : http://jsfiddle.net/s270Lyrd/
내가 사용하고있는 JS 솔루션.
//fix menu overflow under the responsive table
// hide menu on click... (This is a must because when we open a menu )
$(document).click(function (event) {
//hide all our dropdowns
$('.dropdown-menu[data-parent]').hide();
});
$(document).on('click', '.table-responsive [data-toggle="dropdown"]', function () {
// if the button is inside a modal
if ($('body').hasClass('modal-open')) {
throw new Error("This solution is not working inside a responsive table inside a modal, you need to find out a way to calculate the modal Z-index and add it to the element")
return true;
}
$buttonGroup = $(this).parent();
if (!$buttonGroup.attr('data-attachedUl')) {
var ts = +new Date;
$ul = $(this).siblings('ul');
$ul.attr('data-parent', ts);
$buttonGroup.attr('data-attachedUl', ts);
$(window).resize(function () {
$ul.css('display', 'none').data('top');
});
} else {
$ul = $('[data-parent=' + $buttonGroup.attr('data-attachedUl') + ']');
}
if (!$buttonGroup.hasClass('open')) {
$ul.css('display', 'none');
return;
}
dropDownFixPosition($(this).parent(), $ul);
function dropDownFixPosition(button, dropdown) {
var dropDownTop = button.offset().top + button.outerHeight();
dropdown.css('top', dropDownTop + "px");
dropdown.css('left', button.offset().left + "px");
dropdown.css('position', "absolute");
dropdown.css('width', dropdown.width());
dropdown.css('heigt', dropdown.height());
dropdown.css('display', 'block');
dropdown.appendTo('body');
}
});
이 솔루션은 저에게 효과적이었습니다.
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: static !important;
}
}
@media (min-width: 768px) {
.table-responsive {
overflow: visible;
}
}
자세한 내용 : https://github.com/twbs/bootstrap/issues/15374
CSS 만 사용하는 솔루션이 있으며 테이블 응답 내의 드롭 다운에 상대적인 위치를 사용합니다.
@media (max-width: 767px) {
.table-responsive .dropdown-menu {
position: relative; /* Sometimes needs !important */
}
}
https://codepen.io/leocaseiro/full/rKxmpz/
참고로 2018 년이고 BS4.1을 사용하고 있습니다.
data-boundary="viewport"드롭 다운을 토글하는 버튼 (클래스가있는 버튼)에 추가해보세요 dropdown-toggle. https://getbootstrap.com/docs/4.1/components/dropdowns/#options를 참조 하십시오.
내 2 ¢ 빠른 글로벌 수정 :
// drop down in responsive table
(function () {
$('.table-responsive').on('shown.bs.dropdown', function (e) {
var $table = $(this),
$menu = $(e.target).find('.dropdown-menu'),
tableOffsetHeight = $table.offset().top + $table.height(),
menuOffsetHeight = $menu.offset().top + $menu.outerHeight(true);
if (menuOffsetHeight > tableOffsetHeight)
$table.css("padding-bottom", menuOffsetHeight - tableOffsetHeight);
});
$('.table-responsive').on('hide.bs.dropdown', function () {
$(this).css("padding-bottom", 0);
})
})();
설명 : '.table-responsive'안에 드롭 다운 메뉴가 표시되면 테이블의 높이를 계산하고 메뉴를 표시하는 데 필요한 높이와 일치하도록 확장 (패딩 포함)합니다. 메뉴는 모든 크기가 될 수 있습니다.
제 경우에는 '.table-responsive'클래스가있는 테이블이 아니라 래핑 div입니다.
<div class="table-responsive" style="overflow:auto;">
<table class="table table-hover table-bordered table-condensed server-sort">
따라서 스크립트의 $ table var는 실제로 div입니다! (단지 명확하게 ... 또는 아닙니다) :)
참고 : IDE에서 함수를 축소 할 수 있도록 함수로 래핑하지만 필수는 아닙니다!
이 속성을 정의하십시오. 행운을 빕니다!
data-toggle="dropdown" data-boundary="window"
권장되고 선택한 솔루션이 항상 최상의 솔루션은 아닙니다. 불행히도 링크드 인이 최근에 사용한 솔루션이며 상황에 따라 페이지에 여러 개의 스크롤바를 만듭니다.
제 방법은 약간 달랐습니다.
다른 div에 테이블 응답 div를 포함했습니다. 그런 다음 높이와 너비가 페이지 크기를 기반으로하도록 높이 100 %, 너비 : 100 %, 디스플레이 블록 및 위치 절대를 적용하고 오버플로를 숨김으로 설정했습니다.
그런 다음 테이블 반응 형 div에 최소 높이를 100 % 추가했습니다.
<div class="table_container"
style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;">
<div class="table-responsive" style="min-height:100%;">
아래의 작업 예제에서 볼 수 있듯이 스크롤 막대가 추가되지 않았고 재미있는 동작이 없으며 실제로 사용 비율로 표시됩니다. 화면 크기에 관계없이 작동해야합니다. 그러나 나는 이것을 테스트하지 않았습니다. 어떤 이유로 실패하면 100 %를 각각 100vh 및 100vw로 대체 할 수 있습니다.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="table_container" style="height: 100%; width: 100%; display: block;position: absolute;overflow: hidden;">
<div class="table-responsive" style="min-height:100%;">
<table class="table">
<thead>
<tr>
<th>Value1</th>
<th>Value2</th>
<th>Value3</th>
<th>Value4</th>
</tr>
</thead>
<tbody>
<tr>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>DATA</td>
</tr>
<tr>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li> </ul>
</div>
</td>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>
DATA
<div class="btn-group btn-group-rounded">
<button type="button" class="btn btn-default btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="border-radius:3px;">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li role="seperator" class="divider"></li>
<li><a href="#">Four</a></li>
</ul>
</div>
</td>
<td>DATA</td>
</tr>
</tbody>
</table>
</div>
</div>@Wazime 솔루션을 약간 정리했습니다. 일반적인 솔루션으로 훌륭하게 작동합니다.
$(document).on('shown.bs.dropdown', '.table-responsive', function (e) {
// The .dropdown container
var $container = $(e.target);
// Find the actual .dropdown-menu
var $dropdown = $container.find('.dropdown-menu');
if ($dropdown.length) {
// Save a reference to it, so we can find it after we've attached it to the body
$container.data('dropdown-menu', $dropdown);
} else {
$dropdown = $container.data('dropdown-menu');
}
$dropdown.css('top', ($container.offset().top + $container.outerHeight()) + 'px');
$dropdown.css('left', $container.offset().left + 'px');
$dropdown.css('position', 'absolute');
$dropdown.css('display', 'block');
$dropdown.appendTo('body');
});
$(document).on('hide.bs.dropdown', '.table-responsive', function (e) {
// Hide the dropdown menu bound to this button
$(e.target).data('dropdown-menu').css('display', 'none');
});
받아 들여진 대답과 @LeoCaseiro의 대답을 바탕으로 내 경우에 사용하게 된 것입니다.
@media (max-width: 767px) {
.table-responsive{
overflow-x: auto;
overflow-y: auto;
}
}
@media (min-width: 767px) {
.table-responsive{
overflow: inherit !important; /* Sometimes needs !important */
}
}
큰 화면에서는 드롭 다운이 반응 형 테이블 뒤에 숨겨지지 않고 작은 화면에서는 숨겨 지지만 어쨌든 모바일에는 스크롤 막대가 있으므로 괜찮습니다.
이것이 누군가를 돕기를 바랍니다.
Burebistaruler 응답은 ios8 (iphone4s)에서는 잘 작동하지만 이전에 작동하던 Android에서는 작동하지 않습니다. ios8 (iphone4s) 및 andoir에서 나를 위해 작동하는 것은 다음과 같습니다.
$('.table-responsive').on('show.bs.dropdown', function () {
$('.table-responsive').css( "min-height", "400px" );
});
$('.table-responsive').on('hide.bs.dropdown', function () {
$('.table-responsive').css( "min-height", "none" );
})
이것은 다른 사람에게 유용 할 수 있습니다. DatatablesJS를 사용하고 있습니다. 테이블의 현재 높이에 500px를 추가합니다. Datatables를 사용하면 테이블에서 10, 20 등의 페이지를 사용할 수 있기 때문에 이렇게합니다. 그래서 테이블의 높이를 다이너 믹하게 계산해야합니다.
드롭 다운이 표시되면 높이를 추가합니다.
드롭 다운이 숨겨지면 원래 테이블의 높이를 재설정합니다.
$(document).ready(function() {
$('.table-responsive .dropdown').on('shown.bs.dropdown', function () {
console.log($('#table-responsive-cliente').height() + 500)
$("#table-responsive-cliente").css("height",$('#table-responsive-cliente').height() + 500 );
})
$('.table-responsive .dropdown').on('hide.bs.dropdown', function () {
$("#table-responsive-cliente").css("height","auto");
})
})
그리고 HTML
<div class="table-responsive" id="table-responsive-cliente">
<table class="table-striped table-hover">
....
....
</table>
</div>
전에: 
드롭 다운이 표시된 후 : 
이것을 사용하십시오
.table-responsive {
overflow: inherit;
}
Chrome에서는 작동하지만 상속 속성이 지원되지 않으므로 IE10 또는 Edge에서는 작동하지 않습니다.
드롭 다운이 테이블 하단에 가까울 때 드롭 다운에 .dropup 클래스를 적용하여 직장에서이 문제를 해결했습니다. 여기에 이미지 설명 입력
이것은 v3와 다른 중단 점이 있기 때문에 Bootstrap 4에서 저에게 효과적이었습니다.
@media (min-width: 992px) {
.table-responsive {
overflow: inherit;
}
}
bootstrap.css 내부에서 다음 코드를 검색합니다.
.fixed-table-body {
overflow-x: auto;
overflow-y: auto;
height: 100%;
}
... 그리고 다음으로 업데이트 :
.fixed-table-body {
overflow-x: visible;
overflow-y: visible;
height: 100%;
}
제 경우에는 잘 작동합니다.
.table-responsive {
overflow-y: visible !important;
}
'Programing' 카테고리의 다른 글
| 스크립트를 실행할 수 없음 : 프로그램 실행을 계속하기에 메모리가 부족합니다. (0) | 2020.11.01 |
|---|---|
| Bootstrap 3-AJAX를 통해 모달 본문에 콘텐츠를로드하는 방법은 무엇입니까? (0) | 2020.11.01 |
| 인쇄 가능한 CSS를 어떻게 디버깅합니까? (0) | 2020.11.01 |
| Java에서 고유하고 짧은 파일 이름을 생성하는 가장 좋은 방법은 무엇입니까? (0) | 2020.11.01 |
| git로 파일을 어떻게 커밋 할 수 있습니까? (0) | 2020.11.01 |