Fixed column table like structure - javascript

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

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.

How to constrain rendered HTML code inside a div

I have a function that renders the HTML code from a textarea into a div of a certain size. The size of this div is determined when the page loads and is generally about 45% the width of the browser. I would like to know if there is any way to constrain what is rendered to not go out of the bounds of this div, but to instead add scrollbars if the rendered content exceeds the boundaries.
Basically, I'd like this div to behave like a browser window would when you render an HTML web page. Here is the code I have that does the rendering:
$(document).ready(function(){
$("#showmeImg").click(function(){
$("#outputContainer").html($(myEditor.getValue()));
});
});
So when 'showmeImg' is clicked, the contents of 'myEditor' is rendered and place within the 'outputContainer' div tag. All I have for this div tag are basic styling like background color, width, and height.
You should be able to get that effect using CSS. If you are setting the width programatically (as your question seems to suggest), then all you would need to do is set the height and overflow styles to get the desired behavior. Something like this:
#outputContainer {
height: 300px;
overflow: auto;
}
If you want the scrollbars to always be there (regardless of whether or not scrolling is needed for the current content), use overflow: scroll;.
You should add the CSS Rule 'overflow:auto' to the containing div. If the content spills outside of the div, scroll bars will be added automatically.
Have you tried something like this?
#outputContainer {
ovwerflow-y: auto;
}
This will add a vertical scrollbar, when there is enough content inside your container.
There are many nice jQuery plugins for adding nicer scrollbars though :).
http://enscrollplugin.com/ for example.

Make tbody scrollable with use position:relative in IE

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.

Categories

Resources