i would like the tab to adjust to the height of the content within it when calender pops up within the tab. here is my code. Thanks!
当日历在选项卡中弹出时,我希望选项卡能够调整其中内容的高度。这是我的代码。谢谢!
<script>
$(function(){
$( "#accordion-1" ).accordion({collapsible: true,
heightstyle: "content"});
$("#enable").click(function(){
$("#accordion-1").accordion("option", "disabled", false);
$("#accordion-1").accordion("option", "active", 2);
});
$("#disable").click(function(){
$("#accordion-1").accordion("option", "disabled", true);
});
});
$(function() {
$( "#datepicker-1" ).datepicker();
});
$(function() {
$( "#datepicker-2" ).datepicker();
});
</script>
<div id="accordion-1" >
<h3>Tab 1</h3>
<div>
Departure City: <input id="dep"></input>
Arrival City: <input id="arr"></input>
</div>
<h3>Tab 2</h3>
<div id="select_date" >
Onward Departure Date: <input id="datepicker-1"></input>
Return Departure Date: <input id="datepicker-2"></input>
</div>
<h3>Tab 3</h3>
<div>
Traveler 1: <input id="name1"></input>
Traveler 2: <input id="name2"></input>
</div>
</div>
when the input section within an accordion style tab is clicked, a date picker pops up to select a date. I would like the tab to adjust to the content height to accommodate the date picker. Any ideas on how to get this done? thanks in advance
当单击手风琴样式选项卡中的输入部分时,会弹出日期选择器以选择日期。我希望选项卡调整到内容高度以适应日期选择器。有关如何完成这项工作的任何想法?提前致谢
1 个解决方案
#1
1
not sure what you have but if you don't specify a height
css property, then it will always be the size it needs to fit the content
不确定你有什么,但如果你没有指定高度css属性,那么它将始终是适合内容所需的大小
heres a working fiddle. however as the comment says (Adam), if the content is out of flow this will not work.
这是一个工作小提琴。然而正如评论所说(亚当),如果内容不在流,这将无效。
Update
更新
From what you've provided, I can see what the problem is. I think the date picker has a position:absolute
which means that it doesn't care what div it's inside of, it will display on top without expanding its parent.
根据您提供的内容,我可以看到问题所在。我认为日期选择器有一个位置:绝对意味着它不关心它内部的div,它将显示在顶部而不扩展其父级。
What I would suggest is on the focusin and focusout events of those inputs, to manually expand the tab height, but this will force you to give a specific height for the tab.
我建议使用这些输入的focusin和focusout事件,手动扩展选项卡高度,但这会强制您为选项卡指定特定高度。
heres a fiddle for the first option
这是第一种选择的小提琴
Another alternative is to create a div that is about the same size as the date picker inside of your tab with a display:none
and on focus in/out of the input you can show/hide your div. This div would be completely empty (so nothing will show up when you 'show' it) but it will give the impression that your tab is "expanding".
另一种方法是使用display:none创建一个与选项卡内部日期选择器大小相同的div,并且可以在输入的焦点输入/输出中显示/隐藏div。这个div将是完全空的(所以当你'显示'时,什么都不会显示),但它会给你的标签“扩展”的印象。
heres a fiddle for the second option
继承人是第二种选择的小提琴
also, I suggest using focusin/focusout because I believe the date picker appears/disappears on those events
另外,我建议使用focusin / focusout因为我相信日期选择器在这些事件上出现/消失
update 2
更新2
第三次DEMO
there is a third way to do this as well. I inspected the date picker recently and it has a unique id. Since the date picker only appears on the focusin event of an input, and disappears on focusout, there should theoretically only be 1 date picker at a time (so unique id will be maintained).
还有第三种方法可以做到这一点。我最近检查了日期选择器,它有一个唯一的ID。由于日期选择器仅出现在输入的focusin事件上,并且在焦点输出时消失,理论上理论上一次只能有1个日期选择器(因此将保留唯一ID)。
What you can do is get the date picker by id and save it to a variable. Then remove the date picker that appeared initially, and append it to the div you have that wraps the 2 date inputs. Finally, you can set its position to static so that it will automatically adjust the height of your div.
您可以做的是通过id获取日期选择器并将其保存到变量中。然后删除最初出现的日期选择器,并将其附加到包含2个日期输入的div。最后,您可以将其位置设置为静态,以便它自动调整div的高度。
var datepicker = $('#ui-datepicker-div');
$('#ui-datepicker-div').remove();
$('#select_date').append(datepicker);
$('#ui-datepicker-div').css('position', 'static');
#1
1
not sure what you have but if you don't specify a height
css property, then it will always be the size it needs to fit the content
不确定你有什么,但如果你没有指定高度css属性,那么它将始终是适合内容所需的大小
heres a working fiddle. however as the comment says (Adam), if the content is out of flow this will not work.
这是一个工作小提琴。然而正如评论所说(亚当),如果内容不在流,这将无效。
Update
更新
From what you've provided, I can see what the problem is. I think the date picker has a position:absolute
which means that it doesn't care what div it's inside of, it will display on top without expanding its parent.
根据您提供的内容,我可以看到问题所在。我认为日期选择器有一个位置:绝对意味着它不关心它内部的div,它将显示在顶部而不扩展其父级。
What I would suggest is on the focusin and focusout events of those inputs, to manually expand the tab height, but this will force you to give a specific height for the tab.
我建议使用这些输入的focusin和focusout事件,手动扩展选项卡高度,但这会强制您为选项卡指定特定高度。
heres a fiddle for the first option
这是第一种选择的小提琴
Another alternative is to create a div that is about the same size as the date picker inside of your tab with a display:none
and on focus in/out of the input you can show/hide your div. This div would be completely empty (so nothing will show up when you 'show' it) but it will give the impression that your tab is "expanding".
另一种方法是使用display:none创建一个与选项卡内部日期选择器大小相同的div,并且可以在输入的焦点输入/输出中显示/隐藏div。这个div将是完全空的(所以当你'显示'时,什么都不会显示),但它会给你的标签“扩展”的印象。
heres a fiddle for the second option
继承人是第二种选择的小提琴
also, I suggest using focusin/focusout because I believe the date picker appears/disappears on those events
另外,我建议使用focusin / focusout因为我相信日期选择器在这些事件上出现/消失
update 2
更新2
第三次DEMO
there is a third way to do this as well. I inspected the date picker recently and it has a unique id. Since the date picker only appears on the focusin event of an input, and disappears on focusout, there should theoretically only be 1 date picker at a time (so unique id will be maintained).
还有第三种方法可以做到这一点。我最近检查了日期选择器,它有一个唯一的ID。由于日期选择器仅出现在输入的focusin事件上,并且在焦点输出时消失,理论上理论上一次只能有1个日期选择器(因此将保留唯一ID)。
What you can do is get the date picker by id and save it to a variable. Then remove the date picker that appeared initially, and append it to the div you have that wraps the 2 date inputs. Finally, you can set its position to static so that it will automatically adjust the height of your div.
您可以做的是通过id获取日期选择器并将其保存到变量中。然后删除最初出现的日期选择器,并将其附加到包含2个日期输入的div。最后,您可以将其位置设置为静态,以便它自动调整div的高度。
var datepicker = $('#ui-datepicker-div');
$('#ui-datepicker-div').remove();
$('#select_date').append(datepicker);
$('#ui-datepicker-div').css('position', 'static');