I am using Angular Material Data table in my application. I need to display multiple columns with a horizontal scroll table. I am facing an issue with the table row border. It's not displaying an entire width of the row. Please check the attached image for your reference. Please help me to resolve this issue.
Please check the Link for Code reference
https://stackblitz.com/edit/angular-mdxik6?file=app%2Ftable-basic-example.html
Thanks in Advance.
Both header row and column rows are display flex by default,
changing it to display inline-flex will fix above issue
.mat-header-row, .mat-row {
display: inline-flex;
}
Use display grid in case of ipad and mobile device screens
mat-table {
display: -ms-grid ;
display: grid;
}
This might help someone else as this is an old post. Please refer to https://stackblitz.com/edit/angular-mdxik6-gnpzuh?embed=1&file=app/table-basic-example.css
Just add the following to your your-comp-component.css or your-comp-component.scss
.mat-row, .mat-header-row {
min-width: 2800px;
width: 100%;
}
Best resolve I did overcome this problem.
Hold dynamic data column with css
columns = [
{columnDef: 'select', width: 75},
...........
]
Recalculate css min width if you implement a show/hide function
recalculateCss() {
let cellWidth = 0;
for (let i = 0; i < this.selected.length; i++) {
const cell = this.selected[i];
const column = this.columns.filter((value, index) => value.columnDef === cell);
cellWidth += column[0] ? column[0].width : 0;
}
this.minWidth = cellWidth;
}
Add css in both mat-header-row and mat-row
[style.min-width.px]="minWidth"
You have style properties that are working against each other. You've set min-width: 150px; for each column, and you have 13 columns which totals 1950px. Plus you've set width: 1123px; on each row which is (obviously) less than 1950px. Also, you set max-width: 1123px; - same width as your rows - on the table itself, but the table needs to be wider than the row in order to show the scrollbar. If you fix those problems, the border will display properly. Try setting just your row width and leaving out the table and column widths settings.
Material uses a flex layout so you could add align-self: stretch; to the columns CSS. This should stretch the auto-sized items to fit the table.
Edit
Stackblitz
Removing your header and cell width element helps. You want to set your rows to have a 100% width then set a desired minimum.
.mat-row, .mat-header-row {
min-width: 1123px;
width:100%;
}
Guys this is will help you solving such issues
You have to start using :
width: max-content;
.mat-row,
.mat-header-row {
min-width: 1123px;
width: 100%;
width: max-content;
}
.mat-table {
overflow: scroll;
max-height: 500px;
}
.mat-cell,
.mat-header-cell {
min-width: 90px;
}
/*unnecessary to make table header fixed*/
.mat-header-row {
top: 0;
position: sticky;
z-index: 1;
background-color: inherit;
text-align: center;
}
find browsers support : https://caniuse.com/#search=fit-content
You need to set the expected with of the table in mat-table{min-width} plus the mat-row left and right paddings (24px each).
In your example case:
.mat-table {
min-width: calc((13 * 150px) + 48px);
}
or
.mat-table {
min-width: 1998px;
}
Hope this helps!!!
Try to use below styling. It helps to render data & borders correctly when more columns in mat-table. (horizontal scrolling issue resolved)
.mat-header-cell{
background-color: inherit;
}
Related
I am working on a concept with Angular UI-Grid where we will have several columns pinned to the left and need to customize the height of the cells. I am easily able to modify the height of a cell but find that the height is not applied to the non-pinned cells. Anyone have any suggestions on how to accomplish this?
Updated
Based on comments I was able to get this working for fixed height columns using rowHeight option, now working on dynamic row height and word wrapping across. T
CSS used to get dynamic height and word wrapping but this isn't working across pinned columns.
[ui-grid-row] {
display: table-row;
}
.ui-grid-row, .ui-grid-cell {
height: auto!important;
}
.ui-grid-cell {
float: none;
display: table-cell;
}
.ui-grid-header-cell, .ui-grid-cell-contents {
white-space: normal;
padding: 2px;
word-break: break-word;
}
I have an app built using Vuetify.
One of the pages is used for orders and I want the user to be able to print it.
The problem is that if I have scroll in the page, only the first page shows with a scrollbar:
How can I make it display all other pages for print?
UPDATE
I have a .scroll-y class on the main section, if I use this css for print:
#media print{
body,
html {
height: 5000px !important;
}
.scroll-y {
height: 100% !important;
}
}
it works, but obviously i don't want a set height of 5000px for every print,
I can use js to calculate the height and set it but I'm wondering if there is a better/easier way?
You have to change CSS, adding something like this:
#media print {
body {
overflow: auto;
height: auto;
}
.scroll-y {
height: auto;
overflow: visible;
}
}
So .scroll-y occupied all space needed, and body will grow up to right printed size.
Of course you must adds html elements for printing page break, preview print of your view on typical print size (i.e. A4) and adding where need an breakup print element as
<div class="print-break-page"></div>
with css:
.print-break-page {
page-break-after: always;
}
You have to change the overflow and the height of the main section (the body on my example):
#media print {
body {
overflow: auto;
height: auto;
}
}
Link to the demo on codepen:
https://codepen.io/andersanmiguel/pen/NXyxPE?editors=0100 (you can export it form there)
Thanks to #Ander and #g.annunziata for pointing me in the right direction, the final setup that worked for me was:
body,
.scroll-y {
overflow: visible !important;
height: auto !important;
}
Can anyone tell me how to make ng-input-tag(Angular) scrollable in X-direction.
Currently if I insert the tags then the height of the div increases.
What I want is that If I go on inserting the tags then it should scroll in X-direction
I have tried:
width: auto;height: 34px;overflow-x: auto;overflow-y: hidden;white-space: nowrap;
But it didn't work as expected
So let me know where I am wrong.
I know this is late, but I have seen similar questions go unanswered recently and this one is at the top of a google search for this problem. This can be done using only CSS. If you would like an added visual effect, try customizing the scrollbar.
For the X direction:
This can get a bit ugly if you decide to set a min-width or width on your tags.
The only way I've found to do it in the X direction is using flexbox:
tags-input .tags .tag-list {
display: flex;
flex-direction: row;
overflow-x: auto;
}
tags-input .tags .tag-item {
/* Applying this display class */
display: inline-table;
/* OR set the tag width to ensure that the text is visible */
min-width: 150px; /* Could also use width: 123px */
}
This Github issue is also directly related to the problem.
For the Y direction:
Applying a fixed height to the .tags class and setting the overflow-y to scroll will give you the desired result:
.tags {
height: 34px;
overflow-y: scroll;
}
Try This
simple css to add on tags-input class for scroll on x and y axis
.tags-input {
max-width: 100%;
line-height: 22px;
overflow-y: scroll;
overflow-x: scroll;
height: 65px;
cursor: text;
}
I'm trying to hide the horizontal scrollbar of a Angular ui-grid, but I can't find the right property. (Property enableScrollbars=false removes both.)
Is it possible to remove only the horizontal scrollbar?
With the latest version on Github v3.0.0-rc.16 you can disable horizontal and vertical Scrollbar separately.
Instead of
enableScrollbars = false;
use
enableHorizontalScrollbar = value;
enableVerticalScrollbar = value;
with
value = 0; /* NEVER */
value = 1; /* ALWAYS */
value = 2; /* WHEN_NEEDED */
UPDATE:
If you want to use constants instead of the integer-value, look at corresponding post:
Using ui-grid constants to disable scrollbars
UPDATE:
The option WHEN_NEEDED doesn't seem to be available at the moment.
Maybe this will be changed again, so please look for the available constants in the source code.
The Constants are defined in
https://github.com/angular-ui/ui-grid/blob/master/packages/core/src/js/constants.js
At now, the option WHEN_NEEDED doesn't seem to be available at the moment (ui-grid 3.1.1). So I have worked around by jQuery and CSS:
For simple, we just need do this:
.ui-grid .ui-grid-render-container-body .ui-grid-viewport {
overflow-x: auto !important;
/* or use: overflow-x: hide!important; */
}
To more flexible, we can use CSS class and jQuery. First, we add one more class:
.ui-grid-render-container-body .ui-grid-viewport.no-horizontal-bar {
overflow-x: hidden !important;
}
In controller, we will use this class by jQuery:
$timeout(function(){
if (!!$scope.gridOptions.data) {
$('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
}
});
To hide the blank gap when use selecting and grouping (http://i.imgur.com/veevhgQ.png), we use:
$timeout(function(){
if (!!$scope.gridOptions.data) {
/* To hide the blank gap when use selecting and grouping */
$('.ui-grid-render-container-left .ui-grid-viewport').height($('.ui-grid-render-container-left .ui-grid-viewport').height() + 17);
$('.ui-grid-render-container-body .ui-grid-viewport').addClass("no-horizontal-bar");
}
});
With 17px is height of the gap when we use selecting and grouping feature.
Demo: http://plnkr.co/edit/D9PKPkvuRy2xA6UNNXCp?p=preview
With this solution we can show the horizontal bar again easily.
If you are allowed to use flexboxes:
.ui-grid-render-container-body {
.ui-grid-header {
padding-right: 17px;
.ui-grid-header-viewport {
width: 100%;
.ui-grid-header-canvas {
width: 100%;
.ui-grid-header-cell-wrapper {
display: block;
width: 100%;
.ui-grid-header-cell-row {
display: flex;
min-width: 0;
.ui-grid-header-cell {
flex: 1 1 0;
min-width: #col-min-width;
}
}
}
}
}
}
.ui-grid-viewport {
overflow: auto !important;
display: flex;
.ui-grid-canvas {
flex: auto;
min-width: 0;
[role="row"] {
display: flex;
min-width: 0;
.ui-grid-cell {
flex: 1 1 0;
min-width: #col-min-width;
}
}
}
}
}
Where col-min-width is a minWidth that you would normally set in the gridOptions. Also you have to set the ui-grid-header's padding-right (which is 17px in this example) to the width of your browser's scrollbar with the javascript on certain events: number of rows changed, container resized etc. Scrollbar width = ui-grid-viewport's offsetWidth - clientWidth. Using a hardcoded value for scrollbar width is bad because different browsers have different (and even configurable) values for that.
See the following link: http://www.howru.nl/preken/new/test3.html
For some reason I keep getting space at the right of the three main buttons.
To better identity this on this forum, I've enabled the border of the relevant table temporary.
The issue is inside the following class I reckon:
.button
{
display: block;
width: 350px;
height: 135px;
margin-left: 7px;
margin-right: 7px;
margin-top: 10px;
margin-bottom: 20px;
text-decoration: none;
background-position: top;
color: #FFFFFF;
}
The specified width is the actual width of the background image.
The full CSS sheet can be found at http://www.howru.nl/preken/new/styles.css
Right column (text) should float at the right, as is the case currently. Left column (buttons) should float at the left (as is currently the case), and the center picture should float in the center. Strange thing is the left column takes more space in the table, while none have a fixed width.
Ideally I don't want to specify a width of a column twice (for the TD and for the content, in case of a BG image on the display-block'd content); in the proposed solutions below the display-block'd has a width specified (width of the background image) and the parent TD element as well... That is what I don't like and for which I started this post. Because I still don't understand why the TD's aren't equally sharing the available table space:
Now column 1 (left) seems to take the most, while it doesn't need so much, the second takes a little less, and the right column takes only what was specified for the inner width, whilst the left (1st) column has the same (width specified for the content instead of the TD) and does not stick to that width apparantly, while the right TD does...)
Both in IE as Opera I get this; any idea what I am missing??!
Goal is to understand what is happening, and why. So I'm not looking for a cheap fix - as one can thing of 100 'ugly' ways to do this.
here are the changes i have made. Try this. Btw you should use % instead of px
.top {
vertical-align: top;
width: 350px;
}
removed float from .blkright
.blkright {
}
.title {
font-size: 14px;
font-weight: bold;
letter-spacing: -1px;
padding-bottom: 5px;
text-align: center;
}
.column {
margin-left: 12px;
overflow: hidden;
width: 325px;
}
Change right table .top .column width in the to change this space to right of buttons
.column {
overflow: hidden;
padding: 5px 5px 25px;
width: 290px;
(originally width was 250px) because it is trying to fit the width: 100% you have set
you can also remove the 250px , since the right column is the only column you've set a width on
I am not ultimately sure how you want the rest (e.g. the text paragraph) aligned then, but here is my approach.
First, give each body-column a class or an id. You assign these classes to the three <td>s respectively.
.content-left {
float: left;
}
.content-mid {
float: left;
}
.content-right {
display: table-row;
}
Although this solution takes a bit more effort than IanO.S.'s, this solution is also more dynamic. If your button or image sizes change someday you don't have to hack into your code, find and edit your pixel-widths.
Add declaration of width on the first table cell
.top:first{
width: 364px;
}
and you wont see any spaces anymore