JQuery autocomplete appears behind JQuery menu - javascript

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

Related

Bring element on top of modal backdrop

I am trying to build a guide functionality for my application. As a part of this functionality, it is expected that a tooltip is shown next to the target HTML element and this target element is brought on top of modal backdrop that appears together with the tooltip.
The problem is that after significant effort I still cannot make HTML element show on top of the modal backdrop. Simple tricks like z-index: 10000 !important; position: relative do not help. Also changing parent elements' z-index by disabling it in Firefox Developer Tools (and leaving z-index: 10000 !important; position: relative for the target element that is supposed to be on top of the modal backdrop) does not help.
HTML of the application is quite complex with many elements. But I want to be able to "highlight" any given element by bringing it on top of the modal overlay knowing only its id. Is there an easy way to do that with JavaScript/React?
Hopefully there is a way to do this without modifying the DOM, which would be highly preferable.
UPD: Code demo - press hat button to show guide/tooltips
Remove the z-index from .form-wrapper and apply relative position with z-index for the targetted elements.
I did this by adding
d.classList.add("tooltip-active-element");
to App.js#77
Also added the class to the css file:
.tooltip-active-element {
position: relative;
z-index: 2;
background: red;
}
and removed the z-index value from other classes, the key one being the .form-wrapper class.
Working demo: https://codesandbox.io/s/tooltip-z-index-forked-fg9pt

How to make overflow-y scroll without changing overflow-x to auto?

I know this is a duplicated question.
And below link is the answer the most nearest with my question that I've found.
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
In this link, the W3C spec says:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as
their specified values, except that some combinations with ‘visible’
are not possible: if one is specified as ‘visible’ and the other is
‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’. The computed
value of ‘overflow’ is equal to the computed value of ‘overflow-x’ if
‘overflow-y’ is the same; otherwise it is the pair of computed values
of ‘overflow-x’ and ‘overflow-y’.
What I want to know is, are there any new solution of this.
The problem of mine is in this fiddle.
I made 'sidebar' class of 'BootStrap' simple in a fiddle of mine.
overflow-x: visible;
//overflow-y: scroll;
You can see that I commented out 'overflow-y: scroll' of class '.panel' in css part.
In this case, 'hover' will work but 'scroll' won't.
When if I clear that comment out, 'hover' won't work but 'scroll' will.
What I wanna see is, 'hover' and 'scroll' working together.
Does anyone have any ways or ideas to fix this?
Or are there still no way to solve this problem?
Your code is working you just can't see hover because of the width you set to that block is 50px also if you set position:absolute in hover you can see that hover effect but it overlap the child item. so one thing i want to know you want same width or you just set for a demo purpose.
You could use jQuery so you will change the .panel overflow depending on the event.
Absolutely you will need a little of css hacks also,
See the updated JSfiddle.
I liked this question.
So, I have created a fiddle here: https://jsfiddle.net/n4tvvora/4/
Its comes pretty close to what you need (I think). Let me know if it does NOT suit your requirement. We can make it better.
Code highlights:
.panel:hover ul.list:first-child {
position: absolute;
display: inline-block;
height: 100%;
width: auto;
overflow-y: auto;
overflow-x: hidden;
}
.panel ul.list:first-child {
display: block;
}
I've solved this by adding 'div' between 'div' and 'ul'.
And here's my final fiddle which works almost fitting with my intent.
<div class="panel"> // added div
I hope this working will be helpful for anybody. :)

Alternative to display:none using CSS and Javascript

I have a requirement of keeping a div hidden and make it visible when user performs an action.
But, due to dependencies on an external script, I cannot use style="display:none" for my div.
Therefore, to meet the requirement, I am thinking of using style="visibility:hidden,height:0" for my div and when user performs an action, make it visible using jquery by changing the style to "visibility:visible,height:auto" which I have tested and working fine.
Is there any issue with the approach I have used when using in computers and mobiles? Whether any browser prevent content on a div which has height 0?
I have seen some posts in this forum suggesting to use of "position:absolute" along with height changes to meet this objective. So, is it needed to change the div to absolute or my approach of changing the visibility and height is fine?
You could move your element outside the visible range by adding a CSS class:
.custom-hidden {
position: absolute;
top: -5000px; //use !important if needed
}
You solution is suitable, else you can still try
1) opacity: 0;
2) position: absolute;
left: -9000px;
3) transform: scale(0)

TinyMCE color picker dropdown appears off-screen

