I've got my GridView inside another Panel and I got scrollbars but GridView is to big even with paging. So user needs to scroll down to scroll horizontal (to see horizontal scrollbar).
How can I add any horizontal scrolling trick for my GridView in the Panel. Maybe something from javascript ? My js knowledges is still being poor.
I really hard thinking on what that could be, maybe floating horizontal scrollbar ?
Thank you.
This can be done with the CSS Overflow property, see: http://www.w3schools.com/Css/pr_pos_overflow.asp
You may be able to add this to your asp Control, or see how the <asp:Panel> is rendered (I haven't used WebForms for a while, but I think it's a HTML <span>) and give it an appropriate element Id/class and set the CSS property in a seperate stylesheet.
I think this is what you are searching for? :
scrollLeft
Related
I would like the vertical scrollbar to be displayed when I call element.scrollTop = <somePosition>;
Here is an example of what I'm trying to achieve: https://plnkr.co/edit/0ls05cCa3XrvrWPO?open=lib%2Fscript.js&preview
If that example is loaded on iOS, when the left box is scrolled, the right box should sync with it. That works just fine, but I need a way for the scrollbar to also show up.
I think your issue is that division being scrolled via Javascript is not recognized as active, to keep scrollbar visible.
I would suggest to try any custom Scrollbar library, they manage scrollbars with divisions rather than browser's.
Many such would allow you to configure scrollbar to be shown and hidden using Javascript.
It would add additional work for you, but it can be a solution to go with.
Here are few you can try with: https://www.jqueryscript.net/blog/Best-Custom-Scroll-Bar-jQuery-Plugins.html
You could dynamically add a css class to the container when performing scrollTop().
Try a class that implements overflow-y: scroll when applied. That should yield the desired effect.
I have a table that has a fixed header and a scrollable body. I want to know the scroll position in the table so that I can reference it on postback and set it to where the user was before postback. I would prefer JQuery to do this, but Javascript is fine too. Im not sure how much code to post here because Im not sure if the problem is that I just dont know the code to do this, or the code I have (css) is interfering with the solutions I have tried.
Any ideas where to start? Is there a method that does this? Ive tried putting this (table style="overflow:auto; height:150" onclick="alert(this.scrollTop)") in the table but it always returns 0.
Ive also tried various JQuery calls as well. They all return 0.
As far as I know (and I am dealing with this kind of stuff everyday), native tables can't handle scrollbars as your describing. I think that probably, your table actually contains a div or other container, which is actually scrolling the table cells. Something like this:
http://jsfiddle.net/mBDjx/46/
I recomend you to inspect your code using the browser developer tools (usually F12) and check if it is only a table, or another element the one which is generating the scroll.
If you realize that is is a div, just check the .scrollTop attribute of the div instead of doing it on the table :-)
Hope it works!
It is the tbody that is scrolling and that is what you need to test. this.scrollTop is referring to the table , and the top of the table is not changing position.
I'm using mootools to create a scrollbar for content example code can be seen here
http://jsfiddle.net/scottmwilliams1/jSZDJ/1/
At the moment the scrollbar appears whatever the length of the content. I need to change the code so that the scrollbar disappears if the content is short and doesn't require scrolling. Mootool version needs to remain the same. Can anyone help. Thanks
Like this? http://jsfiddle.net/CqrFp/
I updated your fiddle implementing that feature.
Try to remove some text and see how the scrollbar disappears.
// Major edit, sorry in bed with back pain, screwed up post
One of the ad agencies I code for had me set up an alternate scrolling solution because you know how designers hate things that just work but aren't beautiful.
The scrolling solution is applied to divs with overflow:hidden and uses jQuery's scrollTo(). It's a set of buttons top and bottom that handle moving the content.
So, this is married in places to their CMS. What I have not been able to sort yet is how to hide the scrolling UI when overflow:auto would not have been triggered by the CMS content and the buttons are not needed.
The divs have set heights and widths. Can i detect hidden content? Or measure the div contents' height?
Any ideas?
So you want to get the height of a hidden element? I found this post maybe it is what you are looking for.
Its using jQuery, but the concept is the same. Hope this helps!
Metropolis
I hope i am mistaken, but you would need to emulate overflow by setting properties using some js, then you can get these values using getAttribute or your own method. Otherwise when you set overflow to auto, then the browser will be doing its own thing and the only value returned as a property of overflow would be a string like 'auto'.
Can you explain this better? You want to hide the scrollbar of a div set to overflow:auto when it doesnt have enough text to overflow? Browser does this for you.
You want to hide the scrollbar of a div set to overflow auto when it is scrolled down to some point, but you arent looking at it or hovering or something? That will be sort of complicated.
If you want to know if a div has overflow set to something, you just do:
object.style.overflow
and it will give you a string.
possible values:
visible
hidden
scroll
auto
inherit
you can set overflow the same way
http://www.w3schools.com/css/pr_pos_overflow.asp
from what i understand now is you have these divs with hidden scroll, but some graphic designer custom scroll bar and you use scrollTo to do the actual scrolling. BUT you problem lies when you dont have enough data to actuall need a scrollbar, but your graphic stuff shows up anyway, so you want to hide it.
so the real question here is how do you get the height of content? you want the property offsetHeight, but im pretty sure its still IE only.
What do you mean by CMS?
Yes you can access the div's content height, since you can access all of the div's children in JavaScript. (Sorry for not including example. I haven't work with pure JS in a while now so I don't want to point you in the wrong direction.)
Doing this, you'll kind of be able to "detect hidden content" and then be able to do what you actually want to do.
About your first question, I doubt you can control scroll bars once you've set overflow to auto.
Using jQuery height() on a div containing the content I am able to show/hide the user interface as needed based on whether height exceeds the CSS height of the div with overflow:hidden.
I would need to build a html table that has a horizontally scrollable column. The scroll should be placed in the column's header.
My first question is: do you know any jQuery plug-in that is able to do this?
My second question: is this possible using a single table? I've heard that in order to do this you need to use multiple synchronized tables that look like a single one from the user's perspective.
Any idea/advice would be welcomed.
I've only seen something like this using jqGrid, but that was two tables (the master table has a second scrollable table within it). I'd like to know a plugin for this as well...
I would do as you suggested and use 2 containers. They'd both be set to overflow:scroll and have a set width, but the top one would simply contain a div that you can set to be the same width as your table. You can then bind to the "scroll" event in jquery, and set the scroll position of the divs to match each other in that event. Honestly I haven't tried this so I don't know how reliably that event fires, but in theory it should work.
Alternatively, you could do without the standard browser scrollbar and write your own scrollbar that uses javascript to set the position of your table in the overflow:scroll div. If you want draggable behavior (not just left/right arrows), it could be somewhat difficult, but wouldn't be impossible.