I've got an ng-options multiselect list that I'm trying to append some icons before the option text with a ::before class. This works great in chrome but not Firefox. The content on the ::before seems to wipe out the option text.
.optionClass:before{
content:"::before "
}
<select multiple="multiple">
<option class="optionClass">first</option>
<option class="optionClass" label="sec" >second</option>
</select>
I'm expecting to see both "first" and "second", but in FF I can only see first. The text for "second" is hidden.
Once again, this works perfectly in Chrome, but not in Firefox.
Is there a way around this issue with just css? If not, is there a way I can leave the label elements off the options when using ng-options with AngularJs 1.x?
I found a tenuous workaround for this issue.
I created a FF bug report for this issue. One of the dev's said "This is kind of expected" but then he referenced using attr(label) appended to the content. This doesnt work for a number of reasons in the :before content (in my case because I'm display FA icons in that field) so I appended it to the :after
https://bugzilla.mozilla.org/show_bug.cgi?id=1644611
The workaround is to create a css Firefox selector and then append the label to the
:after content field using attr(label) Hopefully this doesnt result in any false positives that would display the label twice. In the limited cases I've tested so far it seems to be holding up.
#-moz-document url-prefix(){
.optionClass:after{
content: attr(label);
}
}
Related
I need to print a page in IE8, IE9, and Chrome. It prints perfectly in Chrome, no so well in IE8 (have not tested IE9 yet).
The 3 major problems I'm facing with IE right now are:
Checkbox and radio button width is messed up and it has a border
Extra padding throughout the form, especially between label and field
Internal table borders do not show up, and the first column should be hidden
See the screenshots below. Why is this happening? I can't seem to fix it, I've tried changing the css several times. I know it is reading the CSS though.
Checkbox:
Extra padding everywhere:
No internal table borders:
UPDATE:
The form shows up correctly (table borders shown, padding correct, etc.) in both Chrome and IE. It prints correctly in Chrome. It does not print correctly in IE.
Please do not tell me to print the form another way. I've made a design decision to print it from the browser: it's what's best for my project.
1: You probably have something like
input {border: ...; width: ...}
which affects your checkboxes and radios. At least in Internet Explorer. You can fix this either by using
input[type=radio], input[type=checkbox] {alternating styles}
or by assigning specific classes:
input.radio, input.checkbox {alternating styles}
2: The padding you might get rid of by giving both the input-forms and the label right next to it
text-align: vertical
3: To solve the borders you should provide the CSS for that ;)
I added a simple table with borders to the page to test if IE not displaying table borders, or if my css was some how overridden. When that worked, I realized my table was being selected somewhere else by it's ID (and having it's borders removed). When I tried to add in the borders for printing, I was selecting the table by it's class name not ID.
I also realized the jquery.jqprint plugin was not including the doctype in the iframe it was printing. Now, it prints perfectly in IE8.
Basically, I want to be able to just show the drop-down arrow and not the text-box associated to that drop-down arrow. I don't want to display the value, but the javascript onchange event will still fire if someone changes the selection.
Idea's?
Paul
Solution for Chrome only
(maybe webkit in general, but I can't test that)
I tried it in old IE7/8, doesn't work because it cuts off the dropdown to the set width as well.
Firefox doesn't show the arrow and instead cuts the text off since it left-aligns.
Solution is as follows:
Should be pretty easy to just set the width of the control via CSS and limit it to the arrow. Simple example I built for Chrome (doesn't really work in other browsers):
<select style="width:18px">
<option value="10000">Something</option>
<option value="100">Other thing</option>
<option value="1">The last option</option>
</select>
Example fiddle: http://jsfiddle.net/Fs7G5/
<select><option></select>
It does not make much sense, but it answers the question asked.
You will not find a cross-browser solution. You probably will want to set all appearances across all browsers to none, and then build a custom-styled select/option that works to meet your requirements. The JS onchange event will still fire properly even if it has a custom style.
You can read up on appearance at the MDN, but note that it isn't supported fully. An example you can utilize for the time being:
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
You will need to adjust properties such as border, border-radius, and background-color if you try to style your own solution.
I'm working on an multi select, the select part works fine on all browsers but the styling is only working in firefox. Its the following link:
http://jsfiddle.net/PbYFT/119/
So my question is, how can I get the styling the same in other browsers as it is in Firefox.
Kind regards
styling forms is not easy at all.. every browser render the input and selects in different ways, some allow styling (like FF), some don't (like chrome)...
So you could save you a headache if instead of adding a margin you add white spaces before the content:
<div>
<SELECT NAME="categorie" MULTIPLE SIZE=21 id="multiselect">
<OPTION VALUE="telefoontoestellen">-Telefoon toestellen
<OPTION VALUE="smarthphone"> -Smarthphone
<OPTION VALUE="iphoneapple"> -Iphone / Apple
hope this helps
For some reason my checkboxes and dropdown arrows are not visible in chrome, however, they still work.
They are perfectly visible in IE. When I load the page in IE, then try loading the page in chrome, they usually appear until I refresh the page again in chrome.
Anyone know what the problem might be?
Reference image: http://i.imgur.com/Q66w6.png
A 'solution' to this Chrome problem is to
open Task Manager
refresh the page in Chrome while the Taks Manager is open in front of the browser.
I couldn't believe this would actually work when I read about it, but I've seen it with my very eyes. This issue apparently exists since the early versions of Chrome and still exists in current versions, though it only occasionally occurs. It seems to be permanently gone after this 'fix'.
In webkit browsers the following code will remove dropdown arrows.
select{
-webkit-appearance:none;
}
Checking in your browsers inspector will indicate if it's being applied in your case or not.
Found this question while having the same problem.
Setting:
input {
width:100%
}
was the cause of the problem for me. This:
input[text] {
width:100%
}
was what I wanted (leave checkbox widths unchanged) -- setting the width of checkboxes in chrome seems to make them disappear.
As user48956 mentioned; setting input width to 100% causes checkboxes to vanish in chrome.
I use bootstrap and often have forms where I want all inputs to stretch 100% and don't want to use bootstraps form methods and this issue still comes up.
If you have defined input {width:100%} you can put a width on the div containing the checkbox and it will fix. e.g.
<div style="display:inline-block; width:20px"><input type="checkbox" name="read_privacy_policy" id="read_privacy_policy" class="pull-left"></div>
<div style="display:inline-block">I have read and understand the Privacy Policy.*</div>
or you can set style="width:auto" on the input itself
I had the same issue
Try this css style supression all style that acts in the input checkbox element.
-webkit-appearance: checkbox!important;
I think it's a bug and it's still there. I use checkboxes in a ligthbox window and they don't show. I'm on OS-X using Chrome 21.
I noticed that if you wrap a radio button or checkbox in a label, the whole thing becomes clickable, even without a for/id pair (in fact, it seems to ignore this because I screwed it up!)
Example:
<label><input type="checkbox"> some text</label>
Then "some text" becomes clickable to check the box. I tested it in FF, Chrome and Opera, and IE8, does anyone know if it works in older browsers, like IE6?
Yes, that's the intended behaviour.
http://www.w3.org/TR/REC-html40/interact/forms.html#h-17.9
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.
It looks like this doesn't actually work in IE6 (haven't tried other versions). If you already have something like jQuery loading on your page, then you could come up with a workable solution fairly easily:
if ($.browser.msie) {
$('label:has(:input):not([for])').each(function() {
var $t = $(this)
, $in = $t.find(':input')
;
if (!$in.attr('id')) {
// use this, or make a proper GUID...
$in.attr('id', 'input_' + (Math.random() * 1000000));
}
$t.attr('for', $in.attr('id'));
});
}
Wrapping label elements are broken in Internet Explorer up until version 7. Link (Google Cache to bypass the registration annoyance).