I'm currently implementing jQuery UI's autocomplete in my clients webshop. The problem is: the element the autocomplete resides in, has a higher z-index then the z-index of the autocomplete. I tried setting the autocomplete z-index manually, but I've got the feeling that jQuery UI is overwriting this.
In fact my question is a duplicate of autocomplete suggestion list wrong z-index, how can i change?, but since there was no answer I thought about giving it another try.
Any help is welcome!
Martijn
Use z-index and !important
.ui-autocomplete { position: absolute; cursor: default;z-index:30 !important;}
While searching I found this topic (http://forum.jquery.com/topic/alternating-style-on-autocomplete). Apparently the only way to change the style of the autocomplete box is by doing it through javascript:
open: function(){
$(this).autocomplete('widget').css('z-index', 100);
return false;
},
Change the z-index of the parent Div, the autocomplete menu will have the div's z-index+1
In the CSS of jQuery UI:
.ui-front { z-index: 9999; }
Try this, you can manipulate the z-index on runtime or initializing
$('#autocomplete').autocomplete({
open: function(){
setTimeout(function () {
$('.ui-autocomplete').css('z-index', 99999999999999);
}, 0);
}
});
If you are able to enforce a higher z-index upon the autocomplete text input then this is the solution to your problem.
jQuery UI Autocomplete options list calculates its z-index value by taking the z-index of the text input it's being attached to and adds 1 to that value.
So you can give a z-index of 999 to the text input the autocomplete will have a z-index value of 1000
Taken from http://bugs.jqueryui.com/ticket/5489
<input type="text" class="autocomplete" style="z-index:999;" name="foo">
open: function () {
$(this).autocomplete('widget').zIndex(10);
}
also have a look at where you are appending the item to.
i came across this problem when i appended the autocomplete to an inner div, but when i appended the autocomplete to the body tag, the problem went away.
If you are using jquery-ui dialogs be careful to initialize the dialogs BEFORE the autocomplete or the autocomplete will be shown under the dialog.
Look at this answer jquery UI autocomplete inside a modal ui dialog - suggestions not showing?
I was facing same issue, it has been resolved by adding bellow styles:
.ui-autocomplete {
position: absolute;
cursor: default;
z-index:30!important;
}
.modal-dialog {
pointer-events:auto !important;
}
Give it a try anyway in your css (before script loading), not in firebug:
.ui-selectmenu-menu {
z-index:100;
}
In my case this works and creates z-indexes like : 100x (for example 1002)
add the following
.ui-autocomplete
{
z-index:100 !important;
}
in jquery-custom-ui.css file (or the minified one if you are using it).
For those developers that still use this plugin. Try this:
.acResults
{
z-index:1;
}
For me was enough with z-index:1, set the value you need in your case.
Related
The Materialize CSS Autocomplete opens in the upward position when at the lower end of the screen and it has a larger list to display, the problem is that the text input area with the blinking cursor gets covered and the user doesn't get the idea that he can type.
1) How can you force it to always go downwards? or, 2) How can you tell it to open above the input area without covering it when it decides to open in the upwards position? Ether of these solutions would be OK.
The closest solution I found is here (for the dropdown menu) and here, however these solutions look to me like jQuery which I am not familiar with (yet) and would need a plain JavaScript solution.
I use MaterializeCSS version 1.0.0 through the CDN.
Pictures: Autocomplete Closed and Autocomplete Open
hi the autocomplete is going upward because there is not space below but use can try this code
<style>
#autocomplete-options-509040f2-ba4c-72d4-413d-2e375f5c25f8
{
position: initial;
}
</style>
or you can add jquery to add height of the parent div when the auto complete has been click
$("#idofautocomplte").on("click", function () {
$("#parentDivId").css("height", "400px");
});
try use this style:
.autocomplete-content{
top: 46px !important;
max-height: 300px !important;
}
this keep autocomplete always downward
To me it is working very well
I am trying to use jquery autocomplete on one of my textfields, and everything seems to be ok except for the fact that the dropdown is transparent for some reason.
I am linking both jquery-ui.js and jquery-ui.css, both are version 1.11.4. It seems to be loading the values ok, the transparency of the dropdown seems to be the only problem. My js code is as simple as it can get:
$( "#edit_account" ).autocomplete({
source: dataArray
});
here is a screenshot of what it looks like:
I have looked around and have not found the same issue.
Thank you.
The issue with the above case was just the transparent background.
The list that is appended to the DOM is
<ul class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-autocomplete-custom"></ul>
with the CSS
.ui-autocomplete-custom {
background: #87ceeb;
z-index: 2;
}
This would add a color to the list, and z-index would ensure the element lies above another element.
.ui-autocomplete {
background-color: inherit;
}
It works for me.
I found this as I had an issue but it was specifically on an IOS mobile device
Whilst none of the above worked the following (a hybrid of the above did)
I think this will be useful should the above not work.
.ui-autocomplete {
background-color: #fff;
}
I was using animate.css while dynamically adding Input Fields and initializing Twitter Typeahead on the same. Also tried Jquery Autocomplete but no luck, the dropdowns showed weird behaviour and were always transparent. Removing the Animate.css class did the trick for me.
I'm trying to make the DropDownList with the JQuery-Chosen in it reacts like all others "normal" DropDownLists, matching the width equal to the largest option on the DDL.
I tried some different approaches to get this done, using css and JQuery, but all I tried became ugly.
At the official page of Chosen, http://harvesthq.github.io/chosen/options.html , it says:
The width of the Chosen select box. By default, Chosen attempts to match the width of the select box you are replacing. If your select is hidden when Chosen is instantiated, you must specify a width or the select will show up with a width of 0.
Any way to workaround this?
Workspace: http://jsfiddle.net/cdtn0ko7/
$('.chosen').chosen({
width: 'auto'
});
Try this out for size. :D
Fiddle
$('.chosen').chosen();
.form-control {
width: auto;
}
Not sure if I got the question right, but since you are using Bootstrap, you can just do something like this on the css:
.chosen-drop {
position: inherit !important;
}
I tried using this following code and it worked, check this out:
$('.chosen').chosen({
width: '100%'
});
I want to create a website where the user has to enter soma data. To make this as easy as possibble, i just show the main input elements and let a helper panel slide down if needed. As possible, these panels should be draggable (i am looking for javascript for that in the moment). My main problem is that when the panel slides down, the content at the top is shown first, but i want to slide down like shown below:
Is there any way to make this?
Thanks in advance.
Look at this JSFiddle.
This should show the principle to achieve this effect. You need a container div with overflow: hidden; and a child positioned to the bottom of the container div, then you can change the height of the container with jQuery to show/hide the content.
Also, to make the panels draggable, jQuery UI has a great function called draggable which works great. Give it a try.
Quick access: Fiddle: http://jsfiddle.net/VuPyL/1/ (updated) , BTW: I made it toggle-like.
Generally it seems to be only solve-able with animate,
if you dont want to have any wrapper element you would really like to use DOM's native property "scrollHeight" - that allows you to scroll always to bottom, in combination with a height toggle, it does exactly what you need.
Overflow: hidden dont have to be in the CSS - jQuery is adding it itself while toggling height.
This solution may seem a bit longer, but is more clear in what is actually happening :) :
HTML
<div id="helper-panel">
Here's
<br />
My
<br />
Content
</div>
<button id="show-helper">Show/hide Helper Panel</button>
CSS
#helper-panel{
height: 70px;
width: 375px;
position: relative;
overflow: hidden; /*optional - jQuery is adding it*/
display: none;
}
JS/jQuery
$('#show-helper').click(function(){
var $helper = $('#helper-panel');
$helper.animate({
height: "toggle"
},{
duration: 800,
progress: function(){
$helper.scrollTop( $helper[0].scrollHeight );
}
});
});
As suggested by #Andrew Pope to have item draggable/droppable it is best to use jQuery UI's draggables&droppables.
Also check sortable if you just want to change the order of the helper-menu items using drag&drop ;)
jQuery UI is not a standard part of jQuery - so dont forget to include it.
When using these it is good to wrap each draggable element. So the HTML would be:
<div id="helper-panel">
<div>Here's</div>
<div>My</div>
<div>Content</div>
</div>
And the jQuery (with jQuery UI):
$('#helper-panel').sortable() //make the items inside #helper-panel sortable
.disableSelection() //when sorting, you dont want selecting
.css('cursor','default'); //looks better with default cursor
I have a JQuery autocomplete search box which when displaying the search results in the dropdown window appears behind a JQuery dropdown menu directly below it (see image). I have tried increasing the z-index value of everything I can find in the CSS for the autocomplete search but it still doesn't fix the problem. What else should I be trying?
Fiddle link: http://jsfiddle.net/tonyyeb/LKDBh/18/
Thanks for everyone's contributions. I have since found a solution given to me by a forum user:
The autocomplete wrapper is being given a z-index of 1 by the jQuery library (hard-coded), >whereas the menu (via CSS) has a z-index of 100; easiest solution is to use -
.ui-autocomplete {
z-index: 100 !important;
}
I had a similar issue with a website recently and I've fixed this with the following method:
Make sure that you position both elements absolute OR relative (z-index only works when you use the 'position' css element. So you should either use position: absolute; or postion: relative;. That totally depends on your code/css. When you don't use the position element right now, you should probably use the position: relative; element since the position:absolute; element will position the referring element absolutely which will probably screw up your layout).
Then make sure you give the dropdown a z-index which is lower then the z-index for the menu.
Example
.search-dropdown{
position: relative; or position: absolute;
z-index: 1;
}
.jquery-menu{
position: relative; or position: absolute;
z-index: 2;
}
Now, you've added
position: relative;
z-index: 1;
to .ui-widget.
Remove it there and add it directly to the dropdown's css which appears when you enter something in the input field (Chrome/Firefox: Right Click on the dropdown and inspect element to see its class/ID).
Hope this helps!
A few months ago I had a similar problem, and searched the web.
The solution was in the CSS styling.
I added an inline class (ui-front) to the element that holds the autocomplete input element.
Not sure it will solve your problem, but it's an easy experiment.
Best of luck!
Question has been posted long time ago. Still, i also have a solution that works and not listed till now .
just add this on top of your page and problem should be solved.
.pac-container { position: absolute; cursor: default;z-index:3000 !important;}