부트스트랩 팝업 폭 변경
저는 부트스트랩 3을 이용하여 페이지를 디자인하고 있습니다.저는 팝오버를 같이 사용하려고 합니다.placement: right입력 요소에새로운 부트스트랩은 다음과 같은 기능을 제공합니다.form-control기본적으로 전폭 입력 요소가 있습니다.
HTML 코드는 다음과 같습니다.
<div class="row">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text"
data-toggle="popover" data-trigger="hover"
data-content="My popover content.My popover content.My popover content.My popover content." />
</div>
</div>
팝오버 폭이 너무 낮은 것 같아요. 왜냐하면 디브에 남아있는 폭이 아니기 때문입니다.저는 왼쪽에 입력 양식을, 오른쪽에 넓은 팝업을 원합니다.
주로 부트스트랩을 무시할 필요가 없는 해결책을 찾고 있습니다.
첨부된 JSFiddle.두 번째 입력 옵션.jsfiddle을 많이 사용하지 않아서 잘 모르겠지만 출력 상자의 크기를 늘려보면 결과를 볼 수 있습니다. 작은 화면에서는 볼 수도 없습니다.http://jsfiddle.net/Rqx8T/
CSS로 너비 늘리기
CSS를 사용하여 다음과 같이 팝오버의 너비를 늘릴 수 있습니다.
/* The max width is dependant on the container (more info below) */
.popover{
max-width: 100%; /* Max Width of the popover (depending on the container!) */
}
만약 이것이 효과가 없다면, 당신은 아마도 아래의 해결책을 원하고 당신의container요소(JSFiddle 보기)
트위터 부트스트랩 컨테이너
이 방법이 작동하지 않으면 컨테이너를 지정해야 할 수도 있습니다.
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});
추가 정보
팝업은 트리거되는 요소 내에 포함됩니다."전폭"을 확장하려면 - 컨테이너를 지정합니다.
// Contain the popover within the body NOT the element it was called in.
$('[data-toggle="popover"]').popover({
container: 'body'
});
JSFiddle
JSFiddle을 보고 사용해 봅니다.
JSFiddle: http://jsfiddle.net/xp1369g4/
저도 같은 문제가 있었습니다.답을 찾는 데 꽤 많은 시간을 들여서 나만의 해결책을 찾았습니다.머리글에 다음 텍스트 추가:
<style type="text/css"> .popover{ max-width:600px; } </style>
검색 텍스트 필드를 위한 더 넓은 팝업도 필요했습니다.저는 다음과 같은 자바스크립트 솔루션을 생각해 냈습니다(여기 커피에서).
$(".product-search-trigger")
.click(-> false) # cancel click on <a> tag
.popover
container: "body"
html: true
placement: "left"
title: "<strong>Product search</strong> enter number or name"
.on("show.bs.popover", -> $(this).data("bs.popover").tip().css(maxWidth: "600px"))
해결 방법은 맨 끝 줄에 있습니다.팝업이 표시되기 전에 max-width 옵션이 사용자 지정 값으로 설정됩니다.팁 요소에 사용자 정의 클래스를 추가할 수도 있습니다.
너비를 변경하려면 CSS를 사용할 수 있습니다.
고정사이즈 원티드
.popover{
width:200px;
height:250px;
}
원하는 최대 너비:
.popover{
max-width:200px;
height:250px;
}
jsfiddle: http://jsfiddle.net/Rqx8T/2/
팝오버 너비를 변경하려면 템플릿을 재정의할 수 있습니다.
$('#name').popover({
template: '<div class="popover" role="tooltip" style="width: 500px;"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"><div class="data-content"></div></div></div>'
})
자바스크립트 솔루션을 선호하는 사람들을 위한 것입니다.부트스트랩 4에서 팁()이 getTipElement()가 되어 nojQuery 객체를 반환합니다.따라서 부트스트랩 4에서 팝업의 너비를 변경하려면 다음을 사용할 수 있습니다.
}).on("show.bs.popover", function() {
$($(this).data("bs.popover").getTipElement()).css("max-width", "405px");
});
@EML이 modal window의 popover와 @2callled-chaos에서 보여준 코드에 대해 위에서 설명한 것을 이용하여 문제를 해결했습니다.
모드에 아이콘이 있는데 클릭하면 팝업이 나타납니다.
나의 HTML
<i title="" class="glyphicon glyphicon-info-sign" rel="popover" data-title="Several Lines" data-content="A - First line<br />B - Second line - Long line <br />C - Third Line - Long Long Long Line"></i>
마이스크립트
$('[rel=popover]').popover({
placement: 'bottom',
html: 'true',
container: '#name-of-modal-window .modal-body'
}).on("show.bs.popover", function () {
$(this).data("bs.popover").tip().css("max-width", "600px"); });
<div class="row" data-toggle="popover" data-trigger="hover"
data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text" />
</div>
</div>
기본적으로 입력 디브 대신 행 디브에 팝오버 코드를 넣었습니다.문제를 해결했습니다.
팝오버 내에서 속성 data-lot="body"를 사용할 수 있습니다.
<i class="fa fa-info-circle" data-container="body" data-toggle="popover"
data-placement="right" data-trigger="hover" title="Title"
data-content="Your content"></i>
다음은 호버로 커피를 마시는 비커피 스크립트 방법입니다.
$(".product-search-trigger").popover({
trigger: "hover",
container: "body",
html: true,
placement: "left"
}).on("show.bs.popover", function() {
return $(this).data("bs.popover").tip().css({
maxWidth: "300px"
});
});
});
여기에 최종 해결책은 없습니다:/ 이 문제를 "깨끗하게" 해결하는 방법에 대한 몇 가지 생각이 있습니다.
원래 JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/ 의 업데이트된 버전(jQuery 1.11 + Bootstrap 3.1.1 + class="col-md-" 대신 col-lass="col-lass-")
제안된 솔루션과 동일한 JSFiddle: http://jsfiddle.net/tkrotoff/N99h7/8/
. 지됩니다. 팝업이 상대적으로 위치합니다.<div class="col-*">한 +한에해러의이고오해오erseuee에이+e한해러의<div class="col-*">...
따라서 입력에 대한 팝업을 유지하고 싶다면(의미론적으로 더 나은) 다음과 같습니다.
.popover { position: fixed; }. 를 마다 이 을 을 이 를 마다.popover { width: 100%; }너비에 에 하기 에 ,<div class="col-*">.popover-content { white-space: nowrap; }가 : 의 에만 가 에만 의 가max-width
http://jsfiddle.net/tkrotoff/N99h7/11/ 참조
아마도 최근 브라우저를 사용하면 새로운 CSS 너비 값이 문제를 해결할 수 있을 것입니다, 저는 시도하지 않았습니다.
container: 'body'일반적으로 트릭을 수행하지만(위의 JustAnil의 답변 참조), 팝업이 모드인 경우 문제가 발생합니다.z-index포퍼가 부착되어 있을 때 모드 뒤에 배치합니다.body. 이것은 BS2 이슈 5014와 관련이 있는 것 같은데, 3.1.1에서 받고 있습니다.당신이 사용할 수 있는 것은 아닙니다.containerbody를 , 를 로 ,
$('#fubar').popover({
trigger : 'hover',
html : true,
dataContainer : '.modal-body',
...etc });
그리고 당신이 고칩니다.z-index문제가 있습니다. 하지만 팝오버 폭은 여전히 틀립니다.
내가 찾을 수 있는 유일한 해결책은container: 'body'CSS를 합니다.합니다 CSS를가다sdea가ds.
.popover {
max-width : 400px;
z-index : 1060;
}
CSS 솔루션 자체로는 작동하지 않을 것임을 유의하십시오.
부트스트랩 4 베타용으로 테스트된 솔루션 하나:
.popover {
min-width: 30em !important;
}
jQuery 문과 함께:
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'focus',
html: true,
placement: 'top'
})
,data-container="body"아니면container: "body"로.optionpopover({})객체는 실제로 트릭을 수행하지 않았습니다. [아마도 작업은 CSS 문과 함께만 수행됩니다.];
또한 Bootstrap 4 베타는 popover와 툴팁 위치 지정을 위해 popper.js를 사용합니다(이전에는 tether.js였습니다).
위에 표시된 방법으로 팝업의 너비를 조정할 수 있지만 부트스트랩이 보기 전에 먼저 내용의 너비를 정의하는 것이 가장 좋습니다.예를 들어, 테이블을 가지고 있었고, 그것의 폭을 정의한 다음, 부트스트랩은 그것에 맞게 팝오버를 만들었습니다. (때로는 부트스트랩이 폭을 결정하는 데 문제가 있을 때가 있고, 당신이 들어가서 부트스트랩의 손을 잡아야 합니다.)
사용했습니다(잘 작동됨):
.popover{
background-color:#b94a48;
border:none;
border-radius:unset;
min-width:100px;
width:100%;
max-width:400px;
overflow-wrap:break-word;
}
<label id="txtLbl">Overview</label> <a tabindex="0" class="btn btn-default" role="button" data-toggle="popover" data-placement="right" id="Pops" ></a>
<div id="popover-content" class="hide">
<div class="popovermenu">
Your content
</div>
</div>
결국 div "popover-content" width를 내가 원하는 숫자로 설정합니다.(다른 ID나 클래스는 작동하지 않습니다...) 행운을 빕니다!
#popover-content{
width: 600px;
}
팝업의 템플릿을 변경할 수 있습니다.중는ehdata-template- 기 - 기 설정합니다.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<span class="text-green" data-toggle="popover" data-placement="right" data-template="<div class="popover fade top in" style="max-width:none;" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>" data-trigger="manual" data-original-title="Some Title" data-content="<div>Some really long text and stuff. Some really long text and stuff. Some really long text and stuff. Some really long text and stuff.</div>" data-html="true" onclick="$(this).popover('show');">clickme</span>
</body>
</html>부트스트랩 4에서는 최대 너비를 재정의하여 템플릿 옵션을 쉽게 검토할 수 있습니다.
$('#myButton').popover({
placement: 'bottom',
html: true,
trigger: 'click',
template: '<div class="popover" style="max-width: 500px;" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
});
페이지에 팝업이 여러 개 있는 경우 이 방법이 좋습니다.
특정 팝오버의 폭을 변경하고 싶을 때 부트스트랩 5+용 솔루션을 찾았습니다.추가하기customClass나를 위해 일했습니다:
html:
<button class="btn btn-outline-secondary" id="popover-help" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
<i class="fa fa-question-circle"></i>
</button>
<div id="popover-help-container" style="display: none;">
<h4 style="text-align: left;"> How to:</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec condimentum ultricies elit, mattis egestas nisl suscipit ac. Duis ipsum augue, convallis sed nunc in, pellentesque luctus elit. Duis porttitor massa sed finibus rutrum. Nunc eu risus ultrices, volutpat leo eget, pulvinar eros. Donec rhoncus mattis sem, ac iaculis turpis semper non. Cras dapibus tristique risus, eu tincidunt elit condimentum fermentum. Nunc at dignissim ante, nec efficitur felis. Duis mauris magna, fermentum eu egestas vel, vehicula at est. Nullam dapibus nisi non purus pellentesque ultrices. Nulla pulvinar neque quis ipsum semper, a congue tortor aliquet. Suspendisse vulputate porttitor feugiat. Maecenas pretium porta mauris feugiat pellentesque. Integer tempus risus eu pretium consectetur.
Donec interdum, eros ac imperdiet pretium, magna risus laoreet tellus, in finibus justo sapien et lacus. Pellentesque placerat ligula at metus sollicitudin, et convallis nisi luctus. Vivamus non arcu vel ex pharetra auctor. Morbi efficitur sed turpis id finibus. Sed porttitor luctus quam sed laoreet. Nunc facilisis finibus aliquet. Maecenas pellentesque sem dui, sed blandit tortor placerat ut. Donec tempor ipsum in sem fermentum, vel vulputate magna egestas.</p>
</div>
JS:
<script type="text/javascript">
var popoverTriggerList = [].slice.call(document.querySelectorAll('[id="popover-help"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl,{
content: function() {
return $('#popover-help-container').html();
},
html: true,
placement: 'bottom',
sanitize: false,
customClass: 'popover-large'
});
})
</script>
CSS:
.popover-large {
max-width: 50%; /* Max Width of the popover (depending on the container!) */
}
::ng-deep .popover{
max-width: 600px !important;
}
내겐 잘 맞는 '앵글 14'
타이프스크립트 구성요소의 경우:
@Component({
selector: "your-component",
templateUrl: "your-template.component.html",
styles: [`
:host >>> .popover {
max-width: 100%;
}
`]
})
θ에서 θng-bootstrap간단히 할 수 있습니다.container="body"팝업을 트리거하는 컨트롤(버튼 또는 텍스트 상자 등)로 이동합니다. 파일음벌링서(서링n벌음 )에서style.css아니면style.scss) 파일을 추가해야 합니다..popover { max-width: 100% !important; }너비로 됩니다. 그런 다음에는 팝업의 내용이 내용 너비로 자동 설정됩니다.
변수의 에서는 의 을 할 할 $popover-max-width sostyle.scss 파일로 합니다.
$popover-max-width: 300px;
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";
부트스트랩 4 기본값 재지정에 대한 자세한 내용 https://getbootstrap.com/docs/4.0/getting-started/theming/ #http-graphics
작업을 수행해야 하는 data-slot="body"를 추가할 수도 있습니다.
<div class="row">
<div class="col-md-6">
<label for="name">Name:</label>
<input id="name" class="form-control" type="text"
data-toggle="popover" data-trigger="hover"
data-container="body"
data-content="My popover content.My popover content.My popover content.My popover content." />
</div>
</div>
시도해 보기:
var popover_size=($('.popover').css('width'));
var string=(popover_size).split('px');
alert("string"+string);
popover_size = ((parseInt(string[0])+350));
alert("ps"+popover_size);
$('.popover').css('width',parseInt(popover_size));
언급URL : https://stackoverflow.com/questions/19448902/changing-the-width-of-bootstrap-popover
'programing' 카테고리의 다른 글
| 카테고리별로 최신 4가지 아이템을 선택하는 방법은? (0) | 2023.09.07 |
|---|---|
| CSS로 배경 이미지에 크기를 설정하시겠습니까? (0) | 2023.09.07 |
| 팬더 데이터 프레임에서 없음을 NaN으로 바꿉니다. (0) | 2023.09.07 |
| jQuery.each() index? (0) | 2023.09.07 |
| sklearn plot 레이블이 있는 혼동 행렬 (0) | 2023.09.07 |