As you know, for IE7+, label supresses the inner text of the option tag. Even using emulate meta tags in IE8 doesn't work. Is there a workaround that forces IE7+ to show the inner text, instead?
<option label="myLabel">myInnerText</option>
I have about a thousand screens having this kind of usage spread over the system, and I can't find a way to refactor it with just a replace (due to poor quality code).
Regards.
You can use jQuery to do it,
$("option").attr("label", "");
but this raises the question: Why are you using an attribute that is specific to IE, only to want to remove it if the user is viewing your page in IE?
Related
In the HTML input tag, if the required attribute is set to true, the browser shows a notification to fill up the text box. This notification has different style in different browsers. So is there a way to customize the notification style so that it looks same in all browsers?
tryit in different browsers.
Thank you.
You could try to do so by using JavaScript to override the behaviour but the most likely result is that people would stop using your site as they are used to the behaviour of the browser that they use all the time and be disconcerted to see something else.
The required attribute is a feature of HTML5. You may know that HTML5 is not supported by all the browsers (e.g IE7,IE8). So you need to look for alternative JS solution for this.
I think this is a bug with Mozilla (Firefox) up through the present 17.0.1. Hopefully folks have work arounds.
See the example http://jsfiddle.net/dd3pQ/
The CSS3 property scale3d scales the elements in a page, but ignores the OPTION elements of the SELECT drop down list. As you can see, they are rendered to the left of where they should be, in the page they would have originally been if not scaled.
We need to use scale3d in our app, but we also need drop down lists. Is this possible with Mozilla right now?
The dropdown is rendered by the operating system, and the OS doesn't give browsers hooks to style it.
Because form elements are limited by the OS capabilities, CSS doesn't require browsers to style them at all (they are "replaced elements" in CSS terminology, like contents of <img>). So, technically, that's not a bug.
I am using a WebView inside one of my programs and there is a <select> tag inside the HTML page I'm rendering. I would like to add icons to the <option> elements it contains, like this:
(The shadow effect is not there, so it can be easy to miss out that this is a dropdown list; but it is.)
Is that possible? All my efforts to style <option> tags or put images in them so far have failed.
Since it's not ever going to be displayed by another rendering engine, I only need it to work with the WebKit. I'm also fine with a solution that involves WebView trickery and that would never work in a browser, although it would be kinda neat if it did work in a browser too.
This is not possible in webkit browsers using just css at this point in time. It is possible in Firefox, but not webkit.
You will need to use javascript to replace the select box with stylable elements.
The following post answers this:
How to add a images in select list
I'm writing a template page for a personal site I'm designing, and I'm going to be using drop-down DIV tags for the log-in form.
I'm also using Google Chrome as my primary testing, etc. browser, and noticed that all visible Elements appear to have a property called 'hidden' that holds a boolean value.
It works just like you'd expect, becoming hidden when set to True and visible when set to False.
document.getElementById("element").hidden = true;
document.getElementById("element").hidden = false;
Strangely enough, even Firefox 8.0.1 handles this in the same manner.
As my Google-fu hasn't been able to turn up any information on this, does anybody here know why this appears to be working, and how many other browsers support this?
I will add that this website I'm building is for my personal use, so cross-browser-compatibility is not intended, but would be a nice side-effect.
hidden is a new global attribute introduced in HTML5. This means that browser support should be fairly good in modern browsers, though it will not be supported in IE8, and possibly IE9. As an aside, your use of the hidden attribute is probably incorrect.
This Boolean attribute indicates that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements.
Your login form is not part of the page that is no longer relevant, but rather simply hidden as part of the presentation. You should therefore be using CSS for this instead. For more information, see:
Relevant MDN article: https://developer.mozilla.org/en/HTML/Global_attributes#attr-hidden
HTML5 specifications: http://developers.whatwg.org/editing.html#the-hidden-attribute
What you are doing is the same as doing:
<div hidden="true"></div>
However I would suggest you just do:
document.getElementById('question').style.display = 'none';
I've seen many uses of rich-text or at least natural-looking text editing being made available with seemingly any of a page's text-containing elements. What are my options to have this for myself?
I think you may be referring to the contenteditable attribute in HTML5. This attribute allows any arbitrary HTML element to literally become editable. It has a fairly wide support, mainly because before its appearance in the HTML5 specs it is actually a proprietary Internet Explorer attribute.
The downside of this is that, like any other form element, the appearance and capabilities of this varies wildly from browser to browser, and the quality of the HTML produced is truly atrocious. Still, if you want to have a look, go ahead and hit some of these links:
http://html5demos.com/contenteditable
http://blog.whatwg.org/the-road-to-html-5-contenteditable
Are you looking some some thing like tinymce ? If so check this