I am working on a form for a company that still uses tables and they want me to add CSS to their template without changing any HTML/JS. There is a nested input(CheckBox) that should be selected when a user clicks the image. This is working fine in Chrome, Firefox, and Edge but in IE when the image is clicked it will not check the box. Below is a screen cap of the DOM and an actual choice in the browser.
I changed the background color of the font tag to distinguish it from the image and added a border around the td. I noticed 2 strange things.
When the font tag is clicked it will check the box.
When the box is checked, I am able to click the image and have the checkbox
de-selected. Once it is, I can not re-select it by clicking the image.
Any idea of what is causing this and what can be done? I am using IE 11.
It appears that IE has a bug which causes this problem. I found some helpful information from this site:
https://snook.ca/archives/javascript/using_images_as
The CSS fix was:
label img{
pointer-events: none;
}
label{
display: inline-block;
}
Related
I have a div with the following css:
.someTopParentClass .someParentClass .someClass::selection {
background: #ffcc00;
}
This is working without reactjs.
The class does show in the inspector with the correct color, but the color is not really applied.
When using reactjs, the background on selection stays blue until I go into Chrome's inspector and only after I change any css property of any class - the selection becomes the correct color :/
The .someTopParentClass class is renders dynamically on button click.
My guess is that Chrome doesn't realize correctly for some reason that the parent class was added - although in the inspector it shows the correct .someClass and the correct color.
This issue seems to happen only in Chrome (Works in Edge,Firefox)
Update
I reproduced the issue in JSFiddle :
https://jsfiddle.net/rmindel/r3581ewt/
Where do I open a bug for Chrome :/ ?
For now my solution was to change the color of the text from black to #000001 so Chrome will know it needs to re-paint.
Opened a bug for Chrome:
https://bugs.chromium.org/p/chromium/issues/detail?id=685174#c6
The workaround for me is as stated -
"For now my solution was to change the color of the text from black to #000001 so Chrome will know it needs to re-paint."
I have a file upload element
<input type="file">
When I choose a file most browsers (i.e. Chrome and FF) display the image name. Safari however is showing a tiny thumbnail. Bad Safari!
My end goal, which is working everywhere except Safari, is to have a custom upload button using a psudo element. After selecting an image a tiny thumbnail shows up in the center of my button that I can't seem to get rid of.
To boil down the issue:
Safari:
Everyone else:
Goal after adding font-size: 0;:
To wrap it up here's the final product I'm trying to prevent:
Instead of setting the font-size to 0 you could try visibility: hidden;
I assume, that your "Select Image" button is not part of the input element, so it should still be displayed.
input[type="file"] {
visibility: hidden;
}
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.
I have an asp.net, mvc 3 app which shows a page with the following in it:
<input type="file" id="binary" name="binary"/>
On IE the "Browse..." text is getting highlighted, making the button look like rubbish:
When you don't highlight it, it looks like this
This only happens after a load or refresh of the page, and only if the Browse button is the first button I move the mouse over. I expanded the size of the button, and you can see the white highlight of the button.
This is very odd and only happens on ie. Any ideas?
From the screen shots I found that there might be background:white css you have applied.
If it is please remove it by,
input[type="file"]{
background: none;
}
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.