jScrollPane always show vertical scroll bar - jquery-jscrollpane

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!

Related

Issues with tabbing between Filter Fields with Horizontal scrolling - scrolling out of sync

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.

Show Hide Div On Click Making Label Disappear HTML/CSS Only

I think this is going to be a pretty simple question for most of you.
I am using this code I found here on a previous question asked awhile ago:
Here is the code:
http://jsbin.com/Amejum/2/edit?html,css,output
Here is the question:
Show hide divs on click in HTML and CSS without jQuery
The code works great. I just wanted to be able to do one more thing, not sure if it is possible. Is there a way using only HTML and CSS only to make the label text (in the example it is "Collapse 1") disappear after being clicked? Or changing its color after being clicked?
Thank You.

KendoUI TabStrip on click

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.

jqGrid - scroll bars on zoom out

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.

Firefox TextArea does not scroll without scrollbars

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

Resources