This is an issue on Firefox and IE so far that I've tested; the problem does not exist on Chrome.
I'm including two TinyMCE editors on a page with one partially off-screen to start. When I select the color picker dropdown option from the toolbar on the first TinyMCE instance, the dropdown appears where it should. But if I scroll down and select the color picker dropdown in the second instance, that dropdown appears way below the editor and typically off the page.
You can see this in action here: http://jsfiddle.net/nm6wtca3/
Without removing the html, body CSS, what can I do to have the color picker always appear in the correct position?
I've traced the problem down to setting CSS on the html, body elements.
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
The dropdown div has CSS applied to it that is auto-calculated by TinyMCE. It looks something like this:
z-index: 65535;
left: 641.467px;
top: 633px;
width: 162px;
height: 105px;
How it appears in FF (sometimes way worse):
How it appears in Chrome (how it should look):
You did say you don't want to remove any CSS from the html,body, but you didn't say anything about adding to it! This solution is based on the assumption that you can add to the html,body
Solution
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
position: relative; /* Line added */
}
JSFiddle Example
I hope this helps. In all reality, you really only need to apply position: relative; to the body like so body { position: relative; }
I'm not super familiar with tinymce's colorpicker, but I can see the issue, and I can replicate it reliably: your problem occurs when you have a picker open, and then you scroll. I can replicate this in chrome too. Here's a video.
When I look at the DOM, I see that tinyMCE has created two absolute-positioned divs at the end of document.body, one for each picker. When you open one, their position is updated to reflect the location of the toolbar-button at the time you clicked it, but it never gets updated when you scroll!
So, how to solve this? Well, there are a few possibilities:
Option 1: it looks like tinyMCE provides a method to bind a control to an event (here). With this, you could bind a callback to 'scroll' that repositions the box...
Huh, now that I think of it, you could simply close any open colorpickers whenever a user scrolls ... kinda feels like a cop-out but there's no denying it has the best R.O.I. ;) We'll call that Option 2!
Option 3: depending on the implementation of the colorpicker, you may be able to override where in the DOM those divs get rendered. The API method I saw that looked the most promising is here. Once you have the div inside a relative-positioned parent, you'd also have to make the colorpicker's positioning algorithm smart enough to look in the right place for x and y offset ...when I tried this by just moving the element and mashing in some css by hand in chrome-console, the algorithm still computed x and y offsets based on doc.body, so depending on where you were scrolled at click-time, everything would be out of position
It looks like this issue might be troubling other people as well... maybe they've found a solution but haven't posted anything about it?
I hope this is enough info to get you past the problem... Let me know if you have any questions!
It looks like the problem is caused by overflow-x: hidden;
It may not be the answer you want but removing that or moving it to a page wrapper will solve your problem.
Working Example
html, body {
width: 100%;
height: 100%;
padding:0;
margin:0;
}
#pagewrapper{
overflow-x: hidden;
}
Another option would be to force repositioning on scroll, but honestly this is overkill... I strongly recommend fixing the css instead.
Another working example
$('body').scroll(posfix); // when the body scrolls
$('#mceu_10').click(posfix); // when you click the top font color button
$('#mceu_35').click(posfix); // when you click the bottom font color button
function posfix() {
setTimeout(function () { // hack way to ensure it fires after the menu is shown
$('#mceu_51').css({
top: $('#mceu_10').offset().top + $('#mceu_10').height(), // set top/left based on button's position
left: $('#mceu_10').offset().left + $('#mceu_10').width() / 2
});
$('#mceu_52').css({
top: $('#mceu_35').offset().top + $('#mceu_35').height(),
left: $('#mceu_35').offset().left + $('#mceu_35').width() / 2
});
}, 1);
}
it works on firefox, and Internet Explorer fine
just remove this css code
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
Please take a look at this:
html,
body {
width: auto;
height: auto;
overflow-x: hidden;
}
You can simply set body width and height to auto, then there won't be any need to use position and you don't have to remove anything. I think you do not need to use height: 100% since it will be auto-calculated by TinyMCE. i hope it helped.
Update
Look at the screen shot from chrome and its same in firefox. And i didn't remove any css but just changed..and by putting 100% in css the output will be like :-
Please check this one with auto but not 100%..thank you

Why is only a small piece of this div visible?

I am running a test javascript/CSS app and there is a div that is exhibiting very strange behavior. I can't for the life of me figure out what is going on.
Point your browsers at http://korhal.andrewmao.net:9294/, and check out the div.payment (div with class payment) in the DOM.
This div contains an image and some text, but none of it's visible except for a tiny end piece of the text which shows up on Chrome and FF but not IE9. I haven't styled this part of the DOM yet but I can't even figure out why it is completely invisible. Examining the applied CSS doesn't seem to turn up any z-index, transparency, or hidden issues. Any suggestions?
My apologies, this code is hard to gist and this link may be subject to change.
Since ur .background is position fixed it will come on top , so u have to add
position:relative to div.payment
Use this
.payment img {
float: left;
position: relative;
z-index: 1;
}
and
.payment p {
float: left;
position: relative;
z-index: 1;
}

Categories

Resources