Recently came through a problem, that is jqGrid is having a horizontal scroll bar in chrome, I have fixed this issue with the help of #Oleg comments here
My application is working fine now... Well
But now if I open my application in laptop, grids are having the horizontal scroll bar. I am able to reproduce this issue by Zoom-out on browser(Ctrl + minus symbol). But I don't know how to fix this.
Finally what I am trying to say is, Whenever I am zoom-out the application in browser, Grids are showing horizontal scroll bar. I tried autowidth: true but not working. Can any one help me on fixing this.
Related
We have a wide grid with horizontal scrolling, with 2 frozen columns. It is very wide (over 20 columns), so the horizontal scrolling is always needed.
We are using the Filter Row option to allow the user to filter. Works well, but if the user tabs between the filter fields, an issue arises. If the user tabs to a hidden field (hidden as in having to scroll to see it), then the header will scroll to accomodate, but the body will not. Likewise, if the user is scrolled all the way to the right and tabs out of the last frozen column, the scrolling again gets out of sync.
See the following Dojo example to experience the issue yourself.
http://dojo.telerik.com/iNONA/2
If anyone has any clue as to how to fix this issue, I'd appreciate it very much!
Thanks!
I had a simular problem, just without angluar implementation. For me the jQuery scrollLeft() method solved the problem, see (Grid data isn't align with Grid header when tabbing through header columns).
$("#example .k-grid-content").scrollLeft($("#example .k-grid-header-wrap").scrollLeft())
With that line of code I got it working in the developer console of your Dojo example to adjust the grid content to the position of the header. But the scroll event, as I implemented it on my problem, didn't work on your example. Maybe this helps you and you can adjust it with the scroll event in angular.
I have a little problem with using KendoUI TabStrip. It doesn't matter if I'm at the top of the screen, but when I click a tab, the screen moves to the tabs to the center of the screen and the I have to scroll to view the content, this is not a big problem, but it is annoying, so I would like to know if there's a way to avoid this.
Thank you.
Yes, according to Telerik:
The problem is caused by the fact that during the time that the tabs
are changed, the page get smaller, so the scroll position goes up. The
solution is to set height or min-height style to the TabStrip content
s, so that the overall TabStrip height remains constant.
They also list other potential solutions in the following thread:
http://www.kendoui.com/forums/kendo-ui-web/tabstrip/browser-scroll-position-is-changed-when-tab-is-changed.aspx
I had a similar issue with tabs jumping around when i was removing and adding tabstrips dynamically.
My root cause was due to using jquery and trying to do a $("#tabstrip").remove() instead of clearing out the container holding the tabstrip. My fix was $("#tabstripcontainer").empty() to clear out any remnants that the tabstrip left behind.
Here is a facetious cat site..
http://jsfiddle.net/Spunkgraffiti/ruxLs/embedded/result/
Go ahead and click on some blank space, stay clicked (mousedown), and drag your mouse down to the bottom of the window, it scroll's down! Every time!
The issue is that no matter what I do I can't disable scrolling when you click and drag to the bottom of the screen..
I have disabled the scroll wheels, tried to disable highlighting (cause I thought perhaps it was not "scrolling" per se but actually highlighting more and more content moving the page down), and tried a css disable of scrolling. Nothing works..
Overflow hidden doesn't help here either :/
How do I stop the scroll caused by clicking and dragging your mouse down to the bottom of the window (already fully expanded window).
I'm trying to write up a drag and drop bar at the bottom of the screen, but every time I drag a picture and try to drop it, the whole page moves.. I just want the whole page not to move when I begin to drag a picture..
Thank you everyone who takes the time to read this!
$(function() {
$(document).scroll(function() {
$(document).scrollTop(0);
});
});
See http://jsfiddle.net/ffy2x/5/
It is rock solid (doesn't scroll at all) on recent (as of this post's date) versions of Firefox, Chrome and WebKit in Qt. Internet Explorer scrolls a bit then bounces back. If it's for an embedded application using one of the first three, then this isn't a problem.
Is there a way to force the jquery jScrollPane to always show the vertical scroll bar now? I saw a post about adding an element to the pane with a min-height to force it but that was a year or so ago. I've also seen posts about adding VERTICAL_SCROLLBAR_ALWAYS to the constructor but that seems to only be for JAVA and not jquery. Can someone please help?
Thanks!
I am using TextArea tags in my web project, that shall never show scrollbars.
This can easily be accomplished using
TEXTAREA { overflow: hidden }
All browsers that I need (IE, FF, Chrome) hide the scrollbars, as intended.
However Internet Explorer and Chrome will scroll to the current cursor position anyway, while Firefox does not scroll anymore at all. You can move the cursor into the invisible area and type, but you will not see, what you are doing.
Can this be solved?
Regards,
Steffen
EDIT: Because I have not found the source of the problem and I would really like to solve this, I leave this question open. However I found a really bad workaround: We now use overflow: scroll on that TEXTAREA, put it into a DIV, measure the width and height of the horizonal and vertical scrollbars, increase the size of the TEXTAREA by that values and set overflow:hidden to the DIV effectivly clipping away the scrollbars. They get invisible to the user but Firefox still scrolls. Not nice but working.
As far as I can tell, Firefox is behaving as I'd expect given the semantics behind overflow:hidden.
That said, and having read your comments above, you can quite easily mimick the behaviour you want with a small bit of jQuery.
Here's the code I've written:
$('textarea').bind("focus keyup", function(){
var $current = $(this);
$current.scrollTop(
$current[0].scrollHeight - $current.height()
);
});
This will basically scroll the textarea to the bottom when you focus on it and as you type. It may need tweaking to account for edits being done further up in the content.
Here's a Working Demo