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
Related
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.
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 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.
I have a jqGrid displaying the data in the table correctly and on gridComplete when the table loads, it applies some click functions to some icons in certain table cells on each row. When the table initially loads, all the functions work properly, but when I click a column header and sort a column in either asc or desc order, the table sorts the rows and then the click functions no longer work. Has anybody run into this issue using jqGrid before? I am using pagination with the table and when i go to the next page, the click functions work again until I sort a column. Any help would be greatly appreciated.
*I forgot to mention before that I also have a subgrid for each row that is collapsed and will expand when an arrow icon is clicked on at the beginning of the row.
Figured it out. When I created the table, I added a small div element that was hidden at the bottom of the main table div element that holds all the data. The small div slides up and down with setting options inside of it. When you sort the table, the jqgrid seems to sort the table and place it within the div inside of the main table. Since it probably doesn't specify what div to put the sorted data back into, it places it into both div elements. When i sorted the data and looked at the smaller div, the sorting recreated the table within the small div as well. So, I ended up with two tables, my original and the new one within the small div. This messed up my java scripts, because the references were all jacked up at that point. So, my solution was to remove the small div when sorting and then when the sorting finished, recreate the small div so the sorting function doesn't get confused. Also, Zikes, the gridComplete function does not run on sort for me. I put an alert statement within the gridComplete function and it shows when the table is loaded initially, but when you sort a column it never shows. I placed the alert at the very beginning of the function, so I know it wasn't running. Either the documentation you are looking at is incorrect or i have some sort of setting that disables the gridComplete function from running on sort. Thanks for the input.