Position sticky doesn't work on mozilla neither in safari - javascript

Position sticky doesn't work on mozilla neither in safari browser, but in chrome it's working perfectly. Is anyone there who can help me.. I know it we can make it don't by many others way which is "javaScript" but I don't wanna use javaScript in it.
table thead th { position: -webkit-sticky; position: sticky; top: -1px; background: #ccc;}
.table-div {max-height: 200px; overflow: auto;}
.table-div table td {min-width: 200px;}
<div class="container">
<div class="row nopadding">
<div class="table-div table-responsive">
<table class="table table-bordered">
<thead>
<th>head1</th>
<th>head1</th>
<th>head1</th>
<th>head1</th>
</thead>
<tbody>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
<tr>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
<td style="height: 50px;"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>


Position: sticky is not a standard, so it may works, depending of the browser and the version, or even you need to set some flags in web browser config.
You can check this availavility here:
http://caniuse.com/#feat=css-sticky
As you can see, in known issues:
Chrome, Firefox and Safari 7 & below do not appear to support sticky table headers. (see also Firefox bug)


Since its only table elements which aren't responding properly to position: sticky and since it's only the th elements you want to apply to the sticky positioning to, why not build a custom thead and apply position: sticky to that custom thead?
Working Example:
.custom-thead {
position: -webkit-sticky;
position: sticky;
top: -1px;
min-width: 816px;
}
.custom-thead .custom-th {
display: inline-block;
position: relative;
left: 2px;
min-width: 202px;
margin-right: 2px;
background-color: #ccc;
}
.table-div {
max-height: 200px;
overflow: auto;
}
.table-div table td {
min-width: 200px;
height: 50px;
background-color: #eee;
}
.custom-th {
font-weight: bold;
}
.custom-th, td {
text-align: center;
}
<div class="container">
<div class="row nopadding">
<div class="table-div table-responsive">
<div class="custom-thead">
<div class="custom-th">head1</div><div class="custom-th">head1</div><div class="custom-th">head1</div><div class="custom-th">head1</div>
</div>
<table class="table table-bordered">
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Related

How to Fix the TD elements of first column of the table body while the rows are scrolling?

The title is not clear, I know. Let me explain what I mean:
First column has td elements which have varying rowspans. What I want is to keep the td text in first column 'fixed' at the top while scrolling down.
But only as long as the rest of the td elements in the remaining columns are in scope.
Once all the rows (which the first column cell is spanning) is out of table view, the td element should scroll out of the view and the next td should now start fixing.
After Scrolling a bit:
And after All the animal rows are scrolled out, the fixed 'Animal' td would also go up and then 'Cars' would be fixed and then Hats would be fixed like this:

I got it working by setting
vertical-align: top; for the element
and created a div under the td element which contains the actual value for the cell
then applied position: sticky; top:0; z-index: 1; to the div.
Working fiddle: https://jsfiddle.net/ankitkraken/yw0jhzpu/1/
HTML:
<td class="td-class-name" rowspan="3">
<div class="level-1">
"Cars"
</div>
</td>
CSS:
.td-class-names{
vertical-align: top;
}
.level-1{
position: sticky ;
top: 80px;
z-index: -1;
}
I had to use top: 80px;, top:0; was putting the td contents BEHIND the sticky table header.

You can acheive this result with the sticky positioning:
thead tr:first-of-type {
position: sticky;
top: 0px;
z-index: 10;
}
thead tr:first-of-type th {
background: yellow;
}
th {
border: 1px solid;
padding: 6px;
}
td {
border: 1px solid;
padding: 6px;
}
th[rowspan]>.box {
vertical-align: top;
position: sticky;
top: 34px;
}
th[rowspan][data-order='first'] {
background: orange;
}
th[rowspan][data-order='second'] {
background: green;
}
th[rowspan][data-order='third'] {
background: indianred;
}
th[rowspan][data-order='fourth'] {
background: lightblue;
}
.main-container {
position: relative;
}
.table-container {
position: static;
max-height: 180px;
max-width: 350px;
;
overflow-y: scroll;
}
.fake {
width: 100%;
height: 100px;
}
<div class="main-container">
<div class='table-container'>
<table>
<thead>
<tr>
<th>CATEGORY</th>
<th>TYPE</th>
<th>NAME</th>
</tr>
</thead>
<tbody>
<tr>
<th data-order='first' rowspan='5'>
<div class='box'>Animals</div>
</th>
<td>Dog</td>
<td>Bob</td>
</tr>
<tr>
<td>Dog</td>
<td>Flash</td>
</tr>
<tr>
<td>Cat</td>
<td>Mimi</td>
</tr>
<tr>
<td>Dog</td>
<td>Casper</td>
</tr>
<tr>
<td>Horse</td>
<td>Wind Lady</td>
</tr>
<tr>
<th data-order='second' rowspan='5'>
<div class='box'>Cars</div>
</th>
<td>Chrysler</td>
<td>Ann</td>
</tr>
<tr>
<td>Dodge</td>
<td>Christine</td>
</tr>
<tr>
<td>Ford</td>
<td>Foo</td>
</tr>
<tr>
<td>Ferrari</td>
<td>Dandy</td>
</tr>
<tr>
<td>Mercedes</td>
<td>A200</td>
</tr>
<tr>
<th data-order='third' rowspan='5'>
<div class='box'>Food</div>
</th>
<td>Apple</td>
<td>George</td>
</tr>
<tr>
<td>Banana</td>
<td>Rocco</td>
</tr>
<tr>
<td>Strawberry</td>
<td>Liza</td>
</tr>
<tr>
<td>Ananas</td>
<td>Ted</td>
</tr>
<tr>
<td>Avocado</td>
<td>Gary</td>
</tr>
<tr>
<th data-order='fourth' rowspan='5'>
<div class='box'>Phones</div>
</th>
<td>Iphone XXI</td>
<td>ObiWan</td>
</tr>
<tr>
<td>Nokia 8110</td>
<td>Neo</td>
</tr>
<tr>
<td>Ericsson</td>
<td>Dr. Who</td>
</tr>
<tr>
<td>Huawei Mate 40</td>
<td>Dead or Alive</td>
</tr>
<tr>
<td>Xiaomi</td>
<td>Ping</td>
</tr>
</tbody>
</table>
<div class='fake'>
</div>
</div>
</div>
Sticky positioning is not always straightforward, expecially when dealing with overflow properties and display: table. Here are some useful resources about these topics:
Position: stuck; — and a way to fix it
CSS Position Sticky - How It Really Works!
Creating sliding effects using sticky positioning
Position Sticky on <td> with colspan?

Toggle that reveal text one at a time by click

I have a problem with my code. The goal is to have a text that appear when a user click on the link. But I want also that when he clicks on the link the only text that show is the text underneath and not in all the cells. Can someone has a clue on what I did wrong? I will probable add other links (more than 2) and I want to be sure that it will work every time.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$('.cat' + $(this).attr('data-prod-cat')).toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>

You have just to go up to the parent table using closest('table') function and then select all the text's related to the current clicked .toggler using .find('[class^="cat"]') like :
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
Hope this helps.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).closest('table').find('[class^="cat"]').toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td>
<a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>

