We Keep Coding

Scrolling with javascript and 'position: sticky' div

I have a react app that basically is a container with 2 columns. The left column is a list and the right column is a div with position sticky(It's actually a map with pins. Must be fixed on the screen). Each list item is a clickable in the right column. When the user clicks on the title, the screen must be scrolled to display the current list item on left column.
The problem is that when the screen scrolls to an item at the end of the list, the right column also scrolls and doesn't stay fixed.
I would like to keep the right column always fixed when the user clicks on some title, regardless of the element's position in the left column list.
Any idea how to fix it?
https://codesandbox.io/s/scrolling-with-react-yq81r

I change a couple of code on CodeSandbox.
.right {
background-color: #cacaca;
}
.right ul {
top: 0;
position: sticky;
}
If I understood correctly this gonna work.

Absolute TD inside TR with fixed table height makes the element appear below when there is scroll

I'm making a menu that shows on table row hover like Gmail, and it works well when there is no fixed height on my table element, however, to meet my application needs this table must have a fixed height and HTML must have overflow: hidden;.
Here's an example: CodePen example (hover any row to toggle menu)
Remove height="400px" and html { overflow: hidden; } to see it working as expected.
When there is no scroll on the table, it works well, however, if you scroll down the table you'll see that the menu position appears below the line (more scroll = more below it appears). I know it's happening because the table has a fixed height, but there is any way to fix this with just CSS (or any javascript fix in last case)?
Any help will be wellcome.

Bootstrap Collapse over an element

I'm using Bootstrap 3 to make a responsive website. However, I'm making a "portfolio".
You can see the website here as well as my "error".
http://basic-models.com/b/
Scroll down to "Our models" and click on "Informations". When you click on that button, it will collapse a new element below the profile picture of a model.
But that collapsible element is pushing the picture below the element to right for one column.
I guess I don't have to place code here since you can just right click > source code it.
Also, this is my first question on Stack Overflow, so I'm sorry if it is not formatted properly. Thank you for all the help.

You can change the CSS position attribute of the collapsing div to absolute. That way, the element will float over the below item - but you`ll have to apply styles a bit.
Try it like that:
.model-outer div.collapse {
position: absolute;
z-index: 1000;
background-color: white;
width:100%;
left:0px;
margin-top:10px;
}
You see, positioning and styles are not that good, but I assume you can start from there.

Since you are already using Bootstrap, I would suggest you to use default bootstrap dropdown . The problem with current code is that the div which shows the information is not absolutely positioned. So, whenever that div is displayed, it takes up the extra space and breaks the layout of the grid. Bootstrap dropdown uses absolute positioned div and hence it doesn't break the layout. Try using it and it will definitely solve this issue.

Table sorter width 100% does not work if table is contained into others tables

I use tablesorter (https://github.com/Mottie/tablesorter), with widget scroller.
You can find examples here : http://mottie.github.io/tablesorter/docs/example-widget-scroller.html
My problem is when tablesorter is contained into other tables like
<table>
<tr>
<td>
table sorter table
</td>
</tr>
</table>
table sorter does not take 100% of the width... And the horizontal scrollbar does not appear automatically.
You can find a example here : http://jsfiddle.net/oqfq47fc/8/
Whereas if table sorter is not contained in other table, its works...
You can find a example here : http://jsfiddle.net/oqfq47fc/9/
Can you help me? I works in portal context and contents portlets are inside table, and it is not possible to remove nested tables.
I think it's just a matter of css, but I know no more...
EDIT
I need that table takes 100% of width like this picture :
And when I resize the browser and that the all table can not display in the available space, a horizontal scrollbar appear at the bottom of the table like this picture :
It works good in my first example.
But in my second example with the outer table, the table look like this picture :
And when I resize the browser, the horizontal scroll bar does not appear on table but on window like this picture :

table{
display: block;
max-width: 100%;
overflow-y: hidden;
overflow-x: scroll;
width: 100%;
}
table.data-table,table#tvar_1{
display: table;
}
html{
overflow-x: hidden;
}
.tablesorter-scroller-table{
width: 100% !important;
}
Fiddle
Adding this set of code is as close as I can get to reproducing what you want with strictly tables. You are using tables for layout and you really shouldn't be doing that. The best way to go is to use the div the way you are in the second iteration where it is correct. It obviously displays the correct and best way. Also, with what I had to do to these tables it is not nice.
Do your best to avoid tables where tables are not needed. This is tabular data so it is needed, but using a table to construct the page is not the right way to go.

Enabling vertical scroll on HTML tables

I'm creating a table and populating it using javascript. I want to add a vertical scroll bar to the table, but on the data only, i.e. I want the table header to remain fixed, i.e. not be included in the scroll.
I want to use only javascript, CSS and valid HTML5 elements. At this stage I want to exclude jQuery. There have been many discussions on this topic, usually including horizontal scroll bars. I'm only interested in vertical scrolling and to me it is essential that the header columns must be aligned with the table data when scrolled. The discussions and my attempts to achieve this, lead me to believe this is impossible. If this is not the case can someone tell me how this is done?
So far I have made a number of attempts. Adding
table {
display: block;
height: 300px;
overflow: scroll;
}
causes vertical scrolling of the whole table, including the header and data, but the headers and data are aligned. Adding
thead {
display: block;
}
tbody {
display: block;
height: 300px;
overflow: scroll;
}
results in the header not scrolling, but the headers and data columns are no longer aligned. What appears to be happening is that the width of the header columns no longer takes account of the data columns.
I've tried numerous other approaches without success. I've had partial success by adding the same width value to header and data field columns based on the maximum field size, in characters, of the header and data values. With this approach I can get the header to align with the data for most columns. However, I don't regard this as an adequate solution, as it is in general not possible, or at least very difficult, to determine a value in em, px or mm, that will hold n characters exactly.
In the discussions I've seen, it seems that what I want to achieve is possible using jQuery. I've not yet embraced jQuery, but if it can easily enable what I want, it may be the time to do so. Can anyone confirm if what I want is possible in jQuery?
I find it hard to believe that what I want to do is not easily possible, as I would regard it as essential for any adequate handling of tables.

Maybe not the answer you're looking for, but a rather simple solution would be to put all the scrollable rows and columns within a scrollable div, and keep the headers and footers outside that div.

If you are willing to set your columns at a fixed width, you can basically make two tables - one for the header and one for the body, and then just set scrolling on the body.
HTML:
<table class="header">
<thead>
<td>Header</td><td>Header</td><td>Header</td>
</thead>
</table>
<table class="body">
<tbody>
<tr><td>data</td><td>data</td><td>data</td></tr>
...
</tbody>
</table>
And your css:
td, th{
width:50px;
}
table.body{
display: block;
height: 300px;
width:200px;
overflow: scroll;
}
See this jsFiddle.