Enable Scrolling on my sidenav - javascript

I am trying to enable scrolling on my sidenav in the same way that i usually do when i get overflow in normal divs, but there is something about the nav itself that is preventing me from being able to do this, such that the items on the sidenav-list that overflow the screen cannot be accessed.
here is the sidenav code in the html:
<div pageslide ps-open="ctrl.checked" class="blue-grey darken-1 white-text">
<a ng-click="ctrl.toggle()" class="button">✖</a>
<div style="padding:20px" id="demo-right">
<table class="bordered responsive-table">
<thead>
<tr>
<th data-field="id">Company</th>
<th data-field="name">Shares Owned</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="stock in ctrl.myPortfolio.stocksInPortfolio">
<td>{{stock.stock.name}}</td>
<td>{{stock.qty}}</td>
</tr>
</tbody>
</table>
Portfolio: {{ctrl.total | currency}}
</div>
</div>
And here is what I was trying to do in the css:
#sentimentDataTwo {
overflow: hidden;
overflow-y: scroll;
}
#demo-right {
overflow: hidden;
overflow-y: scroll;
}
I included #sentimentData which is a working css mod creating a scrollable div, but #demo-right is where i try to apply it to my sidenav. Also the sidenav is a pop-out. Any thoughts?

Maybe it's because your div doesn't have a height, which means the height is adjusted to your content. Let me know if it helps. If not, could you provide a JSFiddle? Even though you have some dynamic data, it would help a lot if you could prepare a similiar situation.
#demo-right {
overflow: hidden;
overflow-y: scroll;
height: 300px;
}

Related

Is there a way to center my tables/images in this codepen?

So I've recently started learning how to code. I decided to make a website with all of the smash character damage values. My main setback so far is I have been unable to find a way to center all my differently sized tables and my images.
SO far I have tried to put all my tables into divs and centering them with auto margins on left and right. Additionally I have tried to flexbox my tables and center them that way but nothing seems to work. It seems to me that the only option I have left is to manually center them all but that seems like it would take forever and I am confident there is a different solution.
Here are how my tables are currently configured
#damagetablemario {
display:none;
position:absolute;
top:700px;
left:80px;
border-collapse:collapse;
}
#damagetablemario2 {
display:none;
position:relative;
top:400px;
left:110px;
border-collapse:collapse;
}
#damagetablemario3 {
display:none;
position:relative;
top:450px;
left:540px;
border-collapse:collapse;
margin-bottom:200px;
}
Here are how my tables are written in html
<table id = "damagetablemario">
<tr>
<th>Neutral</th>
<th>Forward Tilt</th>
<th>Up Tilt</th>
<th>Down-Tilt</th>
<th>Forward-Smash</th>
<th>Up-Smash</th>
<th>Down-Smash</th>
<th>Neutral-Air</th>
<th>Forward-Air</th>
<th>Back-Air</th>
<th>Up-Air</th>
<th>Down-Air</th>
</tr>
<tr>
<td class = "Neutral">2.2% (punch)<br>1.7% (punch)<br> 4% (kick)</td>
<td class = "Forward-Tilt">7%</td>
<td class = "Up-Tilt">5.5%</td>
<td class = "Down-Tilt">5% (foot) <br> 7% (body)</td>
<td class = "Forward-Smash">17.8% (fire)<br> 14.7% (arm)</td>
<td class = "Up-Smash">14%</td>
<td class = "Down-Smash">10% (front)<br> 12% (back)</td>
<td class = "Neutral-Air">8% (clean)<br> 5% (late)</td>
<td class = "Forward-Air">12% (early)<br> 14% (clean)<br> 10%(late)</td>
<td class = "Back-Air">10.5% (clean)<br> 7% (late)</td>
<td class = "Up-Air">7%</td>
<td class = "Down-Air">1.4% (1-5 hits) <br>
5.5% (hit 6) <br>
2% (landing)
</td>
</tr>
</table>
<table id = "damagetablemario2">
<tr>
<th>Grab</th>
<th>Pummel</th>
<th>Forward Throw</th>
<th>Back Throw</th>
<th>Up Throw</th>
<th>Down Throw</th>
<th>Neutral Special</th>
<th>Side Special</th>
<th>Up Special</th>
<th>Down Special</th>
<th>Final Smash</th>
</tr>
<tr>
<td>0%</td>
<td>1.3%</td>
<td>8%</td>
<td>11% (throw)<br>8% (collateral)</td>
<td>7%</td>
<td>5%</td>
<td>5% (early)<br>4% (late)</td>
<td>7% 1.5x <br> projectile reflect</td>
<td>5% (hit 1)<br> 0.6% (hits 2-6)<br>3% (hit 7)</td>
<td>0%</td>
<td>2% (early)<br>2.5% (clean)<br>3% (late)</td>
</tr>
</table>
<table id = "damagetablemario3">
<tr>
<th>Floor Attack Front</th>
<th>Floor Attack Back</th>
<th>Floor Attack Trip</th>
<th>Edge Attack</th>
</tr>
<tr>
<td >7%</td>
<td >7%</td>
<td >5%</td>
<td >9%</td>
</tr>
</table>
My end goal is to have my tables centered in the middle of my screen regardless of how much text is in them.
https://codepen.io/JariCarlson/pen/pBYOjb
I see most of the styling in your css are done using an ID (#). Due to this the same set of styles are repeated multiple times which makes your CSS file larger. Better approach is to create one CLASS with all common styling and use the class name multiple times in your HTML. This way amending your styles/maintaining will be very simple. This is the exactly what you are facing now :)
So one way to do this is by using grid. By doing this there's is no need to have left margins for your tables. So
Remove all left: styling on all tables
Remove display: none; on all tables
If position: absolute; use width: 100%;
CSS:
table {
display: grid;
justify-items: center;
}
#damagetablemario {
/* display:none; */ /* remove */
position:absolute;
width: 100%; /*Add */
top:700px;
/* left:80px; */ /* remove */
border-collapse:collapse;
}
#damagetablemario2 {
/* display:none; */ /* remove */
position:relative;
top:400px;
/* left:110px; */ /* remove */
border-collapse:collapse;
}
#damagetablemario3 {
/* display:none; */ /* remove */
position:relative;
top:450px;
/* left:540px; */ /* remove */
border-collapse:collapse;
margin-bottom:200px;
}
Replace your left property to 0 and add this CSS property to your table
table {
display: flex;
justify-content: center;
}
you can also try transform: translateX(-50%);
Don't use display: block; for your tables. Use display: table; remove left and set margin: auto;

