react funcion <br> is not working in this <p> - html

I have search and tried much now but nothing works to get a new line here.
This is the React function
Really basic problem I guess because i'm quite new on this but please advice.
someone suggested to have this:
.new-line {
white-space: pre-line;
}
in the css but that did not work either . Can this be about using having a js file-extensions?
import React from "react";
import Badge from "../elements/Badge";
import Resume from "../../resume.json";
function AboutMe() {
return (
<section className="section has-background-link" id="aboutMe">
<div className="container has-text-centered">
<figure className="image container is-180x180">
<img
width="180px"
height="180px"
src={Resume.basics.picture}
alt={Resume.basics.name}
className="is-rounded"
onError={(e)=>{e.target.onerror = null; e.target.src=Resume.basics.x_pictureFallback}}
/>
</figure>
<p className="subtitle is-4 has-text-white has-text-weight-bold">
{Resume.basics.x_title}
</p>
<p className="subtitle is-5 has-text-white has-text-weight-light summary-text">
{"test Give me a new line now<br>yes I love it"}
</p>
<div className="container interests">
<div className="field is-grouped is-grouped-multiline has-text-centered">
{Resume.interests.map((value, index) => {
return (
<Badge key={index} text={value.name} faIcon={value.x_icon} />
);
})}
</div>
</div>
</div>
</section>
);
}
export default AboutMe;
I only use one css
html {
scroll-behavior: smooth;
}
.is-180x180{
height: 180px;
width: 180px;
}
.skill-list > li{
margin: 30px 0 0 0;
}
.has-bg-image {
background-image: url('../images/GretaThunberg collage2.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
.bulma-image {
width: 200px;
}
.interests {
display: flex;
justify-content: center;
}
.summary-text {
margin-left: auto;
margin-right: auto;
max-width: 36em;
}
.skill-percentage {
float: right;
}
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=0"
/>
<meta name="theme-color" content="#3273DC" />
<link rel="canonical" href="https://josecoelho93.pt" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title></title>
<meta name="description" content="This is my personal website. You can find information about my experience, skills and articles I have written." />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<link rel="stylesheet" href="./css/bulma-timeline.min.css">
<link rel="stylesheet" href="./css/styles.css">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
<script defer src="https://use.fontawesome.com/releases/v5.4.0/js/all.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-134602535-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-134602535-1');
</script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>

Welcome to StackOverflow. It seems to me that this is not a React.js question, but an HTML/CSS one. I would recommend you try to focus searching for Newline in HTML / CSS instead of mentioning React, since it has nothing to do with this not working. I can assure you that the .js extension has nothing to do with it though :)
Also, try copying the HTML into separate .html file, without React, and debug from there if it is easier for you - you will also see nothing has changed and there is no effect from React whatsoever.
I would recommend experimenting with margin-bottom padding-bottom as well, just to give you some tips. If you want to, you could provide us with a JSFiddle so we can take a look at a live demo.
EDIT: After further inspection, there might be a JavaScript mistake I did not see at first
I would also try the following change:
<p>{"test Give me a new line now<br>yes I love it"}</p>
Change it to:
<p>test Give me a new line now<br />yes I love it</p>
You cannot pass HTML / React elements inside a string like that, since they won't be taken in consideration as anything else than string.

Without digging to deep, and piggy backing on Antonio's answer. You can isolate the problem with a console.log statement in your browser:
console.log("test Give me a new line now\nyes I love it")
What is being down is you need to replace the tag because you are in a sanitized text string and replace it with a newline \n character.
Depending on the template engine there may be ways to inject HTML into the text string but it seems like a newline is all you are after.

try using back tick...
It is not ideal but will work fine

Related

How to make dashboard page in reactjs

I want to create this type dashboard enter image description here but not able to work. How can we make this type style.
I try to make this type dashboard page in my code but it's not work. Anybody please help me out. And check my code below.
My js code
return (
<div className="dashboard">
<div className="dashboard__container">
Logged in as
<div>{name}</div>
<div>{user?.email}</div>
<button className="dashboard__btn" onClick={logout}>
Logout
</button>
</div>
</div>
);
}
And my css code
.dashboard {
height: 100vh;
width: 100%;
background: #3e295a40;
}
.dashboard__container {
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: left;
background-color: #15b88357;
padding: 1em 20px 1em 20px;
color: white;
font-weight: bold;
}
.dashboard__btn {
margin-top: -5px;
font-size: 18px;
padding: 0.25em 0.5em;
border: none;
color: white;
background-color: #402958;
}
.center { text-align: center; }
Please help me out.
I am using bootstrap for "css only" to design my website generally. Here is how I do it.
/public/index.html
You can see that I have linked to my local bootstrap css file inside head tag.
<!DOCTYPE html>
<html lang="en">
<head>
<script>
if(window.screen.height < window.screen.width) {
window.stop()
// window.location = "https://google.com"
}
</script>
<script src="init.js" ></script>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="stylesheet" href="%PUBLIC_URL%/bootstrap.css" />
<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body style="background-color: #efefef">
<div id="root"></div>
</body>
</html>
/src/App.js
I tried to demonstrate how I used css of bootstrap inside my reactjs component. You can also use className. Also take care while adding inline style. It must be object.
const Main = () => {
return(
<div class="d-flex justify-content-center" style={{width:"100vw", height:"100vh"}}>
<div>1</div>
<div class="flex-grow-1">2</div>
<div>
<button class="btn-primary p-2">Abe !</button>
</div>
</div>
)
}
export default Main;
If you get any error. Search for the error and try to resolve with help of google. Those error are common and can be easily fixed. You will learn alot from those errors.

