I try to create a website with sass technology but when I give the classname on my header the style is not applied and I don't understand why.
The name of my sass file is Login.module.scss and import it in my login.js file.
Thanks for your help,
.nav-login {
background-color: white;
height: 5vh;
nav ul li a {
color: #FA5858;
text-decoration: none;
}
}
import styles from "#/styles/Login.module.scss"
export default function LoginPage() {
return (
<>
<Header/>
</>
)
}
function Header() {
return (
<header className={styles.navLogin}>
<nav>
<ul>
<li>
<a href={"#"}>Logidiese</a>
</li>
<li>
<a>FR</a>
</li>
<li>
<a>Contacts</a>
</li>
</ul>
</nav>
</header>
)
}
nav-login != navLogin
Update the class name in the scss file to match
I'm creating article cards, and I want the tags to get rendered within the card. I'm using NextJS and GraphQLClient to fetch data from Contentful. Everything gets rendered but not the Tags.
This is my query:
export async function getArticles() {
const articlesQuery = gql`
{
articleCollection {
items {
title
slug
excerpt
date
contentfulMetadata {
tags {
name
id
}
}
featuredImage {
title
url
width
height
}
}
}
}
`;
return graphQLClient.request(articlesQuery);
}
This is the results using GraphiQL:
This is my article page where I want the tags to appear on the article post cards:
export async function getStaticProps() {
const articles = await getArticles();
return {
props: {
articles: articles.articleCollection.items,
},
};
}
export default function ArticlesPage({ articles }) {
return (
<Wrapper>
<div>
<div>
<div/>
</div>
<div>
<div>
{articles.map((article) => (
<Link key={article.slug} href={`/articles/${article.slug}`}>
<div key={article.title}>
<div>
<img
src={article.featuredImage.url}
alt=""
/>
</div>
<div>
<div>
<p>
<a href={article.contentfulMetadata.tags.name}>
{article.contentfulMetadata.tags.name}
</a>
</p>
<a>
<p>
{article.title}
</p>
<p>
{article.excerpt}
</p>
</a>
</div>
<div>
<div>
</div>
<div>
<p>
</p>
</div>
</div>
</div>
</div>
</Link>
))}
</div>
</div>
</div>
</Wrapper>
);
}
Can you help me spot what I'm doing wrong?
Contentful DevRel here.
contentfulMetadata.tags is an array. The provided snippet template assumes tags is an object.
Try iterating over the array and render each tag seperately.
article.contentfulMetadata.tags.map((tag) => {
return <a href={tag.name}>
{tag.name}
</a>;
})
I am using BEM Scss explain please how to select inside nth-child element.
I tried below format but it didn't work for me
<div class="bookearly-container" >
<div class="row bookearly-container__row">
<div class="col-xs-12 col-md-4 bookearly-container__col">
<div class="bookearly-container__discountcontainer">
</div>
<div class="bookearly-container__discountcontainer">
</div>
<div class="bookearly-container__discountcontainer">
</div>
</div>
</div>
</div>
MY BEM Scss I added nth-child 3rd element children element that is not working:
.bookearly-container {
&__row {
margin-bottom: 4.6rem;
& > :nth-child(3) {
&__discountcontainer { -- this element not selected
&:before {
display: none;
}
}
}
}
}
Can you please explain how to select? Thanks in advance.
You are using the child combinator (>) inside .bookearly-container__row(line 4 in your CSS example), and the only direct child there is .bookearly-container__col.
If you want to target the .bookearly-container__discountcontainer elements you need to adjust the selector nesting a bit.
Try using the #debug directive combined with the & selector to see what you are actually selecting, it's helpful when you get no other clues.
This is a straight-forward suggestion to solve it:
.bookearly-container {
#debug &; // .bookearly-container
&__row {
#debug &; // .bookearly-container__row
}
&__discountcontainer:nth-child(3) {
#debug &; // .bookearly-container__discountcontainer:nth-child(3)
&:before {
#debug &; // .bookearly-container__discountcontainer:nth-child(3):before
}
}
}
If you are depending on the child combinator (>) for some reason, you could nest it inside a &__col selector, like so:
.bookearly-container {
&__col {
// Targeting any class ending with "__discountcontainer"
& > [class$="__discountcontainer"]:nth-child(3) {
&:before {
#debug &; // .bookearly-container__col > [class$="__discountcontainer"]:nth-child(3):before
}
}
}
}
I have below html:
<li>
<div class="w3l_banner_nav_right_banner1" style="background:url('./assets/images/2.jpg') no-repeat 0px 0px;">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now
</div>
</div>
</li>
Problem:
I want to replace image url /assets/images/2.jpg with dynamic variable like {{ article.uri }}.
I tried with several way from below ref:
Attribute property binding for background-image url in Angular 2
How to add background-image using ngStyle (angular2)?
Tried so far:
<li *ngFor="let article of arr;let i=index;">
<div *ngIf="i == 0" class="w3l_banner_nav_right_banner" [ngStyle]="{ 'background-url': 'url('+article.uri+')'} no-repeat 0px 0px;">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now1
</div>
</div>
</li>
I am using Angular 4.1.3.
background-url is incorrect CSS, use background or background-image instead.
Here is an example of correct syntax:
<div [ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}"></div>
Your full example would look like this:
<li *ngFor="let article of arr; let i=index;" >
<div *ngIf="i == 0"
class="w3l_banner_nav_right_banner"
[ngStyle]="{'background': '#fff url(' + article.uri + ') no-repeat 0 0'}" >
<h3> Make your <span>food</span> with Spicy. </h3>
<div class="more">
Shop now1
</div>
</div>
</li>
If you're getting your background image from a remote source or a user input you will need to have angular sanitize the url. In your component you will want to add the following bits of code...
import { DomSanitizer } from '#angular/platform-browser';
export class YourComponent {
constructor(private _sanitizer: DomSanitizer) { }
public sanitizeImage(image: string) {
return this._sanitizer.bypassSecurityTrustStyle(`url(${image})`);
}
}
Try setting your HTML to this...
<li *ngFor="let article of arr;let i=index;">
<div *ngIf="i == 0" class="w3l_banner_nav_right_banner" [style.background-image]="sanitizeImage(article.uri)">
<h3>Make your <span>food</span> with Spicy.</h3>
<div class="more">
Shop now1
</div>
</div>
</li>
And apply the no-repeat 0px 0px; in some class you attach to the div.
The correct answer is [style.background-image]="'url(' + article.uri + ')'"
but if you are using ngFor for carousel, make sure you have added class 'active' properly.
This code will NOT working:
<div class="carousel-item active"
*ngFor="let article of arr;"
[style.background-image]="'url(' + article.uri + ')'"></div>
You should use 'active' class for first item only!
<div class="carousel-item"
*ngFor="let article of arr; let i = index;"
[ngClass]="{'active': i === 0}"
[style.background-image]="'url(' + article.uri + ')'"></div>
you can use it by adding url path in a single variable.
for example
bgImageVariable="www.domain.com/path/img.jpg";
[ngStyle]="{'background-image': 'url(' + bgImageVariable + ')'}"
Working for Angular 8+ (Power of template literals):
In component, define ngStyle object var (here called as styles, initialised in constructor):
const bgImageUrl = 'assets/images/dot-grid.png'
const styles = {
backgroundImage: `url(${bgImageUrl})`
};
In template, assign this as ngStyle
<div [ngStyle]="styles"><!-- your content --></div>
In my case the following syntax worked:
<ion-slide *ngFor="let page of pages">
<div class="cardImage" style.background-image="url('{{ page.imageUrl }}')"></div>
</ion-slide>
Ionic CLI : 6.16.3
This works fine for me:
js file:
path = 'url(../assets/about.png)';
array:
string[] = [this.path];
and HTML file:
<div *ngFor="let item of array" [ngStyle]="{'background-image': item}">
To solve this, the correct syntax is
<div class="modalContainer"
ng-style="{'background-image': 'url(' + selectedMeal.url + ')'}">
Mark answer if it helps.
<div id="menu">
<ul>
<li>Menu link</li>
</ul>
</div>
<div id="content">Dummy content</div>
I want to get the UL tag using parent id.
The condition is if the UL tag is missing, i need to apply new class for the Content Div.
script
document.observe("dom:loaded", function() {
if( --------)
{
$('content').removeClassName('fwidth');
}
else{
$('content').addClassName('fwidth');
}
Thanks
I don't really understand your question, but if you want to find out if <div id="content"> has ul elements, try
if ($('content').down("ul"))