Develop Reference

Fixed inner divs on scrollable outer

I have some page content in a React web app where certain fields should remain fixed as the user scrolls. The part that's throwing me off is this content is contained within a scrollable outer div. That outer div must remain scrollable because it occasionally loads different components that need it.
Here is the div structure:
<div class="inner"><!-- overflow-y: auto; (this must remain)-->
<div class="wrapper">
<div class="titleBar"> <!-- I need this to not scroll -->
<div class="mainTable">
<table>
<th>...</th> <!-- I need this to not scroll -->
<tbody>
...
</tbody>
</table>
</div>
</div>
</div>
</div>
So as the user scrolls down the page, the title bar and table header should remain fixed, with the table body content being the only thing on the page that is scrolling. I'm not able to just make the table body scrollable because that will put a scrollbar on the table itself, it needs to scroll on the actual page scroll.
Most posts on this I've been able to find are using JQuery, but since this is within ReactJS I'm looking for other solutions.

Correct table head structure is:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
</table>
Then try customize thead th css as following:
thead th {
position:sticky;
top: 0
}

datatable js DOM elements positioning issue

I have a small formatting issue. It can be because I don't fully understand the data tables formatting.
HTML code
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
<h1 class="page-header">Test Runs</h1>
<div class="table-responsive">
<table class="table table-striped" id="tests">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
</tr>
</tbody>
</table>
</div>
The outer div is present because i have a side menu bar which is not shown here.
JS code
$(document).ready(function() {
$('#tests').DataTable( {
dom:
"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-3'i><'col-sm-6 text-center'B><'col-sm-3'p>>"
} );
} );
In the above js code, if I don't add "dom" element the filter results and search bar are not in the same row , they are one below the other.
The same applies to information and pagination.
I want the four elements to be in four corners of the screen.
eg:
length changing input control : top left
filtering input : top right
table information summary : bottom left
pagination control : bottom right.
With the current code (with the "dom" added) I am able to achieve this but now there is a horizontal scroll which I don't want.
Can someone tell me what mistake I made.

You can place the relevant elements in the bootstrap panel.
$(document).ready(function() {
var table = $('#example').DataTable({
"dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
}); });
Demo : http://jsfiddle.net/a62hqqf9/
You can also look again for the use of DOM elements : datatable dom

The main reason for horizontal scroll is negative margins of .row. You need to remove negative margins with custom class. I have added .no-gutters in the snippet example as you are probably using Bootstrap 3. If you are using Bootstrap 4, the class comes with Bootstrap CSS.
Demo: Working example

adjust main container width according to table width

Is it possible ..if table width increase then its main container widths increase according to that. Is it possible ??
<div class="container main-con">
<table class="table table-hover"> <tr><td></td></tr>
</table>
</div>
here if data increase in table then table is coming outside the container. so is it possible to increase width of main container according to table width

Having a container that is wider than the screen is almost always a very bad user experience. People (with good reason) don't like to scroll left and right. Instead you are better off making only your table scroll left/right.
You should be able to achieve this quite easily by making the table responsive. from the Bootstrap docs:
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally
For example:
<div class="table-responsive">
<table class="table table-hover">
<tr>
<td></td>
</tr>
</table>
</div>

Static <div> next to scrolling <div>

I am working with bootstrap and I have a div, which inside of that is 2 more side by side. Naturally, I took the row approach to get the desired result, but I ran into a problem. The div I am designing is for a small web widget on ozone (not that that matters now) but when I have the window the size it is going to be it pushes the second div down below.
The code, with them stacked (no row implementation) is:
<div style="margin: 1em">
<h4>User Card</h4>
<i class="fa fa-user fa-5x"></i>
<h6>User: {{username.slice(5)}}</h6>
<h6>Total Score: {{totalscore.toFixed(3)}}%</h6>
<table class="table table-hover table-striped">
<thead>
<th>#</th>
<th>Model</th>
<th>Score</th>
</thead>
<tr data-ng-repeat=" item in infractions | orderBy : '-score' | limitTo : 10 " ng-click="launch()" ng-style="setColor(item.score)">
<td>{{$index + 1}} </td>
<td>{{item.name.replace("_"," ")}}</td>
<td>{{item.score.toFixed(3)}}</td>
</tr>
</table>
</div>
So I want the little user icon in the top left corner with username and score below it. And I want the table over to the right (at the same height) but I want to be able to scroll the table if necessary, but the user information to remain static.
EDIT Here is the code that has row implementation in it but still they only stay in the same row when the window is like 3/4 width.
<div id="wrapper">
<div style="margin: 1em">
<h4>User Card</h4>
<div>
<div class="row">
<div class="col-lg-1">
<h6>User: {{username.slice(5)}}</h6>
<h6>Total Threat Score: {{totalscore.toFixed(3)}}%</h6>
</div>
<div class="col-lg-3">
<table class="table table-hover table-striped">
<thead>
<th>#</th>
<th>Risk Model</th>
<th>Score</th>
</thead>
<tr data-ng-repeat=" item in infractions | orderBy : '-score' | limitTo : 10 " ng-click="launchIAT()" ng-style="setColor(item.score)">
<td>{{$index + 1}} </td>
<td>{{item.name.replace("_"," ")}}</td>
<td>{{item.score.toFixed(3)}}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>

I have a roughly working example here:
http://www.bootply.com/xWByEnAkXE
Basically, your 3/4 width issue is with the column tags you're using. You were using col-lg-* which only applies when the browser window is wide, which caused your issue of only staying in the same row when the browser window was large.
The height of the table is tricky unless you set an explicit CSS height on the table with overflow:scroll.
My example uses position:absolute on the table to set the height to 100% of the parent (using top:0;bottom:0). It's not pretty, and it's prone to break if you try to do too much advanced stuff in there, but it gets the job done.
Hope that helps!
Edit:
Tweaked the example to use media queries.

fixed headers in table, html

i had an table like this
<div style="overflow:auto">
<table>
<thead><tr style="position:fixed"><th></th></tr></thead>
</table>
</div>
Now my problem is when i scroll div the header(that is tr element) is fixed it works fine but when i scroll the scrollbar of window the header tr is not fixed inside the div. I moves along the scroll bar of the window... Can any one help me to find out the solution please

I don't know If I'm getting your question right, but you may find this helpful http://fixedheadertable.com/

Sorry, I tried to do it in CSS alone, but that didn't work out, so you do need a bit of Javascript.
<div style="overflow:auto; position:relative;"
onscroll="document.getElementById('fixedtr').style.top = this.scrollTop+'px';">
<table>
<thead>
<tr style="position:absolute; top:0; left:0" id="fixedtr">
<th>Table header</th>
</tr>
</thead>
See jsFiddle.
This is how you want it, right?