I want to use CSS to scroll only the mat-table body. I can see the scroll but the table Thead becomes a mess.
The scroll is there but the disposition is not right
see image here
this is the code i used for the tbody. when i remove the display block its gets back to normal but without scroll bar.
Any ideas on how to solve this?
tbody {
border-spacing: 0;
height:78vh;
overflow: auto;
max-height: 85vh;
display: block;
border-top: 1px solid #dee2e6 !important;
}
Related
I want to make angular material table scroll horizontally, I was able to do that with the scss:
.table-div {
overflow-x: scroll !important;
mat-table {
table-layout: fixed;
mat-header-cell, mat-cell {
overflow-wrap: normal;
white-space: nowrap;
overflow: visible !important;
margin-right: 30px;
flex: 0 0 300px;
}
}
}
The scroll and data worked and visible. However, the overflowed rows have no color, no border, etc..
Like the table is cut at the original width border.
How can we fix that?
This image shows the border of the table and how the overflowed rows have no styling when scrolled
Here is an example of your issue, I have added the css needed to make the table scroll and keep the hidden elements styled
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
mat-table {
width: 1200px;
max-width: 1200px;
margin-bottom: 1rem;
display: table;
border-collapse: collapse;
margin: 0px;
}
mat-row,
mat-header-row {
display: table-row;
}
mat-cell,
mat-header-cell {
word-wrap: initial;
display: table-cell;
padding: 0px 5px;
line-break: unset;
width: auto;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
I wrapped the material table with a div
<div class="table-responsive">
<mat-table>
...
</mat-table>
</div>
It sounds like the table rows are overflowing outside of the table's borders and they're not being styled properly. Here are a couple of things you can try to fix this issue:
You can try to wrap the table in a container div with the class "table-div" and set its width to a fixed value, this will make sure that the table is displayed within the borders.
Another option is to give the "mat-table" class a fixed width, as well as the "mat-header-cell" and "mat-cell" classes. This will also make sure that the table does not overflow beyond its boundaries.
If the table cells are not styled, try to set a border for the table and cells, this can be done by using mat-table {border: 1px solid #000;} and mat-header-cell, mat-cell {border: 1px solid #000;}
Try to set overflow-y property of the table-div to scroll too, this can be done by adding overflow-y: scroll;to the table-div class
You can also try to set the display property of mat-header-cell and mat-cell classes to 'inline-block', so they will be treated as elements with a width and a height and that can be styled.
I'm relatively new to CSS, so please pardon me for the odd gaffe. I defined a footer to have absolute position, and it stays at the bottom for all all but one pages on my website.
...>The footer here behaves perfectly, i.e., it's position is glued to the bottom of the screen regardless of the content.
...>Whereas, the footer below behaves abnormally, it's position isn't glued to the bottom of the page.
I am using the same footer class on both the pages, so I'm not sure what's wrong here, mentioned below -
.shell3-Footer {
box-sizing: border-box;
padding: 0.9375rem;
border-top: 0.0625rem solid #dcdcdc;
overflow: hidden;
max-height:40px;
width:100%;
background-color:#f5f5f5;
position:absolute; }
Note that if I change the position to fixed, then the problem is only partially solved, as I need the footer to be seen only when we scroll to the bottom of the page. Also, when the position:fixed is used, I'm not able to view the down-arrow of the scroll bar - which is not desired behavior.
Additionally, there is a slight whitespace beneath the faulty footer which I corrected by adding bottom:0pxto it.
Can someone help why the same footer class would behave differently on two pages? Thoughts?
Try this:
body {
display: flex;
flex-direction: column;
height: 100vh;
}
/* Put this class on everything that is not the footer */
.content {
flex: 1 0 auto;
}
.shell3-Footer {
flex-shrink: 0; /* new stuff */
width:100%;
background-color:#f5f5f5;
box-sizing: border-box;
padding: 0.9375rem;
border-top: 0.0625rem solid #dcdcdc;
overflow: hidden;
}
I want to have my header fits the size of my screen. Because the background-size is set on "cover" it actually widens automatically, no matter the size of the screen, but the height doesn't fit along. (Sorry for my bad english by the way.) I HAVE to put a height content in the "header td" section, but how do I fix this all? I hope it's clear enough...
CSS:
#header-wrap {
background:url(haderimage.jpg)no-repeat center;
background-size:cover;
box-shadow:inset 0 0px 0px rgba(0,0,0,0.3);
}
.wsite-custom-background #header-wrap {
background: none;
}
#header {
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
}
#header td {
vertical-align: middle;
text-align: left;
height: 500px;
}
You do know HTML5 has a header tag built in automatically right?
Anyway, sounds like a margin or padding issue, probably just adding a couple of pixels to the width. Try doing a reset at the top of the css:
*{
margin: 0;
padding: 0;
}
This can make loading slow sometimes (I've personally never noticed any difference) so if it doesn't help, get rid of it. Otherwise, you could try just hiding the excess width. On your body tag, you could try hiding the overflow. This should stop the page scrolling horizontally but can cause you more width problems later.
body{
overflow-x: hidden;
}
I am having trouble with the alignment of a span contained within a button tag.
I have already done something like this before and it worked. In fact, it's the same css but different sizes.
The problem is that the containing span seems to be aligning to the right.
CSS:
#closePreviewBtn {
position: absolute;
height: 24px;
width: 24px;
right: 0;
background: #B9DEFD;
border-top: solid 1px #333333;
border-left: solid 1px#333333;
border-right: solid 1px #333333;
border-bottom: solid 1px #333333;
border-radius: 4px;
}
#closePreviewBtn .close {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
background: url(../imagenes/close.png) no-repeat center;
padding: 0;
/*right: 2px;
bottom: 1px;*/ //This fixes the problem but it's manual
}
HTML:
<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>
Thanks a lot!
Simple fix - seems like the button has a padding by default. Just set it to 0:
#closePreviewBtn {
padding: 0;
}
Now you can position however you want - maybe adding a margin to the span if you want to move it around.
Hope that helps you,
In your #closePreviewBtn rule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.
jsFiddle example
I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.
The solution i've foud to center it was removing the button height and width, because it will expand to wrap the span and it will be centered.
For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.
In IE8 my header looks like a bottom margin is set, yet margins are set to 0px. I've set a border property to test this.
I'm using DIV tags not HTML5 header, nav, etc.
Now that I'm looking at this picture, I'm noticing an extra pixel on the right as well.
#header
{
margin: 0px;
padding: 0px;
width: 800px;
height: 200px;
border: 1px solid red; /* test */
}
#nav
{
margin: 0px;
padding: 0px;
border: 1px solid black; /* test */
}
Where is the grey colour in the header coming from? If it's an image, you might want to check that its dimensions match those in your CSS definition (i.e. 800px x 200px). Otherwise, try removing any margins on the image.
Without seeing your full HTML structure, it's difficult to troubleshoot.