different background images for different pages loaded using div tag

i am working on multipage application by loading mainpage.html into index.html by using tag i need background image different one for different html pages such as mainpage,page1,page2 etc.can any one help ??
index.html
<html>
<head>
<meta charset="UTF-8">
<title>wsdl Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!-- This is static header, it will be shown always -->
<div id="header">
<h1>WS DEMO</h1>
</div>
<div id="wrapper">
<!-- This is a placeholder for dynamic page content -->
<div id="pagePort"></div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
function wlCommonInit(){
busyIndicator = new WL.BusyIndicator();
// Special case for Windows Phone 8 only.
if (WL.Client.getEnvironment() == WL.Environment.WINDOWS_PHONE_8) {
path = "/www/default/";
}
$("#pagePort").load(path + "pages/MainPage.html", function(){
$.getScript(path + "js/MainPage.js", function() {
if (currentPage.init) {
currentPage.init();
}
});
});
}
body{
background: red;
}
<!-- begin snippet: js hide: false -->
//mainpage.html
<script>
$.getScript(path + "js/MainPage.js");
</script>
<p id="currentPage"></p>
<div class="container">
<label>username</label> <input type="text" id="username"><br><br>
<label>password</label> <input type="text" id="userpwd"><br><br>
<input type="submit" value="login" class="appButton" onclick="validate();">
</div>
<p id="mytable"></p>
If you mean you want a different background image applied to the body element but you only have control of a fragment of the page, a style element should work - you might need !important to override the default:
<div id="pageport">
<style>
body { background-image: url('images/newbg.jpg') !important; }
</style>
</div>
In connection with the comment I made I have decided to post my solution as an answer. My solution is rather simple, add a class to the body tag and then change the background using an external CSS file - based on the classes used.
e.g:
...
<body class="index">
...
//in the CSS:
body.index {
background: #F00;
}
Then simply in each of the different HTML pages, change the class of the body tag to suite the background you want.
Check this Plunk for live example
If you need any clarification, drop a comment and I'll get back to ya!

CSS Animation Issue with Image

I have the following code which has a problem (See below).
<!DOCTYPE html>
<head>
<title>Duck</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel-"stylesheet" href="animate.css">
<!-- Tab Title -->
</head>
<body>
<div>
<div id = "header">
<img class = "duck animated zoomIn" src = "https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
</div>
<!-- Main Header -->
</div>
</body>
The main.css file is shown here
#header {
padding:10px 0 0 0 ;
}
img.duck {
margin-left: auto;
margin-right: auto;
display:block;
}
#page {
margin: 0px auto;
}
I am using the daneden animate.css file (https://daneden.github.io/animate.css/) which has a CSS file (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css) full of animations.
Now, the duck sits in the middle of the page, but doesn't animate. It simply doesn't work.
Any solutions?
Thanks,
Dave.
You've made a mistake here
<link rel-"stylesheet" href="animate.min.css">
It should be = sign after rel
There should be rel="stylesheet";
Fiddle: https://jsfiddle.net/ypdahLtt/1/
Note that... The very first time you load the page you won't find any animation because the Image takes a little time to load. And by the time it loads the animation is over. But after that it will cache the image and you will see the animation just fine.
For this case Use: alt="The Duck" Attribute for your image... Then for first time load you can see the text animated.
<link rel-"stylesheet" href="animate.css">
is not correct. Please add:
<link rel="stylesheet" href="animate.css">
Please replace with rel= after rel-.

(CSS & HTML) CSS doesn't load

I'm having some weird trouble with my css, It doesn't load!?
So I'm using google chrome to preview it on and it always had worked fine,
until I started to ad meta tags. This is the code that I'm using;
body {
margin: 0;
overflow: hidden;
}
mainContainer {
position: absolute;
width: 100%;
height: 600px;
background-color: black;
}
<DOCTYPE! html>
<html>
<head>
<title>Sander™ - Code & Design</title>
<link href="stylehome.css" type="text/css" rel="stylesheet">
<meta name="description" content="Welcome to my website - Sander™ - Code & Design">
<meta name="author" content="Sander™ - Code & Design">
<meta name="keywords" content="Minecraft Server, RPG, Nederlands, 24/7, Beste Minecraft Server, NL server">
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<script src="javaScript.js"></script>
</head>
<body>
<div id="mainContainer">
</div>
</body>
</html>
And I don't know why it's not previewing, I can't find any spell mistakes,
and overall I always had done it this way (only not the meta tags) and I always worked fine. So if somebody can spot something wrong please tell me.
Thanks in Advance!
mainContainer is a type selector that matches all <mainContainer> elements, which you don't have any of and aren't allowed in HTML anyway.
You need an ID selector, which starts with a # character.

First- and last-child in bootstrap/sass not working

I am having trouble using the first- and last-child pseudo classes in my Bootstrap/Sass code. Basically, I am looking to create a whole bunch of blank space above/below the first and last header only. Compass is running, and it's not giving me an error, but when I hard refresh my page in the browser nothing changes. Here is my code, CSS first:
$headings-small-color: black;
#import "bootstrap-compass";
#import "bootstrap-variables";
#import "bootstrap";
h1 {
font-family: 'Almendra SC', serif;
}
h1:first-child, h1:last-child {
margin-top: 200 px;
}
small {
font-family: 'Fanwood text', serif;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cat Graveyard</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="stylesheets/styles.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Fanwood+Text|Almendra+SC' rel='stylesheet' type='text/css'>
</head>
<body>
<img src="Cat_graveyard_cover2.jpg" class="img-responsive" alt="Cover image">
<div class="container-fluid">
<div class="row">
<div class="col-sm-8 col-md-offset-2">
<h1>Here Lieth <small>the poor victims of two notorious whiskered criminals.</small></h1>
<h1>Warning: <small>Graphic images of mangled inanimate objects below.</small></h1>
<h1>Viewer Discretion <small> is advised for sensitive stuffed animals.</small></h1>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I do realize that the more appropriate "Sassy" way would be to use a variable for these pseudo classes (and if you would like to give me an example, that'd be okay with me!), but right now my goal is just to get it to work.
I'm assuming my issue has to do with specificity re: Bootstrap. I'm at a loss of how to fix this, however. In the CSS generated by Compass, the CSS I wrote for the pseudo classes appear last. But, when I "inspect element" in the browser it shows the bootstrap CSS overriding the CSS I wrote.
IDK what to do at this point, any insight would be greatly appreciated!
Just a little typo
h1:first-child, h1:last-child {
margin-top: 200 px;
}
should be
h1:first-child, h1:last-child {
margin-top: 200px;
}