Make tbody scrollable with use position:relative in IE - javascript

I want to create table with fixed header. And scroll tbody left and down. If I do thead and tbody as blocks (set style display:block and position:relative) it works for me in all browsers except IE. For IE I need to set position:fixed. But if I use position:fixed after dynamically adding new row the scroll position is reset.
Example: http://jsfiddle.net/9nezW/33/
How can I make tbody scrollable with use position:relative in IE?
Thanks

Try setting overflow: auto in the tbody's css.

An example I found here: http://monolinea.com/clients/csstests/tablescroll.html has a table that works in IE, still trying to figure out the differences between mine and theirs. May help you to take a look at it's source.

Related

sticky thead when table is fit-content

I have a page which consists of some header information on the top and a table below it. The header is expanded onLoad and the table is set to a max-height of 500px. This table will then be scrollable by default and its thead is sticky.
However, there's an option to collapse this header div, which then sets the table's max-height to fit-content. Now, the whole page is scrollable instead of just the table. Problem is, the thead is no longer sticky.
$("#table").css({ "max-height": "500px" });
https://jsfiddle.net/3k2vnqyh/ is an simple example. Notice the thead is sticky when you scroll, then click the button which hides the div and gets rid of the table's scroll and makes the page scrollable instead, but also gets rid of the sticky thead. I'm just trying to unconditionally have the thead remain sticky. I'm using Chrome btw.
This seems to be a popular topic. I've tried solving it with css by using a variation of making the thead and "tds of the thead" have sticky positions and other attributes. But no dice. I'm using Bootstrap too.
Any ideas

Programmatic scroll on a div with parent with overflow-x hidden

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

What prevents .row div from scrolling?

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.

Fixed column table like structure

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

Is it possible to implement vertical scroll bar in a drop down menu using CSS alone?

I would like to implement a vertical scroll in a drop down menu when the options in the menu exceed 8.Is it possible to achieve this by using Css properties alone?Please let me know how I should go about this
Set an "overflow: auto" property on the containing div. To collapse the div if it is less than 8 items then you will need to use the max-height: property. It will not work for IE6 so use a hack to get around IE6.
That is absolutely possible using CSS. All you need to do is set a fixed height on the menu (so set the height to however tall 8 items is) and give it overflow-y: auto. This tells the browser that if the fixed height is exceeded, a vertical scrollbar should appear.
on your ul li ul add the height you want for example height:80px; and overflow-y:auto;

Categories

Resources