AudithSoftworks
Default behavior of inputs are not coming when CSS image is removed
When the CSS sprite images(responsible for the background for inputs) are not available or i just removed the CSS sprite image, then the default behavior of the browser for the inputs(select, input) is not coming, i just see the text alone, i am able to recreate this issue in the demo html provided in the GIT. PFA Screenshot.
I understand this is because of the opacity which is turned off to zero by css. Is there any way to overcome this issue?
Expected behavior: When i remove CSS background images or when CSS sprite background image is not available due to network issue, my page should take the default behavior of the browser,
Before issue:
After Issue:
You have a valid concern but I am curious about how one would implement this.
The images are background images and will always be underneath the input element, which is why they are transparent. Their sizes are also stretched/changed to fit the styling. A second wrinkle is that the sliding window approach doesn't require that a background image is specified at all
- it is entirely possible to style the elements using a custom CSS that uses background colors, gradients or other techniques to visually indicate that there is a control for the user to use. The whole element might be wrapped in another div whose background is the right image, and it would work fine as long as the content was sized correctly.
If this is supposed to fall back to the browser's default controls, then I am at a loss for the mechanism where I'd determine if the image was loaded for the oddball scenarios. What do you propose?
Tyler Akins
On Tue, Oct 14, 2014 at 4:31 PM, Mohamed Hussain S H < [email protected]> wrote:
When the CSS sprite images(responsible for the background for inputs) are not available or i just removed the CSS sprite image, then the default behavior of the browser for the inputs(select, input) is not coming, i just see the text alone, i am able to recreate this issue in the demo html provided in the GIT. PFA Screenshot.
I understand this is because of the opacity which is turned off to zero by css. Is there any way to overcome this issue?
Expected behavior: When i remove CSS background images or when CSS sprite background image is not available due to network issue, my page should take the default behavior of the browser,
Before issue: [image: image] https://cloud.githubusercontent.com/assets/4039657/4631649/1664d3ac-53b7-11e4-9e93-7aba24437bd4.png
After Issue: [image: image] https://cloud.githubusercontent.com/assets/4039657/4631631/02617c70-53b7-11e4-88d4-ed8c18181cbf.png
— Reply to this email directly or view it on GitHub https://github.com/pixelmatrix/uniform/issues/412.
appreciate you for your quick response. Is it possible to test the image is available path? I think it is possible by using jquery AJAX method. But my concern suppose if the browser is not accepting the background image for visually challenged user's browser/screen reader then is it possible to turn back to browser default.
AJAX might be blocked. If the image is on a different domain (like a CDN or a static file server) and they don't support CORS then we have an extremely difficult time determining if the image would load. An image object could be used if we can find an image URL, but what about scenarios where the image is added to a wrapper? We can't just say "if there is nothing showing then show something." :-(
There are ways to test if the browser is in high contrast mode and, if I remember right, Unifrom will disable itself. Maybe not with version 2, but it does with the rewrite I've been working on.
Tyler Akins
On Tue, Oct 14, 2014 at 5:01 PM, Mohamed Hussain S H < [email protected]> wrote:
appreciate you for your quick response. Is it possible to test the image is available path? I think it is possible by using jquery AJAX method. But my concern suppose if the browser is not accepting the background image for visually challenged user's browser/screen reader then is it possible to turn back to browser default.
— Reply to this email directly or view it on GitHub https://github.com/pixelmatrix/uniform/issues/412#issuecomment-59070203.
Thanks Fidian. I understand the difficulty in implementing it. But my requirement is when the page loading is slow or page load has been stopped at that time the sprite is not loaded then the user is not going to see the radio or drop-down is there.