My Forms app is reading in a feed and the content provider wants to use HTML
The preferred way of doing it would be to leverage CSS, but I haven't been able to determine how to target an element
For example, no problem setting text colour like so:
.newsPageBody {
color: pink;
}
Works fine. This however, does not:
.newsPageBody h1 {
color: green;
}
Is there a way to achieve this, short of marking up the whole incoming feed?
There're several methods to select element using css.
You could look at Selecting elements and applying properties. and Styling Xamarin.Forms Apps with CSS
Selecting elements by type
stacklayout {
margin: 20;
}
Selecting elements by base class
^Entry {
font-size: 30;
background-color: white;
margin: 10 0;
color: #0A100D;
}
Selecting an element by name
#listView {
background-color: lightgray;
}
<ListView x:Name="listView" ...>
...
</ListView>
Selecting elements with a specific class attribute
.detailPageTitle {
font-style: bold;
font-size: medium;
text-align: center;
}
.detailPageSubtitle {
text-align: center;
font-style: italic;
}
<Label ... StyleClass="detailPageTitle" />
<Label ... StyleClass="detailPageSubtitle"/>
and so on.
Related
I'm new in Angular and I do not even know if this approach is good.
I want to create my own universal button component and define his styles in button.component.css. After i want to use this button in my other component like login form.
I do something like that in button.component.css:
button {
height: 50px;
width: 100px;
border-radius: 8px;
font-family: "Arial Black";
font-size: 18px;
box-shadow: none;
}
.primary-button {
background: #5c52ff;
color: white;
}
.primary-button:hover {
background: white;
border: #5c52ff solid 2px;
color: #5c52ff;
}
.secondary-button {
border: forestgreen solid 2px;
background: white;
color: forestgreen;
}
Now in index.html i do:
<app-button class="primary-button"></app-button>
But scope of button.component.css works only in button.component.html
I should to create this style classes in global style.css and don't create button component but simple use button tag and add class attribute with property from style.css. How to approach this problem.
You should be setting the class to the button present in your button.component.html instead of setting it in the app-button element. You can achieve this by sending your class to the button component as an Input.
index.html
<app-button className="primary-button"></app-button>
button.component.ts
import { Component, Input } from '#angular/core';
....
#Input() className: string;
button.component.html
<button [class]="className"></button>
This way your class will be applied within the scope of button.component.css.
I am using styled-components and want to target the first child of Text, but am unable to do so.
const Text = styled.p`
font-size: 12px;
&:first-child {
margin-bottom: 20px;
}
`;
... component
return(
<div>
<p>I am just regular text</p>
<p>Me too</p>
<Text>Hello Joe</Text> // this should have the margin bottom
<Text>Goodbye</Text >
</div>
)
Finally, I got your issue. The styled component confuses with the first two native p tag (from my perspective) and that's the reason why the CSS is not applied.
I will use a workaround like this:
const Text = styled.p`
font-size: 12px;
color: blue;
&:nth-child(3) {
margin-bottom: 20px;
color: red !important;
}
`;
By doing this, you are selecting the third child (which include the first two p tag) for the CSS
OR, you can do something like this: Adding a class name for the tag and giving CSS for that class.
const Text = styled.p`
font-size: 12px;
color: blue;
&.colors {
margin-bottom: 20px;
color: red !important;
}
`;
<div>
<p>I am just regular text</p>
<p>Me too</p>
<Text className="colors">Hello Joe</Text>
<Text>Goodbye</Text>
</div>
Here is the demo
Hope it helps :)
Use like this
const Text = styled.p`
font-size: 12px;
> * {
&:first-child {
margin-bottom: 20px;
}
}
`;
There shouldn't be a space between the & and the :first-child
&:first-child {
margin-bottom: 20px;
}
it's better to use :last-of-type on certain styled component instead of using :nth-child and it works perfectly
export default styled.div`
:last-of-type {
background: red;
}`
const Text = styled.p`
font-size: 12px;
color: blue;
&:nth-child(3) {
margin-bottom: 20px;
color: red !important;
}
`;
This is possible, but probably not correct
This totally is possible, as we see with the other answers. The issue is that with first-child or nth-child solutions you tend to end up reaching down the DOM hierarchy, creating all sorts of specificity issues that can be difficult to untangle later.
The beauty of Styled Components is you typically apply styles to the element itself, meaning your styles stay tightly coupled to your components. Components become portable, and it's easy to find the line of CSS that might be causing an issue in a complex app.
for example, if I were to style the first <a> in a list item in a ul differently, I'd need to put :first-child further up the hierarchy, breaking encapsulation.
Treat your styles as a function
The simple solution to this is to recognise that the styled component is a function that can receive parameters:
<StyledListItem index={index} />
Then receive that parameter in the component:
export const StyledListItem = styled.li<{index?: number}>`
${
({index}) => {
if (index === 3) return `
color: red;
border: 2px dotted pink;
`
if (index === 0) return `
border-left: none
`
}
}
`
CSS in JS facilitates these kinds of programmatic solutions, and your life will be easier if you leverage them.
What difference will it make to my CSS class when I am writing it twice, once with just the class name and once in combination with another class name
.User_Profile{
padding : 10px;
margin : 16px;
background-image : url("images/user.png");
font-size: 20px;
}
.User_Profile, .Premium{
font-family: cursive;
display: block
background-image : url("images/P_user.png");
font-size: 20px;
}
How will the browser process an HTML element when I've used an element with class="User_Profile" and once with class="User_Profile Premium"
As those booth classes have the same specificity, the later one in the source file will take precedence and override those properties. However, if you change the rule to .User_Profile.Premium it would only apply for the <element class="User_Profile Premium"> but the rule you have written apply to both <element class="User_Profile"> and <element class="Premium">.
a div with class User_Profile Premium will override all properties of the User_Profile selector.
.User_Profile {
padding : 10px;
margin : 16px;
background-image : url("images/user.png"); // <-- overvritten
font-size: 20px; // <-- overvritten
}
.User_Profile, .Premium {
font-family: cursive;
display: block
background-image : url("images/P_user.png");
font-size: 20px;
}
In your case are this the properties background-image and font-size. To prevent this you could use this code:
.User_Profile, .Not_Premium {
padding : 10px;
margin : 16px;
background-image : url("images/user.png");
font-size: 20px;
}
.User_Profile, .Premium {
padding : 10px;
margin : 16px;
font-family: cursive;
display: block
background-image : url("images/P_user.png");
font-size: 20px;
}
Note when you're using CSS transpilers, you could extend .Premium selector from .User_Profile.
There are a few ways you can write multiple CSS selectors in a declaration.
When you separate two selectors by a comma, you're telling the browser to apply the CSS rules to all of those selectors. It's the same as writing each selector separately with its own declaration block.
Example:
// This is the same
.User_Profile, .Premium {
font-size: 20px;
color: red;
}
// As this:
.User_Profile {
font-size: 20px;
color: red;
}
.Premium {
font-size: 20px;
color: red;
}
If you remove the comma, the CSS rule will apply to a child element of the first selector.
Example:
.User_Profile .Premium {
font-size: 20px;
color: red;
}
<div class="User_Profile">
<div class="Premium">Applied</div>
</div>
<div class="Premium">Not Applied</div>
If you want the CSS rule to only apply to an element that uses both classes, you remove the space between the two selectors.
Example:
.User_Profile.Premium {
font-size: 20px;
color: red;
}
<div class="User_Profile Premium">
This div has the rule applied.
</div>
<div class="User_Profile">
This div does not have the rule applied.
</div>
<div class="Premium">
This div does not have the rule applied.
</div>
You can also do more advanced techniques, like selecting only direct descendants by placing a > symbol between selectors.
I have a .tintTile that depends on parent, hence the & sas follows:
// Tint titles
.tintTitle {
text-transform: uppercase;
font-family: #fontDemiBold;
color: #colorOrangeKWS;
.Windows7 & {
font-family: arial, sans-serif;
font-weight: bold;
color: #colorOrangeKWS;
}
}
In many others classes, I use the .tintTitle as follows:
// titles, orange bold
.tab {
&>div {
.tintTitle;
// etc.
}
}
Unfortunately, I can't achieve the .Windows7 (provided the fact Windows7 is a class set to the body tag as follows:
<body class="Windows7">
<p class="tintTitle">Good, it works</p>
<div class="tab">
<div>This title doesn't make it</div>
Is there a way to achieve my goal with less beside duplicating every .tintTitle where it's required?
As far as i understand your question your code should work in Less, see http://codepen.io/anon/pen/KwNWmq
Less code:
// Tint titles
.tintTitle {
text-transform: uppercase;
color: green;
.Windows7 & {
text-transform: initial;
color: red;
}
}
.tab {
&>div {
.tintTitle;
// etc.
}
}
Your are using the parent selectors feature of Less to change the selector order
The only thing you should notice will be that properties set for your (not having .windows) will be also applied for your .windows selectors. That's why i have to set text-transform: initial;, otherwise the .windows * also get uppercased cause the also match .tintTitle.
My CSS contains
a.myLink {
hover {font-size: 24;
font-weight: bold;
color: red;
}
I'd like to be able to reference it using
<a class="myLink" href="http://myUrl" target='_new'>myName</a>
However, CSS does not get recognize this call.
What am I missing here? Please advise.
a.myLink {
hover {font-size: 24;
Is not correct syntax, look at using
Link Properties:
a.myLink {
/* Some formatting for the link here */
}
Hover Properties:
a.myLink:hover {
font-size: 24;
font-weight: bold;
color: red;
}
You need
a.myLink:hover {
font-size: 24;
font-weight: bold;
color: red;
}
if you want to add these styles when someone hovers over the link.
You shouldn't have any asteriks(*) in your HTML code. Maybe you only added those for this demonstration?
But for a hover effect you want something like this:
a.myLink:hover { /*code here */ }
just a bit of mixed up syntax.