how to make chosen select go over parent div
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');
}
Is there a way to put Chosen jQuery Plugin always to front?
A nested div with a z-index will never be higher than an element outside of the parent. This article explains it well. what you could do is move the nested div outside and toggle the visibility when .ui-layout-toggler-north is clicked. See this JSFiddle
$('.ui-layout-toggler-north').click(function(){
$('#chosen_select').toggleClass('hide');
});
Note: I put a select element in the .ui-layout-north div as a placholder for the actual "chosen select" element.
Why does the Chosen Select DropDown goes under the footer DIV
Remove overflow: hidden from the bodyMainContentHolder. Your container is hiding the inner drop-down div.
http://jsfiddle.net/e62Wu/77/
How to make child appear on top of the parent inside the table tr?
I think you can use a wrapper class (.TooltipWrapper in the HTML) like the following way:
document.querySelectorAll('.SerialNumber').forEach(function(el){ el.addEventListener('mousemove',function(ele){ var x = ele.pageY; el.parentNode.querySelector('.TooltipWrapper').style.top = `${x}px`; });});.ResultsWrapper { width:150px; height:314px; text-align:center; overflow-x:hidden; overflow-y:scroll; border:1px solid black;}.ResultsTable { width:86px; border-collapse:collapse; table-layout:fixed;}.ResultsTable th, .ResultsTable td { border:1px solid black;}.ColumnSerialNo { width:81px;}
.SerialNumber { width: 80px; overflow: hidden;}
.TooltipWrapper { position: absolute; visibility: hidden; }.hasTooltip:hover .TooltipWrapper { visibility: visible; opacity: 1;}
.SerialNumberTooltip { display: block; --margin-top: -20px; margin-left: 85px; background-color: #FFF; border: 1px solid #CCC;}<div class="ResultsWrapper"> <table class="ResultsTable"> <thead> <tr> <th class="ColumnSerialNo">Serial Number</th> </tr> </thead> <tbody> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815206</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815206</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815207</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815207</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815208</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815208</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815209</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815209</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815210</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815210</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815211</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815211</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815212</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815212</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815213</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815213</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815214</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815214</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815215</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815215</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815216</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815216</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815217</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815217</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815218</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815218</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815219</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815219</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815220</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815220</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815221</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815221</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815222</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815222</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815223</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815223</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815224</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815224</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815225</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815225</div> </div> </div> </td> </tr> <tr> <td class="hasTooltip"> <div class="SerialNumberContainer"> <div class="SerialNumber">3119985815226</div> <div class="TooltipWrapper"> <div class="SerialNumberTooltip">3119985815226</div> </div> </div> </td> </tr> </tbody> </table></div>jQuery Chosen div falls behind Twitter Bootstrap accordion
The problem is because
.collapsehasoverflow: hidden. Obviously
absolutly positioned chosen dropdown will be clipped. – dfsq 2 days
ago
JQuery Chosen dropdown cut when appearing
jQuery UI modals have overflow with hidden value by default, that to prevent any over sized object to leave the box boundaries. It won't crop the native UI controls from the browser because it would break user experience rules, but for script generated UI, it will. Chosen works replacing the select input elements with some absolute positioned elements that will be cut with overflow hidden.
To prevent this issue, you simply overwrite the overflow hidden property from jQuery UI:
.ui-dialog{
overflow: visible !important;
}
I made a quick example here: http://jsfiddle.net/e57gase7/
If you try removing the CSS in the example, it would look like your problem.
Chosen dropdown list Z index issue with Bootstrap Modal
There is a CSS that is causing this problem. After the modal opens, there is a div called "Another Heading" which has a class called card. This card class has a default scss which is causing the problem;
.accordion > .card{
overflow: hidden;
}
The solution is just to write the CSS given below to override this CSS;
.accordion > .card{
overflow: inherit;
}
Related Topics
Choosing Efficient Selectors Based on Computational Complexity
Enforce Print Page Breaks with CSS
Css: Adding a Border Changes the Background-Color (!)
How to Remove the Underline of a Link in Chrome Using CSS
How to Set a Rotation Point for an Element in CSS
Columns in Bootstrap 3.0 Only Stacking Vertically
Compass: Generate Sprites, Plus Width/Height on Each Images in the Sprite
CSS Multiple Backgrounds Not Working on IE8
Animate Text Fill from Left to Right
Prefer Shrinking Over Growing in a Flex Container with Flex-Flow: Row Wrap
Small Space Between Box Shadow and Div When Alpha Set
Returning Generated CSS from an MVC5 or Web API 2 Controller Action
Mime Type Error When Adding a CSS File to Angular
How to Get Scale Works Cross-Browser in Center Position on Svg Elements with CSS