How to show rows and columns in ag-grid even without data?I know when there is no data the grid collapses but how to make it visible few rows and columns?
You need to set height of the grid for that.
style="width: 100%; height: 100%;"
Check this Plunk for live example
Try to add/remove line #9 in app.component.ts and see yourself.
Related
I'm trying to make a 2 columns layout in CSS, with the property display: table;, but there is an image on the top of the second columns, and the content of the columns is limited in height, so the extra-content from the first column goes on the second column.
Here is an illustration of what I'm trying to do:
Here is some text in IMAGE
the first column, and
I want that text to go everything is displayed
on the second column, with the help of CSS.
under the image. And
I know it can be done with display: grid, or display: flex, or even float, but these are not an option... (nor Javascript) :(
I've made several searches but nothing led to the proper result.
Thank you for your help!
Is there a way to display only e.g. 5 rows of a mat-table and if the table has more than 5 rows it will displayed as scrollable?
If I take the sample from Angular Material Tables it displays 10 items (=rows). How to limit the output to the mentioned 5 rows and than start scrolling?
Background: I need to place the mat-table on a mat-tab element. The different panes vary little bit in height. The table could have an arbitrary number of rows. Since I know that for a proper layout just 4 (or perhaps 5) rows are fitting properly I want to limit the total height of the table.
I found solutions like but didn't find a way to properly apply overflow and display attributes.
Wrap table in div and add max-height: 248px and overflow: auto.
Example
<div style="max-height: 248px; overflow: auto">
<table mat-table [dataSource]="dataSource">
...
</table>
</div>
Why max-height as 248px?
Because the row height of table data is 48 so
48px(each row) * 4(rows) = 192px + 56(Table header) = 248px
I have a div #customers_table which contains several <div> columns. I am not using any <table>, rather I make my inner divs behave like a table columns. These columns/data is coming from database. So the columns can be less or more depending on what you choose to add or remove in this web page.
I can't set a fixed width to #customers_table as I explained above we don't know in advance how many columns are going to display. So I wanted a horizontal scrollbar when the columns are enough to view in screen. The horizontal scrollbar will appear when the columns are out of viewpoint.
A sample extracted part of my HTML:
<div id="customers">
<div id="customers_table">
div columns
div columns
div columns
...
...
...
</div>
</div>
To achieve this, I wrapped my #customers_table div within a parent div #customers. I have applied following CSS to these 2 divs:
#customers {
overflow-x:auto;
overflow-y:hidden;
width:100%;
}
#customers_table {
border:1px solid red;
min-width:1500px;
padding:5px;
}
You can see that I am applying a min-width of 1500px. Though it does work when I add 2 or 3 more columns from my website. But when I add more and more columns the columns headers/divs are screwed up and break to second line.
Please see the screenshots below:
This is fine (when columns are less):
We can scroll through to see hidden data.
But when we add more and more columns then this issue arises:
I can't increase min-width since I don't know how many new columns will come in this table. So what is the solution to this problem so that the end result should match with my first screenshot irrelevant of the fact how many new columns a person can add?
I use Bootstrap 3 grid system to create a div based table.
Here is my code on jsbin:
http://jsbin.com/iWoLewu/4/edit?output
As you see the height of product column and other column is different.
Edit: I don't want fixed height also I want link for entire table row except one column. please see above jsbin code first.
Thanks for your attentions.
try to fix height like that
.myCell{height:80px;}
Of course 80px is jsut an example put the value you need/want.
Still learning CSS so pardon if this is obvious -
I am building a header that will contain four sections:
|Header-------------------------------|
|----Title----|----NavigationLinks----|
|----Taglines-|----SelectionBar-------|
|-------------------------------------|
What I would like is for the Taglines section to automatically set the width of the first column (it's content is longer than the title) and then the second column extends to the end of the header section. I can't figure out how to get the columns to match each other without setting specific widths - is it possible to do this without fixed-width areas?
I've been able to come close to what I need using display: table-cell; but can't figure out how to 'connect' the second row to the first.
UPDATE:
Missing a tag caused the div's to ignore the display: table* settings. Using display: table/table-row/table-cell to create a table layout would do what I needed: table-cell will auto stretch the column affecting the width of the rows above it.
Not sure if this is kind of what you're looking for. Question seemed a bit unclear.
http://jsfiddle.net/KacPY/1/
Instead of using outdated tables I would consider notating your widths in percent in order to have a fluid layout.
http://jsfiddle.net/kJRQE/