We are migrating the app to IE11 from IE8. Everything in the app works perfectly well, but for the fact that the drop-down menus in the app don't show up. If you hover over it, it does show a "hand" and on clicking then, it does drop down.
So basically the only thing that's missing is the fact that the little arrow for drop-down menus dont' show up, although it functions perfectly well.
Any idea how to correct this and get the drop-down menus to show up like in regular IE8?
PS: I cannot be using the compatibility mode. I would need to use the regular, non-compatibility mode for IE11. Also, it works perfectly well in compatibility mode.
Here is the code bit for the input type:
<input id="retrieveReports_filterReports" dojoType="dijit.form.FilteringSelect" value="" autoComplete="false"
style="width: 350px;" highlightMatch="all" queryExpr="*${0}*" invalidMessage="Please enter a report name, keyword or key."
name="auto_complete" store="reportStore" onchange = "getMatchingReports(this.value.index)"/>
It seems to be using dojo's dijit library.
I am not able to upload pictures to be able to demonstrate this. But hope this helps!
I found the solution. I had to correct a CSS file to change the visibility to inline or visible [both work] for the drop down arrow.
Another way would probably have been if the Dojo version was upgraded, but that was not in scope.
Related
Firebug used to to display styles in the Computed panel like this, with computed styles grouped:
But for some reason it now displays computed styles like this:
The only grouping available is "Other" which appears to contain every CSS style. How do I make CSS styles group together?
I am using Firefox 46 with Firebug 2.0.16. The change began seemingly out of nowhere, I did not adjust any settings.
I have tried toggling every option in the dropdown menu. The value of the computedStylesDisplay setting is grouped (default value). I tried switching to alphabetical and then back to grouped but it changed nothing.
This is obviously a bug in Firebug in combination with Firefox 46.0. In Firefox 45.0.x it was still working fine.
I've filed a bug for that in Firebug's issue tracker and already fixed it. I have also created a build with that fix. Now it's up to the Firebug team to make a proper new release.
Note that the Firebug team is already working on Firebug 3, which integrates into the Firefox DevTools. Those tools don't have the grouping yet, but it's already requested in bug 977128.
Update:
Firebug 2.0.17 got released, which includes the aforementioned fix.
Update:
Firebug is officially discontinued, i.e. its maintenance has stopped in favor of pushing the development of the Firefox DevTools.
I've run into the same issue. It doesn't exactly solve the problem but what I've found helps at least a little is to click Options -> Show Quick Info Box. Gives a list of current applied styles to the element you're hovered over in the HTML console but unfortunately doesn't provide the original CSS reference line.
I was doing the standard CakePHP blog tutorial (using 2.4 beta since it'll be out of beta by the time I make a real site)
On the add form I'm seeing rendering issues, is this a bug or something I've done:-
The validation popup on the second field is messed up, resizable gap above it a bit like the multi line text input its attached to the validator on the first text box is fine
See the drag handle (top right of the popup)
http://snag.gy/U7tKQ.jpg
And you can drag it
http://snag.gy/087fr.jpg
it seems to be connected to the fact the popup is on a field that is resizable
That's chrome's default behavior
The framework used to generate the form won't affect the appearance of that kind of message. Chrome's default behavior (or simply, behavior - don't think it can be modified) for any input with required="required" is to prevent submitting the form if the input is empty with a hint of Please fill in this field (or similar). This is one of the many features introduced in html5 capable browsers.
js interference?
The mentioned drag handles on the hint popup are not normal - that is likely caused by some javascript or a browser extension.
Go there http://diveintohtml5.info/forms.html and scroll down to form validation.
This is HTML5 built in form validation for the browser you're using, inspect the input element. Honestly I'm not sure if you can style them different but to me it looks like the browser is doing this by adding some markup and CSS to the DOM tree that might conflict with whatever else you have there. I personally haven't had the case before.
Knowing your markup and CSS might help by the way.
I am experiencing strange issue with scrolling, After doing some ajax operations on a webpage, which dynamically add & remove contents from the page. Mouse scrolling hangs up (mouse scoll events doesn't work) and pressing UP ARROW key from keyboard solves the problem.
I wonder is there any known issue like that for chrome?
Edit:
I don't have any js errors on the page, I am simply adding contents to div block dynamically
<div id="ContentArea">
<!-- load contents here -->
</div
<script>
loadHtml('/my/target/page', 'ContentArea');
// this contents may vary in size
</script>
Edit:
Similar thing happened to me on StackOverflow when i clicked load (n) new answers while answering some question. (some days ago)
I had similar issues and got them fixed by scrolling to the top/left corner before replacing the content. Just add the following line before you replace anything:
window.scrollTo(0, 0);
I've tested it only with Chromium 9.0.594.0 (67311) on Mac, but I think chances are good that this will work with on other platforms as well.
I've had strange problems with Chrome and scrolling, then I uninstalled the SmoothScroll extension and everything worked.
Try disabling all of your extensions and see if the problem persists (note: disabling does not uninstall them but will help you identify if an extension is causing the problem):
Menu button -> Tools -> Extensions
Then click the Disable link on all of them (and you may want to restart Chrome for good measure)
I am creating a Firefox extension that is somewhat similar to Firebug. There is a panel (or vbox) at the bottom of the browser that allows users to specify colors to certain Html elements. When they click the OK button, I would like these colors to get updated on the current web page.
I have my JavaScript working when I click the button (i am just throwing an alert), however when I change that JavaScript to change the css or styles of an element (by either using document.getElementById or jquery), nothing changes.
Is there something with Firefox extensions that I am missing? Any help is appreciated.
Let me know if you have any questions. Thanks
https://developer.mozilla.org/en/Extension_Frequently_Asked_Questions#Accessing_the_document_of_a_webpage_doesn%27t_work
You want content.document.getElementById() and similarly for every other construct you use.
I am trying to do something which I would've thought was very simple, but it's causing me a huge headache. I am using Grails ui plugin to get a dialog box. I have a number of instances - some where dialog boxes need to appear when a button is clicked. This I have got working. But I also need to have some that appear when the page is loaded... for information / warning purposes. But I'm struggling with this.. What should I put as the trigger? I don't want the user to have to click anything before the dialog appears.
Also - has anyone successfully managed to change the style of the gui:dialog ? Mine was originally appearing as text with an invisible background before I added the class=yui-skin-sam to the main.gsp body, but that's had to replace the existing style class I already had on the body! how frustrating !!
Had the exact same problem... got it working by adding "visible=show" to the dialog's attributes. Example:
<gui:dialog title="Modal Dialog" modal="true" visible="show">
This message will appear in a modal dialog when the page loads.
</gui:dialog>