[英]jquery bootstrap accordion not expanding vertically fully
I'm using this example fiddle for nested bootstrap accordions. 我正在使用这个示例小提琴来嵌套引导手风琴。 Fiddle here 在这里小提琴
I'm using it in MVC/Razor and I'm having trouble getting child accordions to expand fully. 我在MVC / Razor中使用它,我很难让儿童手风琴完全展开。 They only open a tiny bit and need to scroll, which is not desired. 他们只打开一点点,需要滚动,这是不希望的。
Here's my pertinent Razor snippet: (FYI, the various style="height:150px;"
attributes I added to try to get the accordions to expand but they only expanded the area around the accordions, not the accordions themselves.) 这是我的相关Razor片段:(仅供参考,各种style="height:150px;"
我添加的属性试图让手风琴扩展,但他们只扩展了手风琴周围的区域,而不是手风琴本身。)
<style>
.accordion-expand-holder {
margin: 10px 0;
}
/*.accordion-expand-holder .open, .accordion-expand-holder .close {
margin: 0 10px 0 0;
}*/
.ui-accordion-content {
height: auto;
}
</style>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.js"></script>
<div class="accordion-expand-holder">
<button type="button" class="open">Expand all</button>
<button type="button" class="close">Collapse all</button>
</div>
@foreach (var item in Model)
{
<div class="accordion">
<h3>@(item.Name)</h3>
<div>
<div class="text-nowrap">
<button type="button" onclick="javascript:DeleteUserStory('@(item.Id)');">Delete</button>
<button type="button" onclick="javascript:EditUserStory('@(item.Id)');">Edit</button>
</div>
<div>Description: @(item.Description)</div>
<div>Notes: @(item.Notes)</div>
<div class="accordion" style="height:150px;">
<h3>Tasks</h3>
<ul style="height:150px;">
@if (item.Tasks != null)
{
if (item.Tasks.Count > 0)
{
foreach (var task in item.Tasks)
{
<li style="height:150px;">
<button type="button" onclick="javascript:DeleteTask('@(task.Id)');">Delete</button>
<button type="button" onclick="javascript:EditTask('@(task.Id)');">Edit</button>
<br />
<a href="#">@(task.Name)</a>
<br />
Description: @(task.Description)
</li>
}
}
else
{
<li>No Tasks Assigned.</li>
}
}
</ul>
</div>
<br />
<button type="button" onclick="javascript:ShowTaskModalForAdd('@(item.Id)');">Add New Task</button>
</div>
</div>
}
<script>
// Accordion - Expand All #01
$(function () {
$(".accordion").accordion({
collapsible: true,
active: false,
autoHeight: true,
});
var icons = $(".accordion").accordion("option", "icons");
$('.open').click(function () {
$('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
'aria-selected': 'true',
'tabindex': '0'
});
$('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
$('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
'aria-expanded': 'true',
'aria-hidden': 'false'
}).show();
$(this).attr("disabled", "disabled");
$('.close').removeAttr("disabled");
});
$('.close').click(function () {
$('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
'aria-selected': 'false',
'tabindex': '-1'
});
$('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
'aria-expanded': 'false',
'aria-hidden': 'true'
}).hide();
$(this).attr("disabled", "disabled");
$('.open').removeAttr("disabled");
});
$('.ui-accordion-header').click(function () {
$('.open').removeAttr("disabled");
$('.close').removeAttr("disabled");
});
});
//$("#accordion").accordion();
Looks like your issue is the autoHeight
option. 看起来您的问题是autoHeight
选项。
You can either set it false as such: autoHeight: false
, 您可以将其设置为false: autoHeight: false
,
-OR- -要么-
you can use autoHeight: true,
and add heightStyle: "content",
afterwards. 你可以使用autoHeight: true,
然后添加heightStyle: "content",
。
Source: JQuery Accordion Auto Height issue 资料来源: JQuery Accordion Auto Height问题
Needed this: 需要这个:
$(".accordion").accordion({
collapsible: true,
active: false,
autoHeight: false,
heightStyle: "content" //<- this fixes the problem with the squished height
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.