Based on your code, I guess you are trying to use data-prod-cat attribute to know which block needs to appear.
But in both of your block you have data-prod-cat="1" which means that you will activate both blocks on every action.
Try changing the 2nd block attribute to :
data-prod-cat="2"
You'll also need to update the css class in your other <tr>

You need to get the parent of <a> first then get that parent which is <tr>. Finally filter on cat1 class to toggle all siblings containing the cat1 class.
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).parent().parent().siblings().filter(".cat1").toggle();
});
});
$(document).ready(function() {
$(".toggler").click(function(e) {
e.preventDefault();
$(this).parent().parent().siblings().filter(".cat1").toggle();
});
});
a {
color: #002642;
}
.center {
text-align: center;
}
.toggler,
.cat1 {
font-family: 'Varela Round';
color: white;
}
td {
display: block;
width: auto;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 10px;
}
#media only screen and (min-width: 70em) {
td {
display: table-cell;
border: 1px dotted #c4a77d;
background-color: #c4a77d;
color: white;
margin-bottom: 0px;
}
}
p {
font-family: 'Varela Round';
font-weight: bold;
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<table cellpadding="0" cellspacing="5" style="table-layout: fixed; width:100%" width="100%">
<tbody>
<tr>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>SOCIÉTÉS: 230</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 40</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 190</td>
</tr>
</tbody>
</table>
</td>
<td>
<table style="width: 100%;text-align:center;">
<tbody>
<tr>
<td>
<p>CONTACTS: 16 700</p>
</td>
</tr>
<tr>
<td><a class="toggler" data-prod-cat="1" href="#">+ En savoir plus</a></td>
</tr>
<tr class="cat1" style="display:none">
<td>Part CAC 40 : 10 000</td>
</tr>
<tr class="cat1" style="display:none">
<td>Part Filiales +100MK€: 6 700</td>
</tr>
</tbody>
</table>
</td>
<td>
<p>EMAIL NOMINATIF</p>
</td>
<td>
<p>OPT OUT</p>
</td>
<td>
<p>LIGNES DIRECTES/MOBILES</p>
</td>
</tr>
</tbody>
</table>

Javascript - fix table sidebar when scrolling

I have a jsfiddle here - https://jsfiddle.net/4eohzxwn/1/
$("div").scroll(function(){
$('.static').css({
"position": "absolute", "top": 0
});
});
I need the left static column to be fixed when the rest of the tabel scrolls.
I think Jquery/javascript is the only option.
Is it possible to keep the red static element in postion and scroll the rest of the table.
I also need to keep the rows height when it scrolls so it doesn't just go to one line

Try this Code
use translate instead of position
$("#wrap").scroll(function(){
var translate = "translate("+this.scrollLeft + "px,0)";
$('.static').css('transform',translate);
});
table{
width: 600px;
}
.static{
border: 1px solid red;
width: 100px;
word-wrap: break-word;
background-color:#fff;
}
.scroll{
border: 1px solid green;
width: 500px;
}
#wrap{
border: 1px solid blue;
width: 400px;
overflow: scroll;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<table>
<tbody>
<tr>
<td class="static">Staticdfxcvzx
cvzxcvzxcv</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
</tbody>
</table>
</div>

Have you looked at this question?
HTML table with horizontal scrolling (first column fixed)
You're using jQuery in your snippet and in the answer there's a link to this plugin that seems to solve your issue, but you can probably achieve what you want with just CSS.

You can do this using simple html and css,no need to write jquery for this.Please refer to my code below.
table{
width: 600px;
}
.static{
border: 1px solid red;
width: 100px;
word-wrap: break-word;
position:absolute;
width:5em;
left:0;
top:auto;
}
.scroll{
border: 1px solid green;
width: 500px;
}
#outerdiv {
position: absolute;
top: 0;
left: 0;
right: 5em;
}
#innerdiv {
width: 100%;
overflow-x:scroll;
margin-left: 5em;
overflow-y:visible;
padding-bottom:1px;
}
.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px;
/*only relevant for first row*/
margin-top:-3px;
/*compensate for top border*/
}
<div id="outerdiv">
<div id="innerdiv">
<table>
<tbody>
<tr>
<td class="static">Staticdfxc</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
</tbody>
</table>
</div>
</div>

