I've made a fairly simple "Coming soon" page for a client here and I have a very strange problem. Normally I'm the "go-to" CSS specialist of everyone I personally know, but on this one I am out of resources/ideas trying to figure it out.
On iPhones, using the default browser (Safari), the email input, which has a type="text", just like the name field, displays a white border instead of a blue one. The client reported the problem (she has an iPhone6 - not sure if S or not) and I tested it myself with on an ancient piece (4s) we just keep around the office for testing. For all I know, border-color is a CSS1 property, same as border-width and border-style. They are all applied explicitly so, basically no browser in the world should have a problem rendering it.
I haven't been able to reproduce the issue in any emulator or online snippet tool, so I don't see any point in posting code here. I'm assuming someone with proper iOS/Safari debugging tools/environment might be able to inspect the element and see why the CSS doesn't apply. I also tested the CSS for errors. The one I applied (child theme) is bug free. The parent theme CSS reports some issues but they're mostly vendor prefixes. But it's a good, well designed and well coded theme: Enfold by Kriesi.
EDIT: On further testing I just discovered the color property is also set to white too, when it should be the same blue: #255AA8.
Any idea on how I could debug this (on a Windows 10 machine) is also welcome.
Thank you for your time.
I found the problem... in the themes's .js.
Apparently, it detects if on mobile (somehow they do it properly - as the script doesn't fire in emulators) and if the field requires an email address, the type attribute is changed from text to email via js, so the email keyboard layout pops up when user inputs their email.
Adding
#top div .av-light-form input[type="email"] {
}
to my list of selectors did the job.
Related
Summary:
I want to develop similar extension to LocationBar2 that was available on Firefox, before WebExtensions (WE) came along.
Basically on hover, to simply underline parts of url, nothing more nothing less.
The problem is that this kind of API is not available in Firefox or is privileged.
Then, I stumbled upon Firefox Experiments at
https://firefox-source-docs.mozilla.org/browser/urlbar/experiments.html#developing-address-bar-extensions
Also, found that (I think) this file has the following properties and methods needed to modify:
https://searchfox.org/mozilla-central/source/browser/components/urlbar/UrlbarValueFormatter.jsm
Can anyone point out is this even possible? Not to waste a few days banging my head around it.
Thanks.
This one is a nightmare to debug since it almost always happens only on a native android device, where it is impossible to inspect the DOM (or is there a way?).
Essentially, once this bug is triggered, no more scrolling is possible in the app until a full refresh is done.
Note: LightSwitch does not support jq-mobile newer than 1.3.2
This issue happens quite more rarely on desktop. But since it finally did, I was able to dig thru the DOM to see what was happening. Once I knew where the issue was, it didn't take long to find a documented bug in jq-mobile-1.3.2 that LightSwitch uses: https://github.com/jquery/jquery-mobile/issues/6515
Root cause: sometimes when LightSwitch refreshes the data, the screen get's stuck in a transitioning mode (jq mobile feature), and transitioning CSS class has a overflow:hidden property set.
The link above describes how to modify jquery-mobile to make transition state more robust, but for the purposes of LightSwitch, just add the following CSS into user-customization.css
.ui-mobile-viewport-transitioning, .ui-mobile-viewport-transitioning .ui-page {
overflow: auto !important;
}
Is it just me, or is the angular-material "Getting Started" example broken?
On that page (link above), there's an inline codepen to show using angular-material. But the demo doesn't work! (In particular, I don't see a button to collapse the sidebar.)
Since I used this example in my started project, I spent quite some time troubleshooting it -- to no avail. Then, I realized the example itself it may be broken. And sure 'nuff, it is!
Does anyone know what the actual bug is, so I can work around it on my test app? It must have worked at some time; but I can't figure out why it's broken now.
Thanks!
That particular pen is working fine for me but I have noticed a few are not working, and it's due to the angular-material.js link being incorrect in the dependencies (under the pen's settings) the link provided redirects to the CSS.
This is intentional - the sidebar only becomes collapsable on smaller screens and is open on larger screens. Shrinking your browser window will show the collapse button.
That being said, the Getting Started page is definitely in need of an update. It is a good guide for a basic page structure, but the individual demo pages will be a lot better if you're looking to try out some of the components. (Every demo has a CodePen link to open an editable version.)
recently i am facing problem on my all MVC applications using TinyMce editor i am using that editor to allow users to input content of the page, strange things is happening now. when ever they have type following word in content.
"find", "services","replace" and some 8 more character inside editor, and when we hit safe button immediately after server giving me following error.
This webpage is not available
ERR_CONNECTION_RESET
as far for me this is Firewall problem. but i need to know if someone have same problem how can we explain network people?
The error clearly indicates as you mentioned that this is an internet problem as it suggests webpage is not available. There is a video here that indicates you may need to reset somethings on your network. Checkout if that helps.
This problem only happens when I deploy this to our live server, it works fine on my development machine in the visual studio web server, and it is only a problem in IE (8 & 9 both)
Posting a jpeg with this form...
<form method="post" id="uploadForm" enctype="multipart/form-data" action="/ImageUpload/UploadImageNew">
<input type="file" onchange="postFile()" name="file"></div>
<input type="submit" value="OK">
</form>
Using this javascript...
function postFile(ctrl) {
document.getElementById('uploadForm').submit();
}
To this controller...
[HttpPost]
public ActionResult UploadImageNew(HttpPostedFileBase file)
{
// Verify that the user selected a file
if (file != null && file.ContentLength > 0)
{
file.SaveAs("AFilename.file");
}
else
{
throw new Exception("File not found")
}
return View("UploadImageNew");
}
Results in file.ContentLength = 0 in IE, but it works fine in FF & Chrome, the machine is on our Intranet if that makes any difference.
Any help greatly appreciated
UPDATE 1:
Weirdly it seems that the problem is intermittent, on Friday my colleague could not upload anything but I could, this morning it is me who can't and my colleague can both using IE.
Everything seems to point to an IIS config problem?
UPDATE 2:
Ok, it looks like my issue is related to expired sessions / security. I am using a Hybrid Authentication Method and it is causing me problems.
The main site uses forms authentication, however I have another site which does windows authentication for me and sets the cookies, disabling this fixed the issue for me.
Not sure why yet but I think this would be better in another question.
I am marking smartcaveman's answer as the right one, because his post lead to me to the right answer/explanation.
Your issue has nothing to do with the IIS. It is broken because you are wiring up using the change event. There are known issues with IE and the change event. A table with the compatibility of different browsers with this event on different HTML elements is available at quirksmode.
Here are a couple of blog articles on the subject:
http://passionatedevelopment.com/blog/2010/03/24/onchange-on-ie-vs-firefox-the-importance-of-cross-browser-test/
http://www.nofluffjuststuff.com/blog/scott_leberknight/2005/04/onclick_versus_onchange_in_ie_and_firefox
The most obvious way that occurs to me to do this is to use the blur and focus methods instead. (Record a value on focus, check it on blur, and if it's different submit).
Update
So, It's still not working? Here's a few other things that are worth looking into.
What happens if you try to get the value from the form field on the client-side, prior to submitting. e.g. function postFile(ctrl) { alert(document.getElementById('uploadForm').value); return false; }. Does it have a value? Also, have you confirmed the feature works on the live environment without the JavaScript? (e.g. just submit the form normally). If it does, then you can be sure the problem is on the front end. If it doesn't then the JS is fine and the problem is on the back-end.
Max Request Length / Max Content Length. In a comment on your post, you said that you have enabled up to 2GB in the maxRequestLength. However, this works a little differently in IIS7 than in IIS6 (or Casini if that was your previous test environment). The details about this are cited in this blog, but in summary you need to make sure that your web.config has the setting in the system.webServer section, and that the value actually represents what you think it does. Details are in the article.
Do you have exception handling and/or logging features in play? Is it possible you are swallowing an exception somewhere that is causing the request to be abandoned? Are there any empty try - catch blocks that might be protecting your view from an underlying error that would otherwise cause the request to fail? If you do have logging enabled, can you isolate a distinction between your attempted usage and your colleague's?
Is there anything different about the file structure on the live site than your development environment? I noticed you have a hard-coded form action /ImageUpload/UploadImageNew target, which could affect the application's ability to match the incoming route.
You said in the comment that the content length is 0, but if the test you used to determine this is what you have in the post, then you may be wrong. Your test is equivalent to file == null || file.ContentLength == 0). There are different implications depending on which is actually the case. If the file is null, then it may related to model binding. If the Content length is 0, then it at least recognized a file is being sent, but something goes wrong when it decides what to do about it. You can check to see if you are actually receiving the file data by looping through the HttpContext.Request.Form collection and writing out the values (That's how we used to do it... in the ASP Classic days). This other post, Valum file upload - Works in Chrome but not IE, Image img = Image.FromStream(Request.InputStream) , says that a user with the same kind of issue found the file content in the Request.Files collection. You won't know for sure until you check. Anyway, if the file data is in one of those places, you know that problem is happening in model binding (and you know the work around until you find the right way to fix it).
I also found something on the Telerik forums that seems to describe something similar that happens with their component (which is really just a wrapper of what you are doing). It points to a possible session time out.
I would suggest going through these items and seeing if any of them reveal more about the problem (at least #1 is sure to).
Last time I have the same problem when I write ajax based UI.I upload the file using the ajax.only Ie create problem for that time.
Not sure but try these link maybe helpful
Ajax file upload not working in IE7
Valum file upload - Works in Chrome but not IE, Image img = Image.FromStream(Request.InputStream)
http://haacked.com/archive/2010/07/16/uploading-files-with-aspnetmvc.aspx
Is you postFile() save file by ajax or form submission ? IE not take the filename (of upload) as chrome and firefox does. When you make upload debug the code and check if they are exist.
The easy solution that worked for me on IE11: Enable Compatibility mode.
For some reason, IE11 was doing two requests to my Upload endpoint... One without the file, that works fine and returns 200 status (but since it doesn't has the file, it's useless for me) and another request with the file... But this second one is always "pending" on the network tab of the Developer Tools inside IE. I couldn't find the reason for this odd behavior. Watching the logs from server I noticed this second request never hit the server.
This however don't solve the problem for everyone since you'll have to ask every user of your system to enable compatibility mode for your website... And it's not a good thing to ask for Internet users.