CODEWITHSUNDEEP
javascriptcss
Vijunav Vastivch
Vijunav Vastivch

Reputation: 4191

Scroll bar when scroll right i need the element always stay in the right

I have a situation:

in this page the bordered label in red in the right side which is the default of a table enter image description here

And when i moved the sroll bar to the right the bordered label in red move to the center enter image description here

The problem is i don`t need the bordered labeled in red to move wherever in scrolled right or left. what i mean is i need that bordered labeled in red to stay on the right when scrolled right or left.

This is the table Code:

   <table class="table table-striped datatable-responsive overflow-auto" id="table">

and im just thinking to right a function like 

function whenScrolled()
{
   var element = document.getElementbyId("labelborderedinred");
   //set the position of element current position + new position?
}

the element of red labeled on top

#table_length

the element of red labeled below

#table_paginate

Any idea is pretty much appreciated. Thanks in advance.

Upvotes: 0

Views: 49

Answers (1)

Atul Rajput
Atul Rajput

Reputation: 4178

The thing you want is abit tricky, yuou need to have the HTML structure to get this done,if you keep the HTML structure like the example below, you can do it with the CSS only. you need to play with your css a bit to as I am not aware of your table data

.table {table-layout: fixed; width: 100%;min-width: 1000px;}
td {background: #ddd;}
.parent {
    overflow: hidden;
    position: relative;
}
.tableWrapper {
      position: relative;
    overflow-x: auto;
    padding-bottom: 40px;
}
.nextPrevious {
  position: absolute;
    right: 10px;
    top: 40%;
}
<div class="parent">
<div class="tableWrapper">
<table class="table table-striped datatable-responsive overflow-auto" id="table">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
</div>
<div class="nextPrevious">Next previous Div</div>
</div>

Upvotes: 1

Related Questions