I'm making an Angular-app using Angular Material, and I'm having big issue with the height of my tab content. This is my first attempt at Angular, but I'm familiar with HTML, CSS and JavaScript.
The situation is that I have an app with the MatSidenav component, and inside the Sidenav content I have a MatTab component, which contains a wrapper to load other components dynamically into new tabs. This all works as I want it to, the problem is the content of the tabs, specifically the tabs that get their content after the tab is created (e.g. tabs containing components that load data from the REST service).
I've created a stackblitz based on my actual app, to illustrate the problem.
When going to "Test One" from the menu, it only shows the buttons on the top. The "Get Data" button will simply populate the BehaviorSubject that the data table (AgGrid) uses, (sort of an attempt at simulating a REST-call, which the actual app has). All gets populated and shown as I want, but the container element (one of them, I can't for the life of me figure out which one is the actual cuprit) isn't high enough, so the table doesn't actually show.
The "Test Two" is just an example of a tab with static content, which displays as I expected (same as the Home-tab really).
I've put a button to toggle the height property of the container-div of the table between 500px and blank. Of course, this would be great if I wanted a static height value of 500px (or any px value), but I want it to be as high as the remaining part of the viewport.
I've tried messing with the dynamicHeight property of the mat-tab-group, but if I turn that off it causes a whole deal of other problems since I have tabs with very variable content heights.
I've also tried with various flexbox settings, using both Bootstrap d-flex as well as Angulars own ngFlex, but nothing seems to work.
Now this specific case is for the AgGrid table, but I'm having the same issue with a tab with Google Maps embedded, but I figure if I can solve this one, I'll be able to apply a similar method to fix the maps issue. I'm assuming it is caused by the content changing after the page has been rendered, but that's sort of the point as well, and so that the CSS doesn't seem to keep up confuses the hell out of me.
The only way I've managed to solve this, is by using JavaScript and setting the heights of various elements in ngAfterViewInit and binding an event to window resize, but this seems like a very hack-ish way of doing it, and it also means I have to do it for all components that can be loaded into tabs, not just where I'm currently having problems (because I have to set the height of several of the Tab container elements, which will be the same elements even when tabs are switched).
Any help with this would be greatly appreciated.
I've only used ag-grid sparingly, but I have noticed that they handle height strangely. I think you're missing a 'autoHeight' domLayout property:
<ag-grid-angular
style="width: 100%; height: 100%;"
class="ag-theme-balham mat-elevation-z8"
[rowData]="loadedData"
[columnDefs]="agtablecolumns"
[domLayout]="'autoHeight'"
>
</ag-grid-angular>
Adding that in the stackblitz caused an empty table to appear before any data is retrieved, though. Not sure if that's the goal.
Related
I have a big problem with my angular project. In my website i have a lot of tables (in different sections) with fixed padding/height values for the cells. If i click on a button, the padding and heights values that i've fixed of all the tables returns to original values. Does anyone know why?
I Thank you
I am using this tablescript to display a virtual table but for some reason after a specific point problems occur.
On Google Chrome after the top value (The position value where the row is displayed in the parent div) of 1.677715e+07px (16777150px) is exceed the rows are missing its border-bottom for some reason. This happens on the newest version of Chrome (v69). On version 68 the rows at this top value and more arent rendert at all.
They are still there, you can see them via the inspect tool on the browser.
Does the number 16777150 has something to do with JavaScript or Google Chrome?
On Edge browser something different happens. If the parent div of the virtual table exceed the height of 10737418px, the rendered height of this div will be only as big as its content height So if the last row is ending at top 900px, the table will be 900px height too. If you scoll further down and the new row is rendert, the div will get bigger too. But in the inspector you can see the right height value in this element and it doesnt change at all.
To post this link I need this code..
Here is the Code exampel.
If you want it to test it yourself, the .js and .css are in the github of this tablescript in the example folder.
Maybe this hase something to do with the browsers or JavaScript so I ask this question here.
I dont know how your table is being displayed.
But it's not a good practice to display this much entries at once. Try to use pagination.
Have a look at https://datatables.net/ and try to dynamically load table entries (like pick it up from database or something like this)
You had mentioned that tablescript also do the same thing and i see that after many records it display so long empty space without data.
But here, I want to confirm with you that if you use the pagination and display 20 rows at a time then it should work without any issue.
Then why you want to display large number of records?
If you have any issue with 20 rows then try to let us know about that.
We will try to find the solution for it.
Regards
Deepak
I'm trying to create a two column sortable layout using Scriptaculous and without handles, it works absolutely fine and i'm able to swap div elements between the two columns and change the order of them in the current column. However, when attempting to add a handle to the div elements, I am unable to successfully move them between the two columns or change the order of them in the current column.
I have tried to swap the handle element to an image which hasn't fixed the issue and changed the div identifier from a class to an id, but once again it hasn't fixed the issue.
Code without handles (Able to grab from anywhere within the div, works fine)
Code with handles (The handles are the red bordered boxes, doesn't work - for best example, change output size to 1100px)
I've been searching both here and elsewhere on the internet to find a solution to this, or see if anybody else is experiencing the same issue but i'm yet to find another case of this happening.
I can see from your code that you have $$(.handle) this should not have any $'s
I have a few different Google Charts that i want to put inside the sections of a jQuery accordion. The problem is that all the charts that are not inside the first part of the accordion are smaller for some reason. Something about the accordion is shrinking these charts. I do not want them to shrink. Does anyone know what I can do to keep them from shrinking?
See this example which illustrates the problem: http://jsfiddle.net/dN3LL/
Thanks!
EDIT
So from the answer provided by brandwaffle, I considered that the graphics should render before the divs are collapsed into accordion form, so I simply put the $('#accordion').accordion(); line right after the graphs are finished rendering, and it works! See the fiddle: http://jsfiddle.net/dN3LL/4/
I've had this happen to me with various different pieces of content in the past. I think the problem happens because the content is rendered in a collapsed container, so it defaults to the smallest possible size (I've seen this with content in flexible-width divs inside of the accordion as well). The best solution I can offer for an across-the-board resolution is to hook whatever google chart generation (or other content display) to the accordionchange event that jQueryUI's Accordion offers: http://jqueryui.com/demos/accordion/
If you use the accordionchange event, the Google Chart will render itself after the accordion has switched to the correct section, which should eliminate any problems you're having as a result of the chart trying to render into a squished (i.e. unopened) container. There may be a better CSS fix for this, but I haven't found one yet.
one workaround is, load chart first and then run accordion code once chart load complete or run accordion code after 1-2 sec (setTimeout)
I created a some javascript/jquery code to filter an html table. The filter works by assigning two classes to the rows ('show' and 'hide') depending on the value of certain cells and then using CSS to hide the rows with the 'hide' class. The filter works perfectly. However, when I apply the filter, somehow the table row height keeps changing (usually the height increases significantly - ~ 2 or 3 times the desired height). I have no idea why this is happening. My code is a few hundred lines so I don't think it would be worth pasting here. And I have no idea which section(s) of my code are causing the problem (or whether the issue is with the javascript/jquery or external css file).
Can anyone offer some suggestions for how I can best debug this problem?
EDIT: In addition to the row height increasing (the main problem), the column width also shrinks a little when the filter is applied.
UPDATE: I solved the problem (at least for the changing row heights). It was related to a CSS setting where I set the height of the table body. Thanks to the suggestions below, I used Firebug to inspect everything more closely. I found a feature in Firebug that allows you to turn on/off CSS properties, as well as delete DOM elements. By using those features, I was able to isolate the on CSS property that was causing the problems. Thanks for the input everyone.
Are you trying to do something like this.
If so then see if that helps or if you can put a sample like that which replicates the problem.
What I can think of is:
1: The class that is being applied when your hide/show has some issues.
2: The elements on which you are trying to apply the classes are wrong.
May be you can post some sample markup before and after filters.
I solved the problem (at least for the changing row heights). It was related to a CSS setting where I set the height of the table body. Thanks to the suggestions below, I used Firebug to inspect everything more closely. I found a feature in Firebug that allows you to turn on/off CSS properties, as well as delete DOM elements. By using those features, I was able to isolate the on CSS property that was causing the problems. Thanks for the input everyone.