如何自动调整选项卡的高度以适合内容

时间:2015-04-09 18:27:29

标签: javascript jquery html css

我希望当标签在标签中弹出时,标签会调整到其中内容的高度。这是我的代码。谢谢!

  <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>

单击手风琴样式选项卡中的输入部分时,会弹出日期选择器以选择日期。我希望选项卡调整到内容高度以适应日期选择器。有关如何完成这项工作的任何想法?提前谢谢

1 个答案:

答案 0 :(得分:1)

不确定您拥有什么,但如果您没有指定height css属性,那么它将始终是适合内容所需的大小

heres一个工作小提琴。然而正如评论所说(亚当),如果内容不在流,这将无效。

<强> 更新

根据您提供的内容,我可以看到问题所在。我认为日期选择器有一个position:absolute,这意味着它并不关心它内部的内容,它会显示在顶部,而不会扩展其父级。

我建议使用这些输入的focusin和focusout事件,手动扩展标签高度,但这会强制您为标签指定特定高度。

heres第一个选项的小提琴

另一种方法是使用display:none创建一个与选项卡内部日期选择器大小相同的div,并在输入的焦点输入/输出中显示/隐藏div。这个div将是完全空的(所以当你显示它时,什么都不会出现),但它会让人觉得你的标签是&#34;扩展&#34;。

heres第二个选项的小提琴

另外,我建议使用focusin / focusout,因为我相信日期选择器会在这些事件中出现/消失

更新2

Third DEMO

还有第三种方法可以做到这一点。我最近检查了日期选择器,它有一个唯一的ID。由于日期选择器仅出现在输入的focusin事件上,并且在焦点输出时消失,理论上理论上一次只能有1个日期选择器(因此将保留唯一ID)。

您可以做的是通过id获取日期选择器并将其保存到变量中。然后删除最初出现的日期选择器,并将其附加到包含2个日期输入的div。最后,您可以将其位置设置为静态,以便它自动调整div的高度。

var datepicker = $('#ui-datepicker-div');
$('#ui-datepicker-div').remove();
$('#select_date').append(datepicker);
$('#ui-datepicker-div').css('position', 'static');