I have made a project where an user needs to perform CRUD operation & see the output in a table. Everything is working fine here but sometimes the mat-select in the mat-paginator starts behaving abnormally. I have made multiple projects but never ever saw this type of issue. Please see this video for reference (focus on the red squared area).
I have checked my other projects to match the Angular material & Angular version but found everything is same.
What am expecting is this should not happen. Also on a side note, this is not occuring for all tables in the project in same time.
After some deep level debugging & looking at the CSS files of each component, I notice that I wrote the below CSS for the dialog that's opening in the video. Removing that fixed the issue.
::ng-deep .mat-form-field-wrapper {
padding-bottom: 0 !important;
}
Related
I have an HTML table with at most 25 columns (usually 5 or 6) and at most 25 rows. Each cell in the table contains a custom Web Component. These are minimal web components. For example, one wraps a number and you can set number formatting (e.g. format as currency) via the attributes. Another just displays a formatted string, etc. I am adding these components dynamically using appendChild on the td.
These Web Components are all using the Shadow DOM - as recommended in the documentation. So I create this simple table (6 rows and 25 columns) and I populate cells with these Web Components. If I do this in Chrome, my system crashes requiring a reboot (sometimes by forcing a shutdown). I tried this in Firefox, and the table renders in less than a second. Also I tried this in Edge and it crashes there too.
I tried re-doing my Web Components to remove the Shadow DOMs and voila, it works fine in Chrome and Firefox.
I don't want to do these component without the Shadow DOMs. Does anyone have any ideas?
Thanks
Update: this is still a problem. I tested in Edge browser and it does indeed work there (albeit a bit slow). Also tested in Safari/ MacOS and it works there too.
What a shame… I have to tell my users they can’t use Chrome and prevent the page from loading.
Update 9/2/2022: Without any changes to my code it is no longer an issue. The only explanation I have is that it might have been happily addressed by a scheduled Chrome update.
Now however, even though my table loads OK, if I open Developer Tools immediately after the table loads, I get a crash with error: 'Debugging Connection closed. Reason: Render process gone.'
Update 9/4/2022: I was overly optimistic about this error. I started testing my app again in Chrome today and the original problem still exists. I create my table in Chrome, interact with it in various ways (e.g. dynamically add a column, add an icon prefix to cell contents of a column, dynamically add a column with a drop-down menu in each cell, etc.) and eventually Chrome will crash.
I no longer expect this to be fixed. I logged a bug report with chromium.org and that is all I can do.
Hello dear people of Stackoverflow,
currently I am writing acceptance tests with Codeception using Selenium as WebDriver module. In my test to check if our sub-navigation exists, is complete and works I struggle with the following piece of code:
$I->see('Partners');
$I->click('Partners');
all the see calls are working perfectly, but the click call fails with an ElementNotVisibleException stating that the element to be clicked is not visible, which I don't understand since the see call worked.
To make sure we're not seeing any old "Partners" string on the page but it really is the link I want to click, I changed the call by adding the a selector.
$I->see('Partners', 'a');
$I->click('Partners');
Still, I'm getting the ElementNotVisibleException from before. In the next step, I added a context to the click call to this:
$I->click('Partners', 'a');
Which made the exception disappear. Still, the click never happens, the test simply fails with the message:
Link or Button or CSS or XPath element with 'Partner' was not found.
I even used XPath in the click call like this: //a[text()='Partners'] and get the same message.
What bothers me the most with this is that the see call seems to see the link I am trying to click and moreover, even the page source and screenshot provided by Codeception after a fail contain this very link, visible and in valid HTML.
I tried to click on some other elements within the sub-navigation with the same result, while - which is even more strange - clicks on links in the main navigation seem to work just fine.
I have no idea why this doesn't work but any help is greatly appreciated.
I don't understand exactly why it happens in some cases and not others, but I've found a solution that works for me: Use CSS selectors only.
Basically in some cases (I think it has to do with clicking on div/span rather than a/button) ->see() will work with the fuzzy text string as first argument, but ->click() requires the explicit CSS selector.
So this will have the "I can see but not click" problems:
// BROKEN
$I->see("All topics", ".header-taxonomy .taxonomy-list-title");
$I->click("All topics", ".header-taxonomy .taxonomy-list-title");
But this will work:
// WORKS
$I->see("All topics", ".header-taxonomy .taxonomy-list-title");
$I->click(".header-taxonomy .taxonomy-list-title");
Obviously it's not ideal at all, partly because it requires a unique selector, but for me mostly just because it makes the tests and testing output less consistent and harder to read.
Either way, I just wanted to get this testing script finished, and now it's working, and because I'm still using ->see() with the fuzzy text locator, I'm still confident that the text is showing before I click.
Notably, this issue doesn't happen when using the PHPBrowser module, which is what tripped me up. I "upgraded" to WebDriver and found my scripts were broken in all these places due to the different behavior of ->click() (in addition to the expected need to open menus before using them, which wasn't needed in PHPBrowser)
I am facing a strange issue, Below are the steps to reproduce it
Close all instances of a browser (any) and then run the below link, notice that the styles don't get applied.
https://libenc.iaea.org/iii/encore/home?lang=eng&suite=def&advancedSearch=true&searchString=
Go to this link in adjacent tab - https://libenc.iaea.org/iii/encore/?lang=eng
Now, refresh the page with the first link, the styles gets applied.
If you compare the page source at stage 1. and stage 3., you can notice that the source in 3. contains these additional includes
What is causing this to happen? Is there any way to have these styles included while at stage 1.?
I don't have access to modify these pages since its hosted by another vendor.
UPDATE:
Below is almost exactly similar link from another user of the same vendor which works perfectly.
http://encore.lipscomb.edu/iii/encore/home?lang=eng&suite=cobalt&advancedSearch=true&searchString=
I have this very weird IE11 behavior which occurs with some of our customers out of the blue.
We have a large table filled with several codes. Every code has its own (background) color assigned. Say the code is SOS, the css for its class is:
.cellSOS {
background-color: #ff1837;
color: #ffffff;
height: 18px;
}
The HTML for a td looks like this:
<div class="cellSOS" onmouseover="anyAction()"><p>SOS</p></div>
In this case there are +/- 120 different codes.
If I load the page in IE11 the (background) color for all codes are shown correctly. Now the problem: if open the same page in a new tab, all codes have a (background) color, except SOS. The same problem when the page is opened with window.open.
If I use the developer tool (F12) and examine the cells, all cellXXX elements have their style defined (the same format as .cellSOS). But when I examine a cell containing SOS, the style is not there.
I tried moving the class within the css to another position to see if that gave another result, but still it was SOS without (background) color.
I compared the HTML for the page displayed correctly and the faulty page and they are both the same.
The problem occurs not with all our customers, but when it occurs it is always just one code that gives this problem and in that case it is always the same code, no matter where I define the style.
I also tested it in IE8 and there it shows fine. FireFox and Chrome also display correctly.
Solved, sort of:
I have found the cause, but not an explanation.
The codes used are activities, used in a planning system. There are also users in this system. There was a user with the code Sos, and that caused the cell for activity SOS to display without a style.
Note: there is no connection whatsoever between the classes for activities and users.
Also a fun fact: if I change the user code to SOS (all uppercase, now it is exactly equal to the activity code) the problem does not occur.
I wanted to add an Google CSE to the gitbook instead of the normal search engine.
It's no problem to add the GCSE to the gitbook, only the result is weird.
If I go directly to a page I can see the Search Box and can use it normally. If I look at the code there is a div: <div id="__gcse_0">.
If I now go through another chapter the Search Box disappears and there is another div instead of the previous in the code: <gcse:search>.
After I refresh the page the box appears again. This happens on Firefox and Chrome.
Do somebody know what the problem might be?
I've been trying to figure out this same issue... So far, I can only get it to stay by placing the google script into an overriding layout.html - but this is not recommended, and it isn't ideal for most placements. I've also noticed that the CSS that is loaded through the script then gets lost when switching pages (like the script itself was previously) so this solution would also be a pain to re-add all the css files. So it's a super messy solution, and hopefully some one has a better solution out there.