NOTE: This is the intrinsic (built-in) autocomplete that comes with Firefox. I remember the fix having something to with a setting in Firefox's about:config page if that helps.
I had a fix for this involving changing a configuration setting but now I forget how to do it. This is it:
What is it? It's a simple about:config fix, perhaps something to do with acceleration of some kind. Thanks.
Based on the picture, I would assume that the container element of the autocomplete field needs to be set to position:relative. That is the best guess I can give without code.
Originally the question was tagged css and did not mention that autocomplete is the built-in one. Keeping answer for the JavaScript + CSS (e.g. jQuery UI autocomplete) case for future visitors.
Built-in autocomplete
Page contents (even CSS and JavaScript) do not influence the built-in autocomplete functionality, AFAIK. Page author can use just the autocomplete attribute in HTML5 and the requestAutocomplete API in Chromium.
The only thing that could influence the built-in autocomplete is browser settings. Bad suggestions list position is definitely a browser bug. You are just looking for a work-around, for a configuration that does not trigger the bug. Firefox configuration is accessible in about:config, so you can be right that you need to change something there.
The only thing that came to my mind regarding UI display is hardware acceleration, which tends to cause trouble. That can be tweaked (and turned off) via about:config. Search for layers. You said that it does not solve your problem; I’m stucked as I have no other idea.
JavaScript autocomplete
The issue is probably caused by absolute positioning and bad choice of the coordinate system in this case. For more info see containing block and absolute positioning in the spec.
Try changing the position property of the enclosing box to relative.
#mailinput {
position: relative;
}
#mailinput #mail_autocomplete {
position: absolute;
top: 1.5em;
}
Related
I actually acomplished what I wanted to do: hiding some webkit pseudo-elements from the page when I want to print it, the code looks like below.
The problem is that I didnt learn anything from my research to do tha and I couldn't find any documentation about it, and every answer I saw about this topic only shows the code, without any further explanation.
::-webkit-resizer,
::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
Some sources:
https://developer.mozilla.org/en-US/docs/Web/CSS/WebKit_Extensions
This one show some extensions, but the callendar one is not listed here and I wasn't able to find elsewhere.
https://gist.github.com/afabbro/3759334
This gist has a lot of those pseudo elements, classes or properties, but the guy who did it didnt explain how he have acomplished that, and those doenst show on my dev tools.
Use pseudo classes for selecting webkit pseudo elements
This guy talks about the shadow-dom, I didnt heard of it before, but on my research I couldn't understand how it would help-me.
Some similar answers: 6195329, 11418289, 17340038, 15530850, 53483852
Also visited the wikipedia article and this site: https://webkit.org/
I really want to understand the concept behind this webkit things and any help would be appeciated.
To be more specific: if any time in the future I want to override a component, how can I know what pseudo-element has being aplied on an compnonet given the browser?
The best way to know which pseudo-elements you can work with is by reading specifications (like W3C standards) and realiable docs and resources (like MDN). If you can't find a particular pseudo-element there (or if it's only referred with a vendor prefix), you should probably avoid using it.
It seems ::-webkit-calendar-picker-indicator is supported by Blink and WebKit (follow the links for little pieces of information), but since it's poorly documented and also non-standard I would refrain from adopting it at all.
There is no specific documentation for pseudo-elements, but I finally could find, while tinkering on the Chrome Dev Tools' preferences a setting that shows the "Shadow-Dom" from the user-agent.
Go to "Preferences" and scroll to the "Elements" section, where there is a oprtion for that:
I have made a small popup window that shows up at the bottom of the page (like a recommendation system). But whenever I embed my script to any of the client's website, it disturbs my CSS. Like the CSS which is on the client's website overshadows my CSS and this causes me to fix my CSS for each client. Is there a fix that I will have to install on my code?
Please help
Thanks
This is due to overlapping CSS properties of client's and your newly developed. I recommend you to inspect element of google chrome's very nice feature. You can individually identify your overlapping properties. If this is too much complex. Like James commented give a new id to your pop-up menu, which will separate your pop-up CSS from all other components on your web page
On of the ways I heard about is Shadow Dom, and in this article it describe it and at the beginning of the article he listed the problem in brief: http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
But there is a fundamental problem that makes widgets built out of
HTML and JavaScript hard to use: The DOM tree inside a widget isn’t
encapsulated from the rest of the page. This lack of encapsulation
means your document stylesheet might accidentally apply to parts
inside the widget; your JavaScript might accidentally modify parts
inside the widget; your IDs might overlap with IDs inside the widget;
and so on.
Else which I did my self long time ago is: to name all your ids, classes with a special names for example 'mywebsite.myclass' this may minimize the issue. and I saw this way is used by many bookmarklets which import html,css and javascript to user opened page.
"All browsers" is a lot of browsers :P
CSS is going to get interesting soon thanks to shadow DOM. You are going to be able to create a web component that is completely isolated, DOM and CSS, from the rest of the document, which is exactly what you want.
Obviously, it's not in place in al browsers (only in Chrome at the time of me writing this). Meanwhile, this is what I would do:
Use shadow DOM components if available
Anyway, manually name-space everything you use (CSS classes, JavaScript, etc)
Try to use custom elements for everything. (that way, there's less risk of your e.g. <h2>s being styled by outer CSSs)
As a last resource, use very specific selectors (look up CSS specificity), and use !important. Just to be clear: never do this routinely!
Most of that stuff will fail for some value of "All browsers". You'll have to compromise somewhere, I guess.
Yes you can reset your div styles.
Something like this:
div.your-popup * {
/* your reset */
}
And try to set !important to styles or put them inline.
In addition create unique class names that no one can override it.
P.S. http://www.cssreset.com/
I am building out a page for work that has a section where the content needs to change dynamically on button(s) click. I know of several different ways to accomplish this but all of them involve javascript of some kind or another. My capabilities don't currently include writing script for this site so I am researching to see if there is a way to do this with JUST css before I inform my project manager that one of our javascript guys will have to handle it. So, anyone know of any cool CSS techniques that might get the desired effect?
You could potentially use CSS's :target pseudo-class selector. This would require replacing your buttons with a elements instead, which cause your document's URL to apply a hash relating to the id attribute of the element you want to change.
div {
display: none;
}
:target {
display: block;
}
Click here to show the hidden <code>div</code> element<br>
Click here to hide it again.
<div id="foo">This should only show when the link is clicked.</div>
Yes, you can use dynamic content without any scripting language, but your options are very limited. As James suggested, you use CSS. One common way is to use checkboxes and a label to control items visibility. You use this to make simple games, tab menus and more.
A great tutorial with examples you can try out is at http://css-tricks.com/the-checkbox-hack/ but in essence, you'd do something like this: (from the tutorial)
input[type=checkbox]:checked ~ div {
background: red;
}
Note that you have the :checked property and the general sibling selector in this example. You can get a lot more sophisticated.
Check out the CSS Panic game which uses this same capability.
I don't think there is any way to directly modify the content with CSS, because as its name suggests, it is specifically for style. I don't know of any tricks, sorry. I don't think CSS is actually an appropriate way to do this, because it is not good code organization (although web is not known for good code organization anyway). It should be really simple to bang out the javascript, so I recommend just doing it yourself if at all possible. Changing content with a button press really isn't a difficult javascript problem. Throw in some jquery, and you can get slick transitions, too.
HTML is not designed to be dynamic, it's simply a document format, more or less. I don't think CSS was designed for much dynamism either, just changing styles on certain events. So I think because changing content is not changing style, it is either not possible, or not a very pretty way to do it.
Good luck!
Is there a programing language that can substitute HTML in making web sites.I don't mean something like ASP,JSP,PHP or similar.Specifically I am looking for a web site programing language which is not based on that line semantics.More specifficaly I' m looking for something that will add the WinForms Coordinates possibility(Positioning elements based on their X and Y axes).Excuse my English,if I made any error.
I hope you understod my question.
There isn't.
However, CSS has absolute positioning that will probably allow you to achieve what you want.
CSS
#box { position: absolute; left: 20px; top: 80px }
HTML
<div id="box"> I am absolutely positioned! </div>
Be advised though that it's often the wrong choice. HTML is fundamentally different from forms based systems, as it's designed to be displayed on a wide choice of different devices.
Maybe show what issue you're dealing with exactly, and ask about that specifically.
No, there isn't.
Web sites are written in HTML.
Most modern browsers understand a number of "languages", CSS, Javascript, XML, XSL and HTML.
Some also support SVG natively.
However it is entirely unclear what you want to.
If all you're looking for is a way to specify the position of elements on a fixed coordinate grid, HTML/CSS support this. You're looking for absolute positioning. Be aware, however, that it's not nearly as cut and dry as it is on, for example, WinForms. Browsers differ, you have little control over the display, etc. It's do-able, but it has a different set of challenges than WinForms does.
Well there's Flash, Java, Silverlight...
You could try Flash:
http://www.adobe.com/devnet/flash.html
You would need html to embed the object, but the plugin space it provides does not use HTML.
Your options are:
HTML5
HTML4 (or less)
Flash
Silverlight
Java (applets)
So while, yes, you do have some options... no, you don't really.
Btw, who ever said that you can't do element/control positioning (a la X,Y coordinates) within HTML? You absolutely can, and it's typically done with CSS and/or JavaScript.
I have this site and for some reason in IE7 I can't click in the search field on the top right. Every other browser is fine. I have not been able to check other versions of IE but I presume they are failing as well. What is going on?
Hard to say for sure since I don't have access to IE7 at the moment, but you might want to look into setting the z-index of the input or its container.
Also, when I looked at your HTML it looked like something was malformed because I saw the attribute "value" without a value. Double check all the HTML is correct.
Your link is password protected, but in addition to checking CSS z-index issues, you may want to try using the position: relative; and zoom: 1; properties in an IE7-conditional stylesheet — a combination of the two tends to fix a good portion of IE7 issues. If you don't have the IE Developer Toolbar, it's invaluable for resolving display and functional issues.