This is a really weird issue. I've first read the answer from Maayan Glikser on this question which looked similar : Uploadify inside Jquery UI Dialog => Chrome & Opera bugs
It didn't work at all. Let me explain my problem.
I have 3 different Uplodify (Flash version) controls on my website (not on the same pages), only one of them doesn't work and it's the one that is inside a JQuery UI Dialog. Basically, the button is visible but not clickable. The problem occurs only for this particular control, the others behave normally.
So I tried adjusting the z-index inside the javascript, it didn't change anything. Then I tried adding manually (through firebug's "edit html" feature) a <br /> at the beginning of the container generated by uploadify and bam, the button became clickable
I then tried adding the <br /> on page load with $("#fmuploader").prepend('<br />') and nothing happened, the line break was added but the button wasn't clickable. When I added manually a blank space it became clickable again.
I believe there is some kind of paint event that gets triggered when you manually edit the page from firebug which makes the button suddenly become clickable, but I'm really wondering if I can make it finally work as intended without asking all my firefox-using visitors to install firebug :)
It is really hard to explain so I have setup a small test page at this address : deleted (edit: the test page is now offline on the production environment and is no longer reachable)
This reproduces exactly the problem I have.
Load the page, click the link to open the popup, open firebug, find the uploader's container <div id="fmuploader" class="uploadify" style="height: 30px; width: 120px;"> and just add a blank space after the opening tag. The button becomes clickable.
The problem occurs on Firefox 17 with no add-ons except firebug and Flash 11. The problem does not occur on IE 7/8/9 and Chrome on the same machine.
Update: I tested it with Firefox 15 and wasn't able to reproduce the bug.
I had a similar issue, but found that updating Firebug to version 1.11 sorted it.
It was only seemed to be the issue in verstion 1.10.
Looks like a change in the Firefox 17 security model means that minified version of jQuery breaks when using Firebug. Plenty of jQuery based stuff has stopped working for me in Firefox 17 unless I disable Firebug.
https://blog.mozilla.org/addons/2012/08/20/exposing-objects-to-content-safely/
https://developer.mozilla.org/en-US/docs/XPConnect_wrappers
Related
I have a web application using angularjs and material-design.
I use md-dialog for adding and editing certain records from the database. This is responsive and works as expected on my desktop for all browsers except IE (no great surprise). This is how it is supposed to look.
However, if I run the application in safari on a Mac, or any browser on iOS (including chrome), the dialog appears to be missing the contents (has no height).
While IE doesn't have exactly the same issue, it does appear to be similar. So, I believe it is an issue with how iOS renders the flex attributes. However, I am not sure and don't know how to confirm on my iPad.
My search so far has not provided any working solutions to this issue, but I have seen others ask the same question (though not through stack).
What causes this issue?
How do I fix it for an iPad?
UPDATE
This is how the dialog is rendered in the html:
<md-dialog-content class="flex" id="dialogContent_140" flex>
<form name="workerDialog" class="md-dialog-content ng-pristine ng-invalid-required ng-valid-mindate ng-valid-maxdate nd-valid-filtered ng-valid-valid ng-valid-minlength ng-valid-maxlength ng-valid-pattern ng-valid-unique" style>
...
</form>
</md-dialog-content>
If I modify the element and remove flex like this:
<md-dialog-content class="flex" id="dialogContent_140">
The body content appears as expected (at least on the MAC).
I can also modify the css in angular-material.min.css and remove -webkit-flex, -ms-flex, flex and achieve the same results.
[flex]{
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
box-sizing: border-box;
}
I can't completely kill flex for the rest of the application, but I have to allow this to work on an iPad.
I found the cause of my issues. Thanks to #Tran Khanh Nguyen for moving me in the right direction.
When the dialog was defined, someone added <md-dialog-content flex>. I removed flex and it fixed the issue on all devices.
For more information, with some special browser (e.g. IE, IOS browser...) we should consider to add the value for flex, like flex="auto" or flex="100", it will help anuglar-material would fine on these browsers.
While debugging a JavaScript program I was writing with Firebug, the Script panel stopped working and I got the following message:
I went through all menus and sub-menus I could find but didn't see a option to re-enable this feature. The console.log() command doesn't work in Firebug as well (while it does work in the built-in devtools' console).
How can I re-activate the Firebug Script panel? What may have caused this?
This may have different causes. One of them is described in issue 5646, which is related to going back and forward in the browser history.
In such cases it normally requires a browser restart to work again.
Note that Firebug up to version 1.12 is based on an old debugger API exposed by Firefox called JSD, which is unmaintained and buggy. Since version 2.0 Firebug uses a new debugger API, which fixes this problem.
Coincidentally, I just "fixed" the same problem with my Firebug.
I went through re-installs, options resets and such and nothing helped.
After some investigation it boiled down to the content of the page I was debugging.
I have a function called by jQuery when page load is finished:
<script>
$(onPageLoad);
</script>
Now, this function asks user to enter his name using prompt() function. It appeared that Firebug wouldn't activate script panel until prompt() is closed. That is not a problem when you have just one page opened since you just close the dialog and everything works. However, it is a problem when you have two same pages opened. Script panel is non-operational until you close both prompts.
I was facing this problem recently. I found that my Firebug was not getting updated because my Firefox was stuck on 29.x. Once I updated my Firefox the new Firebug got installed. It supports only Firefox 30+.
Note: I was using OSX v1.9.3.
I was having same problem, and, thanks to Roman Guralink, I figured out that the the dialogue Firefox prompts you to insert the master password was the cause. When you set a master password for all password stored, FFox usually opens a dialogue to ask it just after program started. BUT, sometimes this dialogu goes behind the main window, and you don't notice it is there.
My internet was just shut off... so I'm at the library trying to fix one last feature of my test page (and eventually my site) before the portfolio review date on the 1st (TOMORROW!!!).
Here's the problem, all this time I've been testing compatibility of my site with IE9/FF4/Chrome12/Safari (latest) but NOT IE7/8. My site/test page works as I want in the browsers I've been testing with.
As luck would have it, the library I'm at has IE7 installed and apparently won't upgrade to IE8, which I think would render my page correctly. I think so due to finding many instances of issues with page renderings in IE7 while there are none in IE8 for the same page through some investigating.
Anyway, on the test page linked above, the text tab slide-out div in the top-left corner of the page isn't displaying and oddly enough, a simple image link at the bottom right of the page isn't either. Those two happen to be the first and last links on the page, if that helps at all (I'm thinking it may have something to do with that). Everything else on the test page is functioning/displaying properly. Just view the test page through any of the above browsers that I've tested with to see how it should display/function.
I've tried adjusting the z-index (as I've found a few cases where that was the culprit of the IE7 misbehaving) but to no avail. I'm stuck and don't know where to go next.
Any help/pointers would be very appreciated as this is getting reviewed tomorrow! A lot is riding on this review and I want to ensure that the reviewers can view the page as intended if they are using IE7.
Edit: CSS, JS
In your CSS, if you change your
.SU{
display:inline-block;
}
to
.SU{
display:block;
}
You can see the jaguar no problem.
Apparently, IE7 has issues with display:inline-block;
I would google "CSS differences between IE7 and IE9" and "JavaScript differences between IE7 and IE9".
Also, IE7 and IE8 do not support HTML5 markup very well (or at all). So I hope you aren't using that.
Problem with this CSS style:
.SU
{
text-indent: -9999px;
}
This is hiding the image for me when I run your test page in IE9 in compatibility mode. When I remove the text-indent style I can see the cougar image at the bottom. I seem to remember reading about this text-indent hack being a way for screen readers to read the link, but developers found it was breaking when new (IE7+) browsers were released.
When I run the page in IE9 in compatibility mode, your "Text" popout menu works fine.
IE7 inline-block trick
#id {
display: inline-block;
*zoom: 1;
*display: inline;
}
For why, search google for "hasLayout". ...oh how i love IE...
With regards to the text options, have you tried messing about with the left offset (-140px) applied to your <div class='optsdiv' > perhaps trying it set to zero [0] or even omitting the attribute entirely.
I know changing this value won't necessarily fix your issue, but it might point you in the right direction...
Bottom link seems to work on my IE7 by the way... not sure if you've perhaps fixed this issue already. my build version is 7.0.5730.13 for reference.
Good luck with the fix! IE sux ass...
IE 7 doesnt support block elements (like button) in a-tag... that was the problem here i had.
the Cannot type into an editor in a xul panel is a known bug in firefox.
I simply want to reuse my code from my google chrome extension by hosting a webapp online and including it in the extension both google chrome and firefox by using a popup window.
This is how I include the webapp
<popupset id="mainPopupSet">
<menupopup id="smsflatrate-popup">
<iframe height="500px" src="http://webapp.mysite.net/"
flex="1" type="content-primary"/>
</menupopup>
</popupset>
The problem is, it is possible to focus input elements but the input fields do not react on key-events, so no input can be provided.
It seems that there is some kind of solution for this problem, but I think I do not really understand what to do here.
E.g. from the link above, what would be a solution according to this post?
There are many ways to display HTML in a XUL UI:
1) including HTML inline in the XUL document. This should work fine everywhere,
including in panels.
2) include an HTML IFRAME in the XUL document. This currently works fine
everywhere, except that IF the iframe is in a panel, there are some problems
with focus. This bug is about that one issue.
3) instead of a panel, you can create a XUL window using window.open that
contains HTML inline or in an IFRAME, and everything should work.
Having said that, if I open this bug's testcase in a Firefox trunk build, I
*can* tab into the textbox and type into it, so it looks like focus is
basically working now? The problem is that I can't focus the textbox by
clicking on it. In fact, if you click on the arrow to do a search, you navigate
to a new page where there is a textbox that you *can* click to focus.
So I think we have here just some simple bug that's preventing click-to-focus
from working, sometimes. Enn, can you look into that?
It seems to me that given the list of suggestions your best choice is to open a new window to represent your popup. You can make it look like a popup by setting its position, turning off OS crhome, etc.
I am working on a test application based on ASP.NET MVC. I am new to CSS stuff so I am learning that as well.
I have created a master page called "new.master" and created a new css "new.css". I am calling the view from controller as:
return View ("About", "new");
What I am doing is that I am frequently updating the css and master page. So I run the application in debug mode frequently. After sometime I stop seeing the effect of changes in css. When I "view source" in chrome and check the css, it shows an old version.
When I change the name of both master page and css, I start to receive updated views but that works for sometime and then again I stop getting the CSS updates. Have you faced this problem? How can I fix it? (Its terribly annoying!)
Your browser is caching the css. If you force a refresh with F5 that should display any changes.
I think this may be a browser cache issue. In in IE and FF I usually do Ctrl + F5 or Ctrl + Refresh button. Also you can manually clear the cache. For IE you can use the IE Dev Toolbar and for Firefox there is Firebug with both you can clear the cache easily. Not sure about chrome, sorry.
Sayed Ibrahim Hashimi
My Book: Inside the Microsoft Build Engine : Using MSBuild and Team Foundation Build
I found another case in which this can happen.
We started our application with just plain links to the CSS files, then switched to using bundling. We updated the old <link href="#Url.Content("~/somePath/someStyle.css")" rel="stylesheet" type="text/css" /> to #Styles.Render("~/Styles/bundles/someStyle").
We also use a few stylesheets which are only needed for some pages, and they have their own bundle. Now, for one of them, we forgot to change the link tag to the #Styles.Render statement.
The result was that this CSS got updated now and then (so we thought everything is OK; the style wasn't missing), but we could not influence when the update happens. When I started making changes to the file, I realized that nothing I do (emptying the cache, rebuilding the project, restarting Cassini) will trigger an update. The browser always got a 304 Not modified.
So, if you have these symptoms, check your links.
Please use Ctrl+F5 to refresh your browser.
F5 may give you the same page even if the content is changed, because it may load the page from cache. But Ctrl - F5 forces a cache refresh, and will guarantee that if the content is changed, you will get the new content.
hope this will help you
Thank you
go to chroom developer panel by right click inspect -> then go to Network tap -> tick the Disable cache checkbox (note: this should always be checked) -> Refresh the page by pressing F5.
this work for me, hope this help others who have this issue! :)
It's very possible that css is being cached in your browser, so simply clearch browser cache, it should help
This happened to me when I had a master view that would load partial views depending on which partial view the user wanted to see, but the answer from this page helped, https://forums.asp.net/t/1763494.aspx?applying+CSS+layouts+to+a+partial+view
CSS must be referenced in the of the Html document. As a
consequence you cannot include them in a partial view...because in
such case the css is included in the Html body. Please plce the style
sheet in head of the page that hosts the partial view.
I would have css links in my partial views and any modifications to the css files would never happen, even if I pressed Ctrl-F5 in the browser. I also tried clearing cache contents in the developer tools. I noticed by viewing the source stylesheets that the css files linked by the partial views were not changing, so the fix for me was to move the css links from the partial view to the main view where these partial views were to be held.
I had something similar happening to me.
Then suddenly noticed the bundle was added to the page:
#Styles.Render("/bundles/classifiedDetailCss")
instead of:
#Styles.Render("~/bundles/classifiedDetailCss")
Note the missing ~ character in the first example.
(The first example only worked after building the project, otherwise it would return a cached version even in debug mode.)
This can help solve this issues in both dev and production.
use asp-append-version="true"