Linked Horizontal Scrolling With Two Divs

I have two tables, one is a table with just the table headers, the other table contains all the table data. Both tables are inside their own separate divs. I'm trying to make it so that scrolling horizontally on the table data div will trigger an event in JavaScript that will scroll the table header div at the same rate. I know I could get rid of the divs and just have one table with sticky headers, but I want to try to do it this way. Here's a simplified version of code that I thought would work:
HTML:
<div id = "div1">
<table id = "stickyheaders" class = "table table-condensed table-striped small">
<thead><tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
<th>header6</th>
<th>header7</th>
<th>header8</th>
<th>header9</th>
<th>header10</th>
</tr></thead>
</table>
</div>
<div id = "div2">
<table id = "tablebody" class = "table table-condensed table-striped small">
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
<td>data7</td>
<td>data8</td>
<td>data9</td>
<td>data10</td>
</tr>
</tbody>
</table>
</div>
JavaScript:
$(document).ready(function() {
$('#div2').on('scroll', function () {
$('#').scrollLeft($(this).scrollLeft());
});
} )();
And here's the fiddle
Am I missing something stupid here? Thanks in advance for your help. I know this is similar to another question asked here, but that one doesn't have an answer and didn't really help me out.
You are missing the core scrolling stuff. Replace the $('#') with the right id and remove the () at the end. And yea, add jQuery:
$(document).ready(function() {
$('#div2').on('scroll', function() {
$('#div1').scrollLeft($(this).scrollLeft());
});
});
#div1 {
width: 50%;
height: 40px;
padding: 10px;
border: 1px solid #c0c0c0;
border-radius: 5px;
overflow-y: auto;
overflow-x: auto;
label {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: auto;
clear: both;
}
}
#div2 {
width: 50%;
height: 50px;
padding: 10px;
border: 1px solid #c0c0c0;
border-radius: 5px;
overflow-y: auto;
overflow-x: auto;
label {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: auto;
clear: both;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1">
<table id="stickyheaders" class="table table-condensed table-striped small">
<thead>
<tr>
<th>header1</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
<th>header6</th>
<th>header7</th>
<th>header8</th>
<th>header9</th>
<th>header10</th>
</tr>
</thead>
</table>
</div>
<div id="div2">
<table id="tablebody" class="table table-condensed table-striped small">
<tbody>
<tr>
<td>data1</td>
<td>data2</td>
<td>data3</td>
<td>data4</td>
<td>data5</td>
<td>data6</td>
<td>data7</td>
<td>data8</td>
<td>data9</td>
<td>data10</td>
</tr>
</tbody>
</table>
</div>
Scrolling on the bottom div will scroll the top one. Add jQuery to the jsFiddle.
Fiddle: https://jsfiddle.net/2xt1p8t7/
I came across this while trying to answer my own question.
Slightly expanded solution. I was trying to link two divs in a similar manner, so that one scrolled with the other. Here is the initial code (both divs had a class called joinscroll).
$('.joinscroll').on('scroll touchmove mousemove', function(e){
if ($(this).attr("id") == "topdiv") { $('#bottomdiv').scrollLeft($(this).scrollLeft()); }
if ($(this).attr("id") == "bottomdiv") { $('#topdiv').scrollLeft($(this).scrollLeft()); }
})
The problem that I had was that during scrolling, the scroll on the div being scrolled by the function was being detected by the browser, which was causing the function to be executed for that div's scroll. This caused really jerky scrolling, basically because there was a feedback loop.
I tried tricks with preventDefault and stopPropagation, but they didn't work.
In the end, the simplest solution was to detect which div the mouse was hovering over and use that to suppress the other function:
$('.joinscroll').on('scroll touchmove mousemove', function(e){
if ($(this).is(':hover')) {
if ($(this).attr("id") == "topdiv") { $('#bottomdiv').scrollLeft($(this).scrollLeft()); }
if ($(this).attr("id") == "bottomdiv") { $('#topdiv').scrollLeft($(this).scrollLeft()); }
}
})
Hope this helps somebody.

Unable to keep the table column width fix with CSS colgroup

p {
width: 40px;
margin: 0;
padding: 0;
}
td {
padding: 0;
margin: 0;
}
<table style="width:100px;">
<colgroup>
<col style="width:20px;">
<col style="width:40px;">
<col style="width:40px;">
</colgroup>
<tr>
<th>ID</th>
<th>NAME</th>
<th>Email</th>
</tr>
<tbody>
<tr>
<td>1</td>
<td>john</td>
<td>
<p>johntheman#example.com dsdsdsdsdsd dsdsdsdddddddddddddddddddddddsd dsdsssssssssssssdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsdsds
sadddddddddddddddddddddddddd
</p>
</td>
</tr>
</tbody>
</table>
I have simple table with fix width. I also have fix width for columns in it to do that I have used CSS colgroup.
Problem 1:
Width of my columns if I check in developer's tool is different than that of what I have given in colgroup.
What I have tried
While fixing it I have found that the width changes with the text in it if I increase the text td increases and vice versa.
Problem 2:
When I enter the text in td unless I don't break it on new line by hitting enter the width of td goes on increasing with text.
What I have tried
To tackle this problem I have wrap my text in a p tag with fix width and then put it in td but still no luck. What I see is width is getting applied to P tag but text is overflowing.
What I expect :
I would like to know that why text is not breaking itself on new line after the fixed width of td. Why text overflows out of P even after fix width? Why td has to increase even after fix width?
I don't know what I am missing to apply here.
for the table use css property
table-layout: fixed;
Then provide fixed with to your td columns.
The width of the <p> tag and <td> are fixed they are not increasing.
Until there is no space in your text content it will not wrap to next line. You have to use ellipsis which will put ... in place of overflowing text content. Use below css for your <p> tag.
p {
width: 40px;
margin: 0;
padding: 0;
text-overflow: ellipsis;
overflow: hidden;
}

table layout fixed - when th position is absolute

I have table inside a div,
<div class="divScroll">
<table class="table1">
<tr class="tableHeader">
<th>Header1</th>
<th>Header2</th>
<th>Header3</th>
<th>Header4</th>
<th>Header5</th>
</tr>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td>
<td>Data5</td>
</tr>
.....
.....
</table>
</div>
My CSS,
.divScroll
{
height: 25px;
overflow-y: auto;
width: 100%
}
.table1
{
width: 100%;
table-layout: fixed;
}
.tableHeader
{
position: absolute;
}
In the above coed, I am trying to make table scrollable with fixed header. That means when user scroll top-> bottom table header should remain fixed only table data should be scrolled.
I can achieve, scrollable table but problem is th col width are not aligned with td col width Since i applied Position : absolute for 'th'.
How to make both th and td col width aligned properly?
It is a very common question, already answered in the past.
Here some local resources:
Table header to stay fixed at the top when user scrolls it out of view with jQuery
Table with fixed header and fixed column on pure css
And here another external:
Fixed Header Table

Produce horizontal scroll for table 'tbody'

I have a traditional table with thead, tbody,etc. This is necessary for tablesorter.js.
What I have:
<div id="tableWrapper">
<div id="tableContainer" class="tableContainer">
<table id="scrollTable">
<thead class="fixedHeader">
<tr class="tableHeader even">
<th class="header">
<span>Name</span>
</th>
<th class="header">
<span>Address</span>
</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="tableRow">
<td class="td_0">
<span>
Doe, John
</span>
</td>
<td class="td_0">
<span>
Memory Lane
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
#tableWrapper tbody{
color:#00467f;
font-weight:500;
position:absolute;
overflow-y: auto;
overflow-x: scroll;
height:300px;
width:300px;
}
#tableWrapper #tableContainer{
width: 1100px;
overflow: hidden;
}
#tableWrapper tbody>tr{
width: 1200px;
}
I am keeping the table header section vertically fixed, so tbody position is absolute to keep the table header outside the tbody vertical scroll event. I tried setting the width of the tbody>tr to something higher than the tbody but no luck.
The tbody>tr width automatically shrinks to the size of the tbody.
Problem: I can't get the tbody horizontal scrollbar to scroll without horizontally scrolling the entire table, (thus the vertical scrollbar would disappear into the overflow:hidden). I want to just scroll the tbody horizontally and then I have some jquery to bind that event to the header. So no issue there. Just trying to get the horizontal scrollbar to scroll for tbody only.
I am able to get the tbody overflow-y:auto to work, but not overflow-x:auto. Is there a way to make the tr wider to get the tbody to scroll left and right? If so, how?
Ah I figured it out.
I added float:left; and display:block to the tbody>tr.
CSS:
#tableWrapper tbody>tr{
display:block;
float:left;
width: 1200px; /*desired width*/
}

Categories