I would like to scroll each row horizontally. So on right arrow keypress normally the whole row should scroll to the left. In fact it was scrolling, before I added display: table in order to get the real width of row.
How to scroll .row?
Example, to show problem(need resize client area to show 2 cells):
https://jsfiddle.net/souren/98rddfzp/8/
Instead of using display: table, try using box-sizing: border-box.
Check this and this.
Here's your updated fiddle.
Related
It is exactly what it is described in the title.
I have a parent which has overflow-x: hidden.
I have 3 rows which has some content overflowing.
In this scenario I am not able to programmatically scroll one of the rows.
JS Fiddle: https://jsfiddle.net/w6v1xydn/5/
But if I change the rows to have overflow-x: auto, programmatic scrolling works but it also shows up a horizontal scrollbar.
JS Fiddle: https://jsfiddle.net/w6v1xydn/6/
Question: I want to understand why it is happening like that. And how can I get the scroll to work without the horizontal scrollbar showing up? (And no hiding the horizontal scrollbar using css is not an option)
PS: Would prefer a no plain HTML/CSS/JS answer. No jQuery
Update 1: Parent positioning doesn't seem to affect this
It works if you move
overflow-x: hidden
onto the row-class instead.
And you really don't need the overflow-x: hidden on the container as every item you put inside it so far has its width set to 100%.
Look here: https://jsfiddle.net/cornelraiu/w6v1xydn/8/
Setting the children divs to position relative like this:
#container > div {position: relative;left:0}
and then in js:
document.getElementById("row1").style.left = '-50px';
This should work
I have three div on my screen i.e. I divided my screen into three parts by placing three div, like three columns. When I scroll, complete page gets scrolled now. But I want to scroll only that div on which mouse is being hovered. How can I do it?
I think you need overflow: auto;
See:https://jsfiddle.net/j6vLdayu/
Even overflow-y: scroll would do. Just set a height or max heidht for each div and add overflow-y: scroll in CSS for each div.
http://jsfiddle.net/vishl/gyqu8/
I'm trying to synchronize the scrolling between two separate panels / divs.
One element has overflow: auto while the other has overflow: hidden (sort of trying to replicate a grid with frozen columns).
I can sync the scroll when the event happens within the element with overflow: auto but not the one with overflow: hidden (which is sort of normal if you ask me).
However, is there a workaround for this? I want to synchronize the scrolling both ways.
Here's a fiddle that will illustrate my issue (try scrolling in both panels): http://jsfiddle.net/0zzbkyqg/
Also, this thing seems to happen here already: http://demos.telerik.com/kendo-ui/grid/frozen-columns but I just can't understand how they're doing it.
Maybe you should make use of the wheel event which is triggered when you roll the mouse wheel, regardless of whether the section of the view has scrolled or not.
Demo
$("#panel-left > table").on('wheel', function (e) {
// your logic here
}
I'm thinking you don't need jQuery to do that.
Look here: http://jsfiddle.net/ty0jyr4y/
I've removed the position: absolute and overflow properties from the panels and added float: left to make them inline (could also use display: inline-block), and added height: 400px, width: 417px and overflow: auto to the container.
The container's width is set to 417px instead of 400px because the scroll bar takes 17 pixels of space (across all browsers according to here).
Works beautifully. Is this what you want?
I have a position: fixed div besides a div with long text inside a div with overflow: scroll. I want the text to scroll even if my cursor is hovering over the fixed div (which is the normal behavior when the window would be the scrolling element).
I made a fiddle: http://jsfiddle.net/jM2Eh/1/
I basically want the text to scroll while scrolling hovering over the red box.
UPDATE: I am using Twitter bootstrap in this particular case and updated the fiddle accordingly.
If JavaScript is needed for that, that would also be ok.
UPDATE2: I also tried this solution, but that causes weird flickering effects:
http://jsfiddle.net/jM2Eh/16/
Have you tried using padding-left on your text node instead of using two columns?
http://jsfiddle.net/j5BLm/15/
.text {
padding-left: 50%;
}
Another possible solution is to use pointer-events: none if you don't care about IE:
http://jsfiddle.net/codedigger/jM2Eh/18
I want to create a table like structure without using table,tr,td etc tags. The table should have its first column and headers fixed. I have fiddled it under this URL: http://jsfiddle.net/RtfZu/.
I am not able to create a vertical scroll-bar, which upon scrolling should scroll the frozen column too.
Any insights?
You need to make your .table-body-scroll div scrollable. In the fiddle it breaks due to the a width issue causing a double scroll bar, but you should be able to fix that by adjusting the width and setting the overflow-x to hidden
.table-body-scroll
{
overflow-y:scroll;
}
http://jsfiddle.net/RtfZu/3/
Try adding overflow-y: auto; and define a height to your .table element. This should scroll the entire table
By the way, i have created a jQuery plugin that would render table using tags. The table is configurable too. code4devs.com is the URL