$("#wrap").scroll(function(){
var translate = "translate("+this.scrollLeft + "px,0)";
$('.static').css('transform',translate);
});
table{
width: 600px;
}
.static{
border: 1px solid red;
width: 100px;
word-wrap: break-word;
}
.scroll{
border: 1px solid green;
width: 500px;
}
#wrap{
border: 1px solid blue;
width: 400px;
overflow: scroll;
position: relative;
}
.static
{
background-color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<table>
<tbody>
<tr>
<td class="static">Staticdfxcvzx
cvzxcvzxcv</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
<tr>
<td class="static">Static</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
<td class="scroll">scroll</td>
</tr>
</tbody>
</table>
</div>

How to get css or java class for specific part of code

Here's my code:
<div id="togglemenu2" class="sidetogglemenu">
<table class="hoverTable">
<tbody>
<tr>
<td colspan="2"> Example </td>
</tr>
<tr>
<td colspan="2">
<img class="gpablogo" src="http://s2.postimg.org/yb2yzb5fd/gpab.png">
<div class="gpab1">
<p>1</p>
</div>
<div class="gpab2">
<p>2</p>
</div>
<div class="gpab3">
<p>3</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
How can I move numbers 1,2,3 between G and P and Ab? I need a CSS code to move those numbers look like this:
G1 P2 AB3
Thanks in advance

Here is one way of realizing your layout. Create a wrapping element .logowrap around the image and the labels, and specify position: relative.
You can then use absolute positioning to place the labels where you need them.
.logowrap {
display: inline-block;
border: 1px dotted blue;
position: relative;
}
.logowrap img {
vertical-align: top;
}
.logowrap .gpab {
display: inline-block;
position: absolute;
top: 50%;
font-size: 2.00em;
}
.gpab.n1 {
left: 25%;
}
.gpab.n2 {
left: 50%;
}
.gpab.n3 {
left: 90%;
}
<div id="togglemenu2" class="sidetogglemenu">
<table class="hoverTable">
<tbody>
<tr>
<td>Example</td>
</tr>
<tr>
<td>
<div class="logowrap">
<img class="gpablogo" src="http://s2.postimg.org/yb2yzb5fd/gpab.png">
<div class="gpab n1">1</div>
<div class="gpab n2">2</div>
<div class="gpab n3">3</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>

element inside td is not taking td full height if table height is auto

inside td I am taking a table, but somehow table is not taking the td full height. can any one help me to fix this issue.
html for table:
<table style="height: auto">
<tr>
<td style="background-color: red">
<table style="background-color: orange">
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>

You can't force an object to take up 100% of the height of a cell without writing some JavaScript that will figure out the height of the cell and resize the table programatically.
I'm not really sure what your goal is with this, but you can achieve the look you seem to want by setting the background on the td and set a border to get the red outline.
<table style="height: auto">
<tr>
<td style="background-color: orange; border: solid red 1px">
<table>
<tr>
<td>
<div style="height: 20px; width: 2px; background-color: black; vertical-align: top"></div>
<div style="height: 2px; width: 20px; background-color: black; vertical-align: bottom"></div>
</td>
</tr>
<tr style="height: 100%;">
<td>
<div style="height: 100%; width: 2px; background-color: black;"></div>
</td>
</tr>
</table>
</td>
<td style="background-color: yellow">
<table>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Expression</td>
</tr>
</table>
</td>
</tr>
</table>

Categories

Resources