I am having an issue with my Angular 7 application when initializing. I have a class called "testing", and all it does is change the text color to red. I had the class listed in either the index.html file inside a style tag, or in the styles.scss file with all my global styles. I tested both ways with same results. I'm using angular/cli and ng serve to test my application and the following is how I have my index.html page laid out:
<body>
<app-root>
<div class="container">
<span class="testing">Application is loading, please wait...</span>
</div>
</app-root>
</body>
Expectation: The text inside the span should be red with a slight indent (via bootstrap container class).
Actual Results:
When I type localhost:4200 in the url and hit enter, the text appears to the top far left of the screen with no red color before the app gets rendered.
If I hit refresh the same thing as #1 happens.
If I hit shift+refresh, for a split second #1 happens before the text gets indented into the bootstrap container div and changes to red.
Can someone explain to me what is happening here, and what do I need to do to make #3 happen without any split second style changes? If any additional information is needed to answer, please let me know.
First, of all this is not right way to write even a single word in tag because it behaves as template directive or you can say empty box to be filled by app.component.html content, and this is why you observing little flick (appears before render) and best way to write your content in app.component.html and style it through app.component.css / app.component.scss or you can write that css in main file for css (style.css) but each class should be in their component styling. Because angular is about separate modules/component/section.
Hope this helps you
Related
I need to switch to element that is coded as <div class="error-wrapper">.
It contains text which coded as <span class="error-content">Some text here.</span>
It can be closed by clicking x button which coded as <span class="glyphicons glyphicons-remove">.
I've figured the xpaths for each element.
So I need to find the error-wrapper element somehow, click close button and switch to other elements on the webpage.
I've tried Page Should Contain, Element Should Be Visible, Page Should Contain Element, ...
The problem is the test is failing with error: "Window with last index is same as the current window."
How can I switch to this "window" and switch back to main window? It's not an alert or a popup or a window.
Screenshot of HTML
Maybe the HTML has iframe,
If it has, you can use Select Frame keyword in SeleniumLibrary.
HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document
If we're not lucky, try this one Wait Until Page Contains Element or maybe you can optimize the xpaths more.
I have a question about how content-hiding feature is implemented on thefreedictionary.com site.
I don't understand how does it work.
If you visit the following URL with AdBlock enabled,
http://encyclopedia.thefreedictionary.com/stack+overflow
the main content will be hidden.
Even if JavaScript is disabled (I'm using "NoScript" FireFox add-on), the main content will still be hidden.
Let's look at the main content div:
<div id="content" class="yt">
The path to this div is the following (the image is clickable):
Please note that the class name (yt in my case) is different on every page refresh, so your class name may contain another 2 letters.
By looking at "Rules" and "Computed" tabs in Firefox Developer Tools we can see that .yt class has its display attribute set to none.
It is easy to check that it is this checkbox that controls the visibility of main content.
My question is: Where does this css line come from?
It looks like a css data URI, but I can't find data URIs in html file.
The html file refers to "all.css" which also does not contain setting .yt display to none.
JavaScript is disabled, so display property could not be changed dynamically by a script.
I'm interesting, what trick is being used here.
Could someone explain please?
I have a SVG logo i want to place a few times on a single page. Each time it should show up in a different color. That colors are defined via the Wordpress backend. The colors get applied with a snippet like that:
<div class="logo" style="fill:<?php the_field('op-about-color', 'option'); ?>;"></div>
The SVG is placed in the CSS and is base64 encoded. Inside the <svg>tag i've also included the class logotest. But the problem is the SVG isn't getting colored. I've created an example pen with the base64 encoded svg:
http://codepen.io/rpkoller/pen/DuqBh
It stays black.Opposite to the fact that the inline style filled it red and even the assignment of the fill color green for the sktest class has no effect at all.
If i place an unencoded svg code right into the html into a div everything works as expected. Inline style assignment as well as with the logotest class:
http://codepen.io/rpkoller/pen/rdFup
Is there a way to get things going with the base64 variant? Best regards Ralf
Your problem is in your implementation. It's not necessarily that base64 is the issue so to speak, but the difference between including the image as a CSS background, versus including it in HTML.
In HTML... You literally can read the code of the SVG in the HTML. Because that HTML markup exists in the DOM, it is editable via CSS through your classes. If you were to right click the page and click "View page source" you would see the code of the SVG in the HTML.
In CSS, you are adding the image as a background image. Background images don't get any sort of HTML markup that is outputted into the DOM. It is... an "effect" if you want to say it that way, which is applied to some HTML element that you define. If you right click the page and click "View page source" you will see the element that you are applying the background image to, but there is no additional markup outputted that further CSS could then read and modify.
What are your options? Well, you could apply the inline styling directly to the SVG image, but that isn't in any way dynamic, so you won't be able to do your back-end snippet for class names and such.
The other option is to include the SVG like you have done already, which is called "Inline SVG". This way you can effect it with CSS code.
I'm having a problem finding out which css is actually applied to an element when using Firebug 1.11.2. I'm setting the paragraph font from my own css file (d.css), which is meant to over-ride 3 system css files (a.css, b.css, c.css).
I click on the html tab, and click on the <p> element that I'm
trying to debug.
The style window on the right now shows the applied styles from a.css, b.css, and c.css, but not d.css. No paragraph font is shown, but I can change the paragraph line-height, for example, from a.css.
If I click on the css tab, and find d.css, I can manually change the font and font size and see the changes applied to the <p> element in the main window. However, the style window on the right still shows no font.
Is there some magic to showing all the applied styles?
Try using another add-on for viewing your CSS code, for instance:
https://addons.mozilla.org/en-US/firefox/addon/web-developer
You can try other add-ons.
A bit dumb, but probably worth answering rather than withdrawing the question...
turns out that you have to be rather more careful when selecting the html element than I'd realised. My text was actually in a span:
<p>
<span class="foo">bar</span>
</p>
The problem was simply that selecting the <p> element or the bar text doesn't show the styles applied to bar - you actually have to select the entire span element by clicking on the span word.
Thanks.
I'm currently editing a .html file with telerik radtooltips hooked up to a mapped image. Basically there are small blocks on the image that have been set to fire the radtooltips on mouse over. The html file is ran inside of a .aspx file and it inherits the telerik namespace. However, I cannot set attributes in the radtooltips and it instead defaults to a really ugly default style that I can no longer change. I've also tried setting up divs and tables inside the tool tip however, the tooltip container isn't affected so you get a nasty yellow border from the tooltip around whatever definitions are setup for the table or div.
Example:
The orange background is defined by a div inside the tooltip:
<div style="background-color:Orange; border-color:#b24710;">
This is the current tooltip I have defined...and the attributes that are being ignored:
<telerik:RadToolTip ID="rttGeochemTip" runat="server" TargetControlID="geochem" RelativeTo="Mouse"
Position="BottomCenter" BackColor="Gray" BorderColor="Black" Font="Sans-serif">
I have also tried this without the nested div:
<telerik:RadToolTip ID="rttCharTechTip" runat="server" TargetControlID="char" RelativeTo="Mouse"
Position="BottomCenter" BackColor="Gray" BorderColor="Black" Font="Sans-serif">
the code above without the nested div is the same as the screenshot except for the orange is replaced by that default yellow border color because I'm not overriding the inside color. I have also tried using CSS to the same failed effects.
Any ideas of what might cause this behavior?
The html page was nested inside a .aspx page and some how the inheritance of the telerik skin sunset was being applied and I wasn't able to override it. To fix the problem I ended up adding in a telerik skinmanager and applied a more appropriate skin for my controls and that fixed the issue. I'm assuming our styling setup wasn't built to the telerik skin standards.