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
Related
I have this navigation in HTML that looks like following:
<nav>
<div class="nav-item lvl-0">
<a></a>
<div class="sub">
<div class="nav-item lvl-1">
<a></a>
</div>
</div>
</div>
</nav>
I have some styles applied to all as in the navigation in the defaults layer, now I want to add separate styles for each level. I have this
nav {
.nav-item {
a {padding:0;}
&.lvl-0 {
> a {#extend .size-18;}
}
&.lvl-1 {
> a {#extend .size-13;}
}
}
}
Is there a way to write something along these lines:
nav {
.nav-item {
a {padding:0;
.lvl-0 > & {#extend .size-18;}
.lvl-1 > & {#extend .size-13;}
}
}
}
How can Sass be used with CSS modules in Gatsby on conditional classes?
I have tried the following:
menu.js
import menuStyles from './menu.module.scss';
import classNames from 'classnames';
const Menu = ({ open }) => {
return (
<nav className={classNames(menuStyles.menu, { isOpen: open })}>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
);
};
menu.module.scss:
.menu {
background: green;
&.isOpen {
background: blue;
}
}
An onClick event updates the open prop, and I can see the isOpen class being added and removed as expected.
The problem is that the CSS isn't applied to it: the background remains green. Looking in the Chrome Network tab I can see that the styles are applied to the class menu-module--isOpen--DyE73 and not just isOpen:
.menu-module--menu--2cKbx {
background: green;
}
.menu-module--menu--2cKbx.menu-module--isOpen--DyE73 {
background: blue;
}
When not using CSS modules (import './menu.scss'; and <nav className={classNames('menu', { isOpen: open })}>), the styles are applied properly in both cases.
How can Sass be used with CSS modules to style the conditional isOpen class?
The following will work:
<nav className={classNames(menuStyles.menu, { [menuStyles.isOpen]: open })}>
The difference is that I replaced isOpen with [menuStyles.isOpen] (the square brackets representing computed property names).
Just like menu, the CSS rule isOpen also gets a dynamic, locally scoped name so you need to make sure to import its name from the CSS module to.
What`s wrong with this code? After render div element scroll has to be in the bottom of div element. scrollTop not saving the value after func
<main>
<div v-if="messages">
<ul ref="messagesContainer">
<li v-for="message in messages" :key="`${message.text}.${message.username}`">
<Message :message="message" :username="username" />
</li>
</ul>
</div>
</main>
mounted() {
this.scrollToEnd();
},
methods: {
scrollToEnd() {
const height = this.$refs.messagesContainer.scrollHeight;
this.$refs.messagesContainer.scrollTo(0,height)
// doesnt work
// this.$refs.messagesContainer.scrollTop = height
}
}
main {
background-color: #fff;
height: 56vh;
ul {
height: 100%;
overflow: auto;
flex: auto;
}
}
you can get the y position of the element via the offsetHeight property like this:
var offsetTop = this.$refs.messagesContainer.offsetHeight;
You can find more information regarding offsetHeight, clientHeight and scrollHeight properties here
Note you need to call the scrollTo method on the window element:
example:
methods: {
scrollToEnd() {
var scrollHeight = this.$refs.messagesContainer.offsetHeight;
this.$refs.messagesContainer.scrollTop = scrollHeight;
}
}
Hope this helps :)
<main>
<ul v-if="messages" id="messagesContainer">
<li v-for="message in messages" :key="`${message.text}.${message.username}`">
<Message :message="message" :username="username" />
</li>
</ul>
</main>
scrollToEnd() {
const element = document.getElementById('messagesContainer')
element.scrollTop = element.offsetHeight + element.scrollHeight
}
This seems to work on Nuxt. This also provides a smooth scrolling as well.
const element = this.$refs.messagesContainer;
element.scrollIntoView({ behavior: "smooth", block: "start" });
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"))