I am trying an angular table to display data, I can able to produce data but when I try to apply vertical and horizontal scrolling, I want to apply scroll bars for the table rather than for the page, I could able to get it done but for whenever scroll bar is applied, table body columns are getting disturbed as below
https://stackblitz.com/edit/angular-lss9nk?file=src%2Fapp%2Fapp.component.html
You can remplace
overflow: auto;
with
overflow: overlay;
like :
table thead, table tbody, .trClass {
width: 100%;
display: block;
/* overflow: auto; */
overflow: overlay;
/*overflow-y: scroll;*/
}
Related
Is there any way to remove the horizontal scroll ?
There is no content towards the right but the area remains blank and scrolling comes .
The styles for modal are :
.ticketModal {
width: 1000px;
min-width: 1000px !important;
overflow: hidden;
max-width: 1000px;
}
You should add in your css overflow-x: hidden; to your main div or class, this will help you to remove horizontal scroll
If you don't want the horizontal scroll in the entire app. Simply add
*{
overflow-x: hidden;
}
This will remove the horizontal scroll for all the DOM elements
I am trying to build a two column design with an Angular 2 app. I created a plunker to reproduce my problem: https://plnkr.co/3Evxm9?p=info
I want the scrollable area to be the red div (.overflow), not the .page. Without the .page { overflow: auto } the page won't scroll at all, though I would expect .overflow to do so since it has a defined height of 100%. The padding is there to offset from the .top div. I initially though using margin instead, but without the overflow: auto on .page, the margin goes outsides the bounds of .container (which shrinks to fit the height (padding included, margin excluded) of .overflow.
I seem to misunderstand the behaviour of the flexbox.
I made some adjustment to your css to make the red area scrollable only.
css:
.page {
width: 100%; height: 100vh;
background: red;
flex: 1;
overflow: hidden;
}
.overflow {
font-size: 30px;
padding-top: 64px;
height: 93vh;
overflow: scroll;
}
Thanks for providing a plunker. It helped a lot to find a solution for you. Here's the link to the edited plunker.
Hope this helps!
I'm attempting to style Wikipedia. I'd like to place the table of contents in a sidebar; however, I've come up against a few obstacles. I'd like to:
Vertically center the table of contents if it's shorter than the
viewport height.
Remove the scrollbar on long tables of contents while retaining scrolling ability.
Specify a sidebar %width and min/max widths, and have the body content fill the rest.
Please see this for a visual.
Here's what I have so far:
#-moz-document domain(wikipedia.org) {
#mw-navigation, #toctitle, #footer {display:none;}
/* Place table of contents in a sidebar */
#toc {
height: 100%;
width: 20%;
min-width: 150px;
max-width: 250px;
position: fixed; /* don't scroll with page. */
top: 0;
bottom: 0;
left: 0;
overflow: hidden; /* hide scrollbar, but... */
}
#toc > ul {
background: lightblue;
overflow: scroll; /* ...still allow scrolling? */
/* center vertically if shorter than height of viewport */
display: table-cell;
vertical-align: middle;
}
#content {
/* How to have contents fill the remaining width? */
}
}
Does anyone have solutions to these? Are they even possible?
I created a userscript which allows me to define custom links that display both horizontally across the top of Wikipedia as well as in the navigation panel which sits along the left side of the page. I copied it over to Gist in case anyone is interested. It should help you accomplish what your looking for I think:
Wikipedia User Defined Navigation Links (Gist)
To use this code you need to find your Wikipedia theme JS file which is going to be a subpage to your userpage. Mine is here. You can find yours by clicking this link which will automatically direct you to the appropriate location. You should be logged into Wikipedia first, and then click here.
I have the following CSS style code for my table:
table {
table-layout: fixed;
}
td {
overflow: hidden;
white-space:nowrap;
}
td:hover {
overflow: visible;
}
However, when I hover over a <td> element whos contents (text) are hidden, the result is that the contents become visible but are behind the content of the adjacent cell (right side).
I do not think that z-index can be applied to table cell elements, so is there a CSS attribute that I can specify within my td:hover style which will make the content of my <td> tag overlap the content in adjacent cells?
The table elements contain strings of text pulled from a database. The table itself is already as large as it can be without adding a horizontal scrollbar.
I didn't solve it the way I wanted, so still would like to see if anyone knows how to do that.
However, I did find a suitable alternative using the following CSS attributes:
table {
table-layout: fixed;
}
td {
overflow: hidden;
white-space: nowrap;
}
tr:hover td {
overflow: visible;
white-space: normal;
}
This effectively sets a fixed table size and keeps the rows compact within that size until the user hovers over a table row. When that occurs, the row being hovered over expands vertically to suit the cell contents. Cell width is still preserved thanks to the table-layout:fixed attribute.
The downside to this solution is that it does not work very well if your cell content is anything other than text with white space. Text without white space wraps unreliably and objects obviously do not wrap at all.
I think the following works:
table {
table-layout: fixed;
}
td div {
overflow: hidden;
white-space:nowrap;
}
td div:hover {
overflow: visible;
float:left;
clear:left;
}
I want to use overflow on a div to show all div and image, and text to but for this example i used only images.
i need a horizontal scroll, if i only use image its work well with the white-space: nowrap; css but if each images are in a div the sroll disapear and images don't show all.
Example 3 here
the first exemple work if i give a width to a wrapping all div but i can do this methode since all the div are called dynamicaly, it's mean that i can got 1 div to hundred one.
Here the code of the 3rd example
#dmcscroll2 {
white-space: nowrap; display:
block; width:660px;
height:112px;
overflow: auto;
overflow-y: hidden;
/*overflow :
-moz-scrollbars-horizontal;*/
border-style:solid;
border-width:1px;
border-color:#000;
}
.div-image{
float: left;
width: 125px;
}
how can i do for the 3rd technique without knowing the number of div with images a will get from a dynamic javascript call.
You may look at the source code to see more in detail
You can remove the float:left from .div-image CSS and add display: inline instead:
.div-image{
display: inline;
width: 125px;
}
That seems to work the way you wanted it to on your example website.