I'm having problems in several versions of Chrome when trying to scroll through a short (25 item) list in my app. The screen smears like so:
I've stripped the controller and ng-repeat element so that there are no watchers whatsoever. It's simply adding binding for basic attributes.
I'm also using angular ui-router, and this is inside of a ui-view.
Problem is somewhat consistent in Chrome and shows up in Safari as well. No problems in Firefox (that I can tell). Have not tested in IE.
Any idea what is causing this behavior?
EDIT
Also potentially noteworthy: this goes away on my laptop (MBP) if I plug in an external mouse. Not sure why. It is a problem on other machines too though, so not specific to my setup.
I'm able to reproduce the behavior consistently by setting height: 100% on any element being used for ui-view. I had originally done this to allow for pushed (but not sticky) footers, but will need to find a workaround.
Removing height: 100% from the ui-view elements solved this for me.
Related
I'm using react-select to create a dropdown for an open-source application which uses React/Redux and Electron. I'm using the bog-standard example code provided by react-select for this. However, when running, while the select box shows, clicking it seemingly does nothing. The dropdown that's meant to appear does not. When inspecting the HTML sources, it shows that when it's clicked, something does appear in the HTML, but this isn't visible in the app.
This is quite a large application and I don't know how much value there is in posting snippets of code; this one file alone is 500LoC. Does anyone have any ideas why this might be happening though?
The problem was the "overflow" option of the CSS was set to "hidden" by default. Setting this to "visible" in the CSS resolved this and now I the box appears as intended.
If anyone else has a similar issue, pause the application at runtime using the "debugger" command in console and check the CSS stylings of the element in question. I found this by accident but could help for future!
I've got some nested directives inside ng-repeats, they consist of directive that got ng-repeat.
It renders very ugly.
I want to show the content when its finished drawing.
Ive tried to use directives events things like scope.$last, or timeouts but the problem is these elements are created but the browser havent rendered them yet. How to deal with that?
no wonder, you ran into the same problem as me, it's caused by AngularJS dirt checking, it's a cost you using it, but there is not official solution to it yet, there is link has a temp solution you can use, please check on http://tech.small-improvements.com/2013/09/10/angularjs-performance-with-large-lists/ hope this helps!
I am very new to all things Angular and have been experimenting with some stuff.
Been playing with UI-Router and with Angular Animations.
So far everything is going to plan, except one thing.
During the transition between pages (my top-most states) the footer area collapses up under the main content and against the navigation.
(I'm also fairly new to css transitions, so my knowledge is limited, but growing)
Is there anything that can be done to prevent this from happening? Maybe have it snag on to the height of whichever state is the tallest? (IE, the one leaving, or the one entering)
(I've tried searching everywhere, but whatever I search for I come up dry. Maybe I'm searching the wrong keywords.)
I have included a plnkr link
Thanks in advanced.
So recently me and the developer team I'm in have finished working on a huge project for transforming our entire system from Extjs2 to 4.2.
We have finished fixing everything, every little bug, except we were left with one little task, making the system also available for IE6 (many of our customers still use it). What we thought was a little task was apparently one big problem.
None of the grids were loaded properly (only column headers and no data), and many important components such as panels appeared blank.
We apply the rtl property in our main css file, since we don't want to add rtl: true for every component:
html { direction: rtl }
Once removing this, everything was working perfectly (except for the direction of course). Currently we are following the code in ext-all-rtl-debug and finding the problems one by one (for example we found out that an added cls in the mask function was causing some of the problems with the grid). As you can imagine, this is a big, painful and slow process (especially considering we debug ie6).
Although everything looks fine in FF, Chrome, and even IE7, the entire project have rendering problems in IE6.
If anyone is familiar with the issue, and perhaps know of a possible fix, we would be forever grateful!
The "rtl:true" config is inherited throughout the component hierarchy, you should be able to just add "rtl: true" to the top-level component in the hierarchy (usually the viewport). This eliminates any need to set "direction:rtl" yourself, since components in an rtl hierarchy will have the "x-rtl" class added to their element(s).
You also need to make sure you are using the rtl stylesheet, as Ext JS components require quite a bit of special styling to work correctly in rtl mode. For example, for the classic theme this would be: ext-theme-classic-all-rtl.css
If you're still stuck, have a look at this example: http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/rtl/rtl.html?theme=classic
I Have a Silverlight Menu on a ASP.NET page,
on this page bellow the menu there's a Html Table
and bellow the table there's a dropdownlist.
The silverlight DIV is position: absolute; z-index: 999;
The silverlight App is designed with zindex in its elements, is windowless, and background transparent.
This Works fine on Firefox however in IE6 (requirement) it doesn't work, the silverlight gets bellow the html table and dropdownlist
Any help would be appreciated.
Thanks
Gabriel
I only spent a small amount of time reading up on this particular problem, but it seems that this is a problem with most z-index settings with IE6.
It appears that in Internet Explorer
(windows) positioned elements do
generate a new stacking context,
starting with a z-index value of 0 quote
I found an article that addresses this issue by setting the parent div's z-indexes as well. However, you mention that the Silverlight div has a z-index specified, but no code, so I can only guess that what you have done might be the same as in the article.
There is another article that makes use of iFrames, that you might want to look at as well.
Hope this helps you.
Well I had to solve the problem with a nasty javascript.
The think is the IFrame solved most of the problem, another part I had to remove any position: relative i had used, and there was still the ASP.NET DropDownList's that got on front of my silverilght Menu, I didn't have the time to solve this on a 'correct' way (if I can even say this). I had to use javascript to hide the DropDownList's and when the user hover out of the menu I'll show the dropdownlist's again.
this link with a working example helped me a lot.
Thanks for the help everyone that helped.