I have an ag-grid table that changes its size dynamically based on some buttons. more or less columns will be added or removed from the table. However, as the number of columns increases, the table would eventually spill out of the page, which cannot be seen. I have tried to apply horizontal scrolling but to no avail.
This is my code:
<div class="row text-center" style="justify-content: center;">
<div>
<ag-grid-angular
style="font-size: 15px; width: 100%;"
class="ag-theme-balham"
[rowData]="data"
[columnDefs][="columnDefs"
[defaultColDef]="defaultColumnDefs"
(gridready)="onGridReady($event)"
</ag-grid-angular>
</div>
</div>
Basically, I want either two of the followings:
the width of the ag-grid table to be fixed and horizontal scrolling enabled
OR the width of the ag-grid table can grow depending on the number of columns. However, it should not spill out of the page.
And also, I would like the table to be centralized in the middle of the page as well.
Thanks!
You can try:
<ag-grid-angular
style="font-size: 15px; width: 100%;"
class="ag-theme-balham"
[rowData]="data"
[columnDefs][="columnDefs"
[defaultColDef]="defaultColumnDefs"
(gridReady)="onGridReady($event)"
(gridSizeChanged)="onGridSizeChanged($event)
</ag-grid-angular>
onGridReady(params: GridReadyEvent) {
params.api.sizeColumnsToFit();
}
onGridSizeChanged(params: GridSizeChangedEvent) {
params.api.sizeColumnsToFit();
}
I see your grid takes 100% width, make sure the parent div has a fixed width. To center the grid, I see you have done justify-content: center; which is good but make sure this div has display: flex; on it.
gridSizeChanged will be called every time the grid size changes and then we call sizeColumnsToFit so this will shrink all columns to fit with the fixed width.
Related
I'm trying to implement a virtual scroll in my image gallery. My problem is that the implementation doesn't work correctly. First, the elements are displayed in vertical position, when in fact they should respect the horizontal breakpoints and only then respect the vertical scroll. Second, with the scroll elements appear with huge spacing.
Does anyone know how I can solve this problem? thanks
DEMO
HTML
<div [ngSwitch]="viewMode" style="height:100%; width:100%">
<div id="tab2" *ngSwitchCase="'tab2'" style="height:100%; width:100%">
<div
style="margin-left: 16px; margin-right: 16px;height:100%; width:100%"
class="first"
>
<ng-container
*ngIf="
arrayDeNomesCategorias.length == 0 ||
arrayDeNomesCategorias == undefined
"
>
<ul
class="mdc-image-list my-image-list"
style="height:100%; width:100%"
>
<cdk-virtual-scroll-viewport
itemSize="50"
style="height:100%; width:100%"
>
<ng-container *cdkVirtualFor="let i of images; let j = index">
<li class="mdc-image-list__item">
<div class="mdc-image-list__image-aspect-container">
<img
src="https://material-components-web.appspot.com/images/photos/3x2/{{
i + 1
}}.jpg"
class="mdc-image-list__image"
/>
</div>
</li>
</ng-container>
</cdk-virtual-scroll-viewport>
</ul>
</ng-container>
</div>
</div>
</div>
Problem
Correct, but without the implemented scroll :(
I updated your example here.
Your problem was mainly css and there seem to have been (at least) 2 problems:
Your are giving .mdc-image-list__item class min-height: 400px and max-height: 400px. That basically means that all your .mdc-image-list__item containers will have 400px height (so height: auto is kind of useless). Removing this will remove the white space between your images.
If you want to have scroll as well as elements on the same page you should use a flex container with flex-wrap: wrap.
In order to do this I used the following snippet (for your case):
:host ::ng-deep .cdk-virtual-scroll-content-wrapper {
display: flex;
flex-wrap: wrap;
}
You can read more about host and ng-deep here. But please be aware that according to this article (and not only) is recommended to avoid using it in recent version of angular. For the sake of simplicity I used it on your example but you might want to avoid it in production.
(extra) : As a small improve I also removed the duplicated margin: 10px; height: auto; max-height: 400px; properties from .mdc-image-list__item media queries (and only leaved the initial one with no media query). It will be applied anyway since there isn't anything to overwrite it and just changing just the with on the media queries should be enough.
How can you stop image being resized by the browser? I want image to have certain width so I'm using <img src='src' style='width: certain_widthpx' />.
However when you resize the browser width, the scrollbar in the bottom appears which I don't want. How can I stop that?
You need to provide a simplified version of your DOM in the question. Assuming parent of img is body
Add this css rule to the parent.
body{
overflow-x: hidden;
}
You should specify image minimum width and height:
<img src="http://via.placeholder.com/800x800" style="min-width: 800px; min-height: 800px;" width="800" height="800" />
As you asked you want your image not to be resized by the browser, browsers resize contents within a window based on the view-port. Every time you'll try to resize your browser, view-port will change, so to maintain the user's viewing experience content gets resized. Now as you showed <img src='src' style='width: certain_widthpx' />, here you're trying to give your image a fixed width that means you're restricting the view-port to hold the image at this fixed width and hence at view-ports lesser than your image's width, horizontal scrollbars appear. If you really want your image to be of that fixed width then you should contain it within an another holder and give an overflow-x to be scroll/auto.
Like this:
<div style="overflow-x: auto;'>
<img src='src' style='width: certain_widthpx' />
</div>
OR there is one more way and that is CSS way
<div class="holder">
<img src='src' />
</div>
CSS:
.holder { overflow-x: auto; }
.holder img { width: certain_widthpx; }
In above solution your image will hold that fixed width but the holder will adjust itself as per the view-port and the point where your image's width will be greater than the view-port holder will start showing horizontal scrollbars, but the browser window will not.
I am having trouble make a jsfiddle that reproduces my problem, but I have one that demonstrates the basic layout I am dealing with.
http://jsfiddle.net/LurUM/4/
<div style="width: 73%; float: left;">
<!-- table here -->
</div>
<div style="width: 23%; float: right;">
<!-- sidebar here -->
</div>
I have a table on a page like this one, but it is not the correct width, it is much wider, colliding with the right side bar and going past it. I tried setting the table's width to 100% and going to a fixed table-layout. The width behaved exactly as I wanted it to, but then some of the texts in the cells of the table were spilling out and colliding with text in other columns. What I want is for the cells to become taller and the text to go onto a new line instead of spilling over, but if I understand correctly the fixed layout is preventing this.
Am I understanding the situation correctly? What's the solution? And why did the table have so much extra width to begin with?
Try this code:
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>
The word-wrap: break-word property will wrap long words onto the next line and adjust words so that they don't break mid-word. When used in conjunction with table-layout: fixed; it will prevent the table bounds from overflowing.
If there is other content that must remain aligned with your table then keep the divs, otherwise I would suggest using id names for the tables, and moving all styles to the applicable style sheet. Your tables will then be getting their width setting directly from css instead of overflowing a parent container. I would also suggest that you use only one float, which ever is topmost on your page. This will keep the html cleaner i.e. easier to read and debug.
<div class="leftSide">
<table>html</table>
<p>other stuff that must be aligned with table</p>
</div>
<table id="rightTable">table that will float around other content</table>
<div>other content will continue to float until space is used up</div>
CSS
.leftSide {float: left; width: 40%; margin-right 20px; }
.leftSide table {width: 90%; }
.leftSide p {other css}
The html is easier to read this way, and specificity is used to drill down to the elements within the div, the table will be 90 percent of the width of its parent div and will no longer overflow the container (unless you put some giant image in there). Other CSS can be added including the word-wrap and break-word mentioned in other answers.
w3 has the definitive answers for CSS specificity and other inheritance issues like the one your facing http://www.w3.org/TR/selectors/
I want to construct a timeline that has horizontal scrolling.
I have a wrapper DIV, inside it has months. Each month is a DIV inline-block. This works:
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
This almost works, but because my clients site uses tables for layout the scroll bars don't work. This fails:
<table><tr><td>
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
</td></tr></table>
Here is a jsfiddle to show what I mean: http://jsfiddle.net/fhL9u/2/
NOTE: The top timeline example works as you resize the browser. It is 100% width of the page (or containing element.)
How do i make the second timeline overflow correctly? It must take up the remaining width of the screen (no with: 100px hacks), and if possible only show scroll bars when the months overflow.
This is an internal application so I can tell people to use Firefox or Chrome if I need to. This means I can use advanced CSS3 stuff or browser specific ( -webkit or -moz ) stuff. I'd prefer that it was IE8 compatable (just for my own curiosity)
If you can fix the width of that text (in pixels or percents) use this solution:
table {
table-layout: fixed;
width: 100%;
}
td:first-child {
width: 100px; /* or width: 15%; */
}
Note that you can use a different selector for the text (like a class)
Possible solution....
The main issue may be that the "Site Navigation" cell is part of the scroll area.
table { display: block; }
Then assign the .wrap class to the table and remove the div encompassing the months.
Fiddle here
only tested in Chrome.
You could just put a width on the div.wrap, say 400px- that works and is just one line of code:-)
I've set float for one of my table's cells. But now I can't change vertical alignment of it's contents. By default, it moves the contents to the top of the div. I tried valign: middle, vertical-align: middle with no success. Here are the results:
With float: left
Without float: left
How can I align vertically cell's contents with float?
And markup looks like that
<td id="top_logo">
<a href="index.php">
<img src="core/design/img/logo.png" style="height:40px; padding:3px;"/>
</a>
</td>
<td id="name" valign="middle"><?php include "core/code/includes/pr.name.php";?></td>
I don't know if this will help (I've left Table based layouts behind now) , but to solve a similar issue using straight divs you can do the same using the line-height rule.
<div id="tableRow">
<div id="leftCell"><img src="mylogo" /></div>
<div id="middleCell"> </div>
<div id="rightCell">User Name Here</div>
</div>
Your CSS would be created to set widths/heights etc, which I guess you won't need for a table, and for your "rightCell", you'd set the line height to be the same as the row height:
#rightCell
{
height: 30px;
line-height: 30px;
}
What then happens is the text is centred vertically in the line space, which because it's the same as the height, gives the impression it's in the centre of the element too.
Now like I say, I've NEVER tried this on a table-cell, however any modern browser should let you change the display property to say block or inline-block using:
display: block;
Changing block for any of the other types where needed. This will set the display type of the cell to be like a div (or a span, or some other element) but I DON'T KNOW what effect it will have on the table.
Note also, that I'm not addressing older browsers Like IE6 here, to make this work across the board you may have to make some hacks for older browsers if support is required.