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.
Related
I've been struggling with this for a while (I'm really not experienced with jQuery UI).
I'm trying to implement a jQuery UI that has a selectmenu next to some regular buttons. For some reason I can't understand, the selectmenu is mis-aligned; it's way higher up on the page than the buttons.
Here's what it looks like:
I'm not sure if this is a bug or not, it sure looks very wrong to me. I've been struggling for quite a while now but haven't been able to figure it out.
The markup is really very basic so I don't think it's very helpful to include it here., but it's all here: http://jsbin.com/afixij/10/edit?html,css,js,output. Widen the Output to see all three elements (the selectmenu, and the buttons Foo and Bar) on the same line.
You could just apply vertical-align:middle to the dropdown which is made up of spans to get the buttons aligned properly with the dropdown.
#speed-button{
vertical-align : middle;
}
Bin
It appears there is no option to provide a custom classname for select menu widget (It is bad if that is the case) as applying rule to a class would be much better. You could as well do:-
Apply a classname for the select
and in css provide a generic rule for any .menu-buttons
.menu-button + .ui-selectmenu-button{
vertical-align : middle;
}
Bin2
It might actually be easier to make the actual buttons (not menu) up by using
<button style="vertical-align: top"></button>
It can be inlined and creation of a custom class isn't required.
The solution I applied was to place the content I wished to be vertically aligned in a display: flex entry. For example:
<div style="display: flex; align-items: center;">
... other elements here
</div>
for more details on this display type, see this excellent discussion:
http://css-tricks.com/snippets/css/a-guide-to-flexbox/
To expand on the marked answer, there is a way to obtain the jquery object the selectmenu creates. Make sure you initialize the selectmenu first or it won't work.
$("#speed").selectmenu();
$("#speed").selectmenu("widget").addClass("fixAnnoyingSelectAlignmentClass");
CSS:
.fixAnnoyingSelectAlignmentClass
{
vertical-align: middle;
}
I am using the Jquery Isotope plugin with divs that have a back ground image and that are a particular size:
.frontpageimage {
height: 200px;
width: 200px;
background-image: url('tile1.jpg');
}
This works fine. But I want to throw something in there that randomly selects and image and makes it bigger then the others, so I created this:
$('#isotopecontainer .isotope-item:nth-child(2)').find('.frontpageimage').addClass('frontpageimagehigh');
.frontpageimagehigh {
height: 420px;
width: 200px;
}
(note: currently it is hard coded to select the 2nd image - will work on the randomisation later.)
Trouble is if I insert the above code above where Isotope is called it doesnt work.
If I insert the above code after Isotope is called, it works but the images overlap - ie: the image changes size after Isotope has rendered them.
Does anyone know how to perhaps add this to the existing isotope script? Or would anyone have any suggestions for me? Please let me know if clarification is needed.
Thanks
OK, so I found adding my own class to use instead of isotope-item and adjusting my JQuery as well as moving it back above the isotope call did the trick:
$('#isotopecontainer .item:nth-child(2)').find('.frontpageimage').addClass('frontpageimagehigh');
<div class="item isotope-item"...
Hope this helps someone. Please msg me if you need more info
I use the Google Maps API (v.3) to show a map with a couple of markers. I recently noticed that the control used to zoom the map is messed up (it wasn't always like this). I have no idea what the cause is.
Update
This post originally had a link to a page where you could view the issue, but the link is broken now, so I've removed it.
Your CSS messed it up. Remove max-width: 100%; in line 814 and zoom controls will look fine again. To avoid such bugs use more specific selectors in your CSS.
#myMap_canvas img {
max-width: none;
}
fixed it for me, but I also wanted to point out the comment on the question by #Ben, "This issue doesn't happen with Bootstrap if you use the is map_canvas as the map div id". He's right. I'm not using Bootstrap, but the problem started happening after I changed the div id.
Setting it back to map_canvas fixed it without the max-width change.
<div id="map_canvas"></div>
If you're using Bootstrap, just give it "google-maps" class. This worked for me.
As an alternative you might reset everything for the google map div as a kind of last-resort solution:
HTML:
<div class="mappins-map"><div>
CSS:
.mappins-map img {
max-width: none !important;
height: auto !important;
background: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
Just share #Max-Favilli answer:
With latest version of google maps api you need this:
<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>
Thanks to #Max-Favilli
https://stackoverflow.com/a/19339767/3070027
If you're a Twitter Bootstrap user you should add this line to your CSS:
.gmnoprint img { max-width: none; }
I had this problem as well and using
.google-maps img {
max-width: none;
}
didn't work. I eventually used
.google-maps img {
max-width: none !important;
}
and it worked like a charm.
If you're using Yahoo's Pure CSS, give your div the "google-maps" class like Bootstrap, and put this rule in your CSS:
.google-maps img {
max-width: none;
max-height: none;
}
As far as I can tell, Pure CSS has no way of fixing this issue on its own.
Those options you guys told me didn´t work for my website.
I use Bootstrap V3 and focussed on the functionality. The main reason was that i had given my map a different ID then the CSS file used to display the zoom bar with the yellow streetvieuw guy
I renamed map_canvas to mapholder and then it worked for me! Thanks anyways for the hints that i should look into the CSS files!
I tried all the above solutions, and others from other forums to no avail. it was really annoying because I have another non-Wordpress site where the code worked perfectly. (I was trying to display a Google map in a Wordpress page, but the zoom and Streetview controls were distorted).
The solution I did was to create a new html file (copy paste all the code into Notepad and name it xyz.html, save as type "all files"). Then upload/ftp it up to website, and setup a new Wordpress page and use an embed function. When editing the page go to the text editor (not the visual editor) and copy/type:
http://page URL width="900" height="950">
If you change the dimensions, remember to change it in both arguments above, or you get weird results.
There we go - might not be as clever as some other answers, but it worked for me! Evidence here: http://a-bc.co.uk/latitude-longitude-finder/
I love google docs but I find a blinking cursor very distracting. The new version of google docs doesn't obey the operating system setting for displaying a solid (non-blinking) cursor.
I see that the cursor is really just a div of class "kix-cursor-caret" where the display property is just from "none" to "inline" on some sort of javascript timer somewhere that causes the cursor to appear to blink.
Does anybody have any idea which javascript line/command is causing the css property to be changed and displaying the blinking. Any help is greatly appreciated.
Currently, this works for me with Stylebot in Chrome:
.kix-cursor {
-webkit-animation-iteration-count: 0;
}
Looks like this can actually be solved with CSS. This rule worked for me:
.kix-cursor-caret: inline !important;
I suppose you could add this to some kind of user stylesheet, but I've actually never made one before.
None of the current answers worked for me using Firefox + Stylish.
I found a working answer at userstyles.org [1]:
.docs-text-ui-cursor-blink {
animation-name: none;
}
[1] https://userstyles.org/styles/125112/google-docs-disable-cursor-blink
Ian's answer didn't work for me. I used this CSS:
.kix-cursor-caret: {
opacity: 1 !important
}
and put it in a user stylesheet managed by the Stylebot Chrome extension.
This stopped the madness in the current version of Google Docs.
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.