Hello I am trying to change the background of my page using the following code in a file called
Survey.module.css:
html {
background-image: linear-gradient( 94.3deg, rgba(26,33,64,1) 10.9%, rgba(81,84,115,1) 87.1% );
}
I've imported the CSS into my react component using the following import statement: import style from './Survey.js'
The code in Survey.js is below
import React from 'react'
import { Container, Col, Row } from 'react-bootstrap'
import style from './Survey.module.css'
function Survey() {
return (
<html>
<div>
<h1 className="display-5 text-center mt-5 text-white">Tell us about yourself</h1>
<div className={`${style.container} d-flex justify-content-center align-items-center`}>
<div className='row justify-content-md-center'>
<div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
<img src='https://static.toiimg.com/photo/msid-77430626/77430626.jpg?228049' className='rounded img-fluid'></img>
</div>
<div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
<h1></h1>
</div>
</div>
</div>
</div>
</html>
)
}
export default Survey
My issue is that when I change the background in CSS with the above code, the background of other pages in my project also change. All those pages import their CSS files using ***.module.css
I tried to use CSS modules to avoid this problem but I am still encountering it. Any advice?
Give your html class so your css doesn't affect to other page.
html.survey {
background-image: linear-gradient( 94.3deg, rgba(26,33,64,1) 10.9%, rgba(81,84,115,1) 87.1% );
}
import React from 'react'
import { Container, Col, Row } from 'react-bootstrap'
import style from './Survey.module.css'
function Survey() {
return (
<html className="survey">
<div>
<h1 className="display-5 text-center mt-5 text-white">Tell us about yourself</h1>
<div className={`${style.container} d-flex justify-content-center align-items-center`}>
<div className='row justify-content-md-center'>
<div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
<img src='https://static.toiimg.com/photo/msid-77430626/77430626.jpg?228049' className='rounded img-fluid'></img>
</div>
<div className='col col-lg-5 shadow p-3 mb-5 bg-white rounded'>
<h1></h1>
</div>
</div>
</div>
</div>
</html>
)
}
export default Survey
How about creating a div with a your preferred className that wraps the rest of the content and you can add your css styling like background-image to it. I don't get logic behind setting a background-image on the entire html document.
<div className={styles.surveyContainer}>
<div className={styles.content}>
...rest of the content
</div>
</div>
Related
import React from "react";
export default function PromoBanner() {
return (
<section className="container mt-4 mb-grid-gutter">
<div className="bg-faded-info rounded-3 py-4">
<div className="row align-items-center">
<div className="col-md-5">
<div className="px-4 pe-sm-0 ps-sm-5">
<span className="badge bg-danger">Limitli Süre</span>
<h3 className="mt-4 mb-1 text-body fw-light">Small Title</h3>
<h2 className="mb-1">En Son Teknoloji</h2>
<p className="h5 text-body fw-light">
product Title
</p>
<a className="btn btn-accent" href="#">
Btn Text
<i className="ci-arrow-right fs-ms ms-1" />
</a>
</div>
</div>
<div className="col-md-7 d-flex align-items-center justify-content-center">
<img
src="/general/01.png"
alt="Güç Kontrol"
className="PromoBannerImage"
/>
</div>
</div>
</div>
</section>
);
}
Here is my sample comp. When ı export my project the image does not show how can ı solve this problem ?
Here is my jsconfig.json file. With this the css files is uploading but not images uploading when ı check the browser's Network developer tab ı can not see any images.
{
"compilerOptions": {
"baseUrl": "."
}
}
This is my file structure.
This is out file.
This is the root files.
This is my Public folder.
This is in out file index.html
When I add a dot like "./general/01.png" the image show and again give an error ı mean When ı refresh my browser the images show just 1 second after that the images does not show.
the link is not working <Link href={/blog/detail?id=${blog._id}}.
{ data && data.map((blog) => (
<div className="col-12 col-lg-3 mb-6 mb-lg-0" key={blog._id}>
{/* Blog Card */}
<div className="card border-0 bg-transparent">
{/* <div className="position-absolute bg-white shadow-primary text-center p-2 rounded ml-3 mt-3">15
<br/>July
</div> */}
{/*<img className="card-img-top shadow rounded" src={`${blog.productImages[0]}`} alt="Image"/>*/}
<Link href={`/blog/detail?id=${blog._id}`}><img className="card-img-top shadow rounded_img" style={{height: "170px", width: "253px"}} src={BASE_URL+blog.productImages[0]} alt="Img"/></Link>
In HTML Links use the <a> element not link, try replacing your last line with:
<a href={`/blog/detail?id=${blog._id}`}><img className="card-img-top shadow rounded_img" style={{height: "170px", width: "253px"}} src={BASE_URL+blog.productImages[0]} alt="Img"/></a>
See here:
https://www.w3schools.com/tags/tag_a.asp
Also, try replacing className with class throughout your code.
I have the following HTML code in my landing page
<div class="col-12 text-center mt-4 mb-4">
<a class="btn know-more-btn text" href="#billing">Tell Me More</a>
</div>
<div id="billing" class="billing-section">
//show some billing options
</div>
when clicking on btn know-more-btn for the first time the screen flickers and nothing happens only from the second click it "jumps" to the right location on the page (the billing section)
Not sure why this happens
Also is there a way to turn the "jump" into simulation of fast scroll to that section
Try this
html
<div class="col-12 text-center mt-4 mb-4" (click)="toSec()">
<a class="btn know-more-btn text">Tell Me More</a>
</div>
ts
toSec() {
document.getElementById("billing").scrollIntoView();
}
for smooth scrolling adding this to main style file
css
html {
scroll-behavior: smooth;
}
this will not work will with the router Tell Me More ,it will trigger the router to redirect to some page or reload the page.
so one way to solve it by useing template variable and call scrollIntoView method to apply scrolling.
<div class="basic c-pointer col-12 text-center mt-4 mb-4">
<a class="btn know-more-btn text"
(click)="billingElm.scrollIntoView({behavior: 'smooth'})" >
Tell Me More 👇
</a>
</div>
<div #billingElm class="billing-section">
//show some billing options
</div>
stackblitz demo 🚀🚀
for reusability this the directive way
#Directive({
selector: '[scrollTo]'
})
export class ScrollToDirective {
#Input('scrollTo') elm:HTMLElement;
#HostListener('click') onClick(){
if(this.elm){
this.elm.scrollIntoView({behavior:'smooth'});
}
}
}
template
<div class="col-12 text-center mt-4 mb-4">
<a class="btn know-more-btn text" [scrollTo]="billingElm" >Tell Me More 👇</a>
</div>
<div #billingElm class="billing-section">
//show some billing options
</div>
stackblitz demo 🌟🌟
check this Passive Link in Angular 2 - equivalent to
get more details about how this problem.
my landing page component declares in it a header component like so
<div class="container-fluid">
<div class="intro-section">
<div class="background">
//some stuff
</div>
<div class="content">
<app-page-header></app-page-header>
<div class="row">
<div class="col-12 text header mt-3">
Hello World
</div>
<div class="col-12 text-center mt-4 mb-4">
<button class="btn know-more-btn text" (click)="scroll(subscriptions)">Tell me More</button>
</div>
</div>
</div>
</div>
<div #subscriptions></div>
<div id="others" class="otherSection">
//other stuff
</div>
</div>
the scroll function in landing-page.component.ts is
scroll(el: HTMLElement) {
el.scrollIntoView({behavior:"smooth"});
}
I've also tried this
scrolling() {
(document.getElementById('others')).scrollIntoView({behavior:"smooth"});
}
I want to have a button in my app-page-header component that triggers or perform the same action an "scroll(subscriptions)" i.e in the landing page scroll to subscriptions. How can I achieve this?
Create an EventEmitter inside you app-page-header like
#Output() onButtonClicked: EventEmitter<any> = new EventEmitter();
The button in your app-page-header will emit the action to the parent component like:
buttonClicked() {
onButtonClicked.emit();
}
On your landing page add this to call the scroll function whenever the event is emitted.
<app-page-header (onButtonClicked)="scroll(subscriptions)"></app-page-header>
I'd like to display formated HTML using type script function in an angular component, I wanted it to display question from diferent type, I tried this,
import {Component, OnInit} from '#angular/core';
import {TP, Question, Qtype} from "../tp";
import * as Exercice from '../assets/Exercice.json';
#Component({
selector: 'app-tp',
templateUrl: './tp.component.html',
styleUrls: ['./tp.component.css']
})
export class TpComponent implements OnInit {
constructor() {
}
ngOnInit(): void {
}
displayQCM(question: Question) {
return `
<div>
<hr class="w-100">
<h3>Question n°${question.number} ${question.questionType}</h3>
<p>${question.questionContent}</p>
...
QCM question element
...
</div>
`;
}
displayTrueOrFalse(question: Question) {
return `
<div>
<hr class="w-100">
<h3>Question n°${question.number} ${question.questionType}</h3>
<p>${question.questionContent}</p>
...
true or false question element
...
</div>
`;
}
displayQuestion(question: Question) {
return `
<div>
<hr class="w-100">
<h3>Question n°${question.number} ${question.questionType}</p>
<p>${question.questionContent}</p>
...
normal question element
...
</div>
`;
}
}
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<h2>Questions</h2>
{{displayQCM()}}
{{displayQuestion()}}
{{displayTrueOrFalse()}}
</div>
</div>
but the HTML display only as plain text writing fully the code on the page, do you know how to fix this ?
EDIT: edited code to be more in the context, the question comes from a json file and there's 3 type of them, I created a function to translate them into Question and depending on there type I want 3 way to display them in 3 different forms, each type as a long HTML development and are displayed with different tag and element
You need to use [innerHTML] property in your html file
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<h2>Questions</h2>
<div [innerHTML]="displayQCM()"></div>
<div [innerHTML]="displayQuestion()"></div>
<div [innerHTML]="displayTrueOrFalse()"></div>
</div>
</div>
If you are just trying to inject dynamic content you need to sanitize your html string and then use innerHtml. From your question Im not sure what the goal is and there must be a better way without injecting Html but you would need to clarify the goal.
questions: Array<SafeHtml> = new Array<SafeHtml>();
myJson: Array<string> = []; //I dont know where its coming from
constructor(private sanitizer: DomSanitizer) {
}
ngOnInit(): void {
myJson.forEach((question) => {
this.questions.push(this.sanitizer.sanitize(question));
})
}
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<h2>Questions</h2>
<div *ngFor="let q of questions" [innerHtml]="q"></div>
</div>
</div>
Why you don't use ngFor to list all questions?
HTML
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<h2>Questions</h2>
<div *ngFor="let question of allQuestions">
<hr class="w-100">
<h3>Question n°{{question.number}} {{question.questionType}}</h3>
<p>{{question.questionContent}}</p>
</div>
</div>
</div>
And allQuestions is your question array
You can add conditions depends on question type with *ngIf:
<p *ngIf="question.questionType=== 'normal'"></p>
or you can use ng-template:
<ng-template [ngIf]="question.questionType === 'normal'">Your HTML code for normal question</ng-template>
<ng-template [ngIf]="question.questionType === 'trueFalse'">Your HTML code for trueFalse question</ng-template>
Exemple
TS :
displayQCM : boolean;
displayQuestion : boolean;
displayTrueOrFalse : boolean;
HTML
<div class="row justify-content-center">
<div class="col-12 col-lg-6">
<h2>Questions</h2>
<div *ngIf="displayQCM">...</div>
<div *ngIf="displayQuestion">...</div>
<div *ngIf="displayTrueOrFalse">...</div>
</div>
</div>