如何使选择选择去过父div [英] how to make chosen select go over parent div

问题描述

我创建了

当您选择position：absolute时，您实际上告诉它忽略

这是否回答了问题？

编辑：

绝对定位将从文档的其余部分的流中删除它，并将其视为不存在（它显示您所告诉的位置，但不会修改其他元素流）

请尝试添加如下所示的分隔符：

CSS： p>

  div.filler {
 height：30px; 
} 
  

HTML： b

  ... 
< div class =filler> 
< div class =content> 
< select class =chosen-select> 
 ... 
  

FIDDLE： http://jsfiddle.net/e62Wu/7/

另一个编辑：

试试这个：

JS Fiddle： http://jsfiddle.net/SinisterSystems/e62Wu/10/

添加CSS：

  .hider {
 position：static; 
} 
  

在HTML中添加ID ：

 < div id =dropperclass =heading> header 3< span class =glyphicon glyphicon-chevron- -right>< / div> 
  

添加jQuery if / else：

  if（$ this.attr（'id'）==='dropper'）{
 $（'。content'）。toggleClass hider'）。toggleClass（'content'）; 
} 
  

I created a jsFiddle which shows the chosen-select control being 'truncated' by it's parent div. And even though the overflow is set to hidden for the y-axis, it's showing the scroll bar anyway when clicking on the chosen-select control.

The height of this parent div is fixed and set to 200px, and needs to remain this way.

How can I make chosen-select go over the parent div when clicked upon?

EDIT: jsFiddle updated with more CSS. If I comment the div.content, it doesn't mess up the layout.

The chosen-select control is now on top of the 4th header. In this fiddle I can still select the chosen-select control, but in my application I can't.

Is there something I need to do for the header's positions?

EDIT2: jsFiddle. I just noticed that the chosen-select control stays on its place when heading 1/2 are sliding up. For the record, this doesn't happen in my application.

What does happen, is when you slide up the 3rd heading, chosen-select control is visible until it's slided up all the way. Unlike the other heading's, where the input's are slowly hiding.

解决方案

Simply add this CSS class:

Added border to show you the definition of your other box is staying fixed.

div.content { position:absolute; }

View Here: http://jsfiddle.net/SinisterSystems/e62Wu/3/

When you select position:absolute, you are effectively telling it to ignore the constraints of your fixed parent div and be able to bound outside the box.

Does this answer the question? I can elaborate further if you'd like.

EDIT:

absolute positioning will remove it from the flow of the rest of the document and treat it as if it didn't exist (it displays where you tell it to, but will not modify other element flow).

Try just adding a spacer like so:

CSS:

div.filler {
    height:30px;
}

HTML:

...
<div class="filler">
<div class="content">
     <select class="chosen-select">
     ...

FIDDLE: http://jsfiddle.net/e62Wu/7/

ANOTHER Edit:

Try this:

JS Fiddle: http://jsfiddle.net/SinisterSystems/e62Wu/10/

Add CSS:

.hider {
    position:static;
}

Add ID in HTML:

<div id="dropper" class="heading">header 3 <span class="glyphicon glyphicon-chevron-up pull-right"></div>

Add jQuery if/else:

    if($this.attr('id')==='dropper'){
       $('.content').toggleClass('hider').toggleClass('content');
    }

这篇关于如何使选择选择去过父div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！