I am unable to insert an image to my sign up page. I have tried inserting it using index.js (HTML codes in React component) and also in the corresponding CSS file. Both not working. Sharing the codes and screenshot below (I have removed irrelevant import codes):
React Component code:
import styles from "./register.css";
return(
<div>
<div id="styledImg">
<img alt="" title="" src="../../src/assets/bocLogo.png"/>
</div>
</div>
);
}
export default Register;
CSS code:
#styledImg {
width: 1110px;
height: 428px;
height: 428px;
position: absolute;
top: 245px;
left: 87px;
}
#styledImg Img {
max-width: 100%;
max-height: 100%;
}
You have to import the image and then use the imported file as src.
it would be something like this.
import logo from '.../../src/assets/bocLogo.png';
and then you will use this logo in src
<img src={logo} alt="Logo" />;
for more information please check This link
You have to upload that image as a ReactComponent.
import { ReactComponent as Logo } from "../../assets/your-image.png";
So that should look like:
import styles from "./register.css";
import { ReactComponent as Image } from "../../assets/your-image.png"
return(
<div>
<div id="styledImg">
<img alt="" title="" src={Image}/>
</div>
</div>
);
}
export default Register;
Related
I have attempted to let 'react-pdf' to change its size by using media query.
I do understand that:
// when I put mouse cursor on <Document>, it displays:
(alias) class Document import Document
<div className="pdf">
<Document file={HomePDF}>
<Page scale={1.5} pageNumber={1} />
</Document>
</div>
is how to adjust the scale in general.
But with media query on css,
#media only screen and (max-width: 600px) {
.home-text {
width: 400px;
}
.pdf {
width: 400px;
}
}
Despite reading the document, I can't get an idea.
https://react-pdf.org/styling#media-queries
The size of pdf displayed on the page does not take effect.
With this error message:
"Compiled with problems:X
ERROR in ./src/pages/Home/Home.js 12:15-32
export 'StyleSheet' (imported as 'StyleSheet') was not found in 'react-pdf/dist/esm/entry.webpack5' (possible exports: Document, Outline, Page, pdfjs)"
I feel like I lost the way. What should I do to change the size of this react-pdf outcome other than the hook? Or is there a way I can do?
// Home.js
import React from "react";
import "./Home.css";
// pdf
import React from "react";
import "./Home.css";
// pdf
import { Document, Page } from "react-pdf/dist/esm/entry.webpack5";
import { StyleSheet } from "#react-pdf/render";
import HomePDF from "../../pdf/resume.pdf";
const styles = StyleSheet.create({
section: {
width: 200,
"#media max-width: 400": {
width: 300,
},
"#media orientation: landscape": {
width: 400,
},
},
});
function Home() {
return (
<>
<div className="home-wrapper">
{/* layer very back */}
<div className="home-content">
<div className="home-text">
{/* profile picture, box */}
<img
className="profile"
src={require("../../images/me-photo.jpg")}
/>
<hr />
{/* pdf */}
<div className="pdf">
<Document file={HomePDF}>
{/* <Page scale={1.5} pageNumber={1} /> */}
<Page size="A4" style={styles.page} />
</Document>
</div>
</div>
<hr />
</div>
</div>
</>
);
}
export default Home;
Sorry for my atrociously bad title on this post.
I would like to achieve something like this as my end goal (my figma mockup):
But I don't know how to achieve this as when I call a component on a "page", it just places the items underneath the navbar like this:
(the text like iPad momentos was just for me testing if the components worked and were called correctly)
I haven't developed all of the components you can see in the mockup (figma), but that shouldn't matter. All I would like to know is with (S)CSS, how you can place different flexboxes or items around each other like in the image below.
Thanks a lot.
My code:
// This file is SRDash (you could call it a page if you want)
// Normal Imports
import React from 'react';
import CardLink from '../components/CardLink';
// Component Imports
import SNavbar from '../components/SNavbar'
import Text from '../components/Text'
// Styling Imports (Global Styles for this Dash)
import './sradmin.scss'
const SrDash = () => {
return (
<div className="mainContent">
<SNavbar />
<Text />
<CardLink text="text here" link="asdfsd" svg="asdfsdf"/>
</div>
);
}
export default SrDash;
It's styling:
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
}
body {
color: blue;
}
Navbar SCSS:
body {
margin: 0
}
.snavbarcontainer {
background-color: black;
min-width: 3.5em;
max-width: 3.5em;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.icons_ul {
text-decoration: none;
list-style-type: none;
padding: 0;
}
.icons_ul li {
margin: 0.5em 0;
}
.icons_ul {
justify-content: center;
}
.toplefticon {
position: absolute;
top: 0;
transform: translateY(50%);
}
Navbar JSX:
import React from 'react';
import './navbar.scss';
// SVG Imports
import topleft from '../assets/toplefticon.svg'
import IDash from '../assets/dashboard.svg'
import IDB from '../assets/database.svg'
import IHand from '../assets/hand.svg'
import ILookupPupils from '../assets/lookup-pupils.svg'
import IMAdmins from '../assets/manage-admins.svg'
import IMUsers from '../assets/manage-users.svg'
const SNavbar = () => {
{/* <img className="testimage" src={topleft} alt="Testing Logo" /> */}
return (
<div className="snavbarcontainer">
<div className="toplefticon">
<a className="test" href="#"><img src={topleft} alt="Testing Logo" /></a>
</div>
<div className="mainIcons">
<ul className="icons_ul">
<li><img src={ILookupPupils} alt="Pupil Lookup" /></li>
<li><img src={IMUsers} alt="Manage Users" /></li>
<li><img src={IHand} alt="Coming Soon" /></li>
<li><img src={IMAdmins} alt="Manage Admins" /></li>
<li><img src={IDash} alt="Dashboard" /></li>
<li><img src={IDB} alt="Dashboard" /></li>
</ul>
</div>
</div>
);
}
export default SNavbar;
Thanks again.
Give mainContent css with property
display:flex;
Hey so after hours of trying to figure it out, the solution was to seperate the navbar and the actual content into seperate divs, like below:
<div className="mainContent">
<SNavbar />
<div className="content">
<Text />
<CardLink text="text here" link="asdfsd" svg="asdfsdf"/>
</div>
</div>
This worked perfectly and after which I had no issues with, and look at the outcome now!
I am working on a website that I want to embed an external HTML to my web page. So I tried the following ways using iframe but it only shows me a blank page with no content
import React from 'react';
function MapVisualization(props) {
return(
<div>
<iframe src="https://voyagerwsh.shinyapps.io/USMapWithCountyPolygon/?_ga=2.183050790.160516643.1596758294-1394498961.1595634152" style="border: none; width: 1\
00%; height: 850px" frameborder="0"></iframe>
</div>
);
}
export default MapVisualization;
I also used another way of implementing innerHTML:
import React from 'react';
function MapVisualization(prop) {
return(
<div dangerouslySetInnerHTML = {{ __html: 'https://voyagerwsh.shinyapps.io/USMapWithCountyPolygon/?_ga=2.183050790.160516643.1596758294-1394498961.1595634152'}} />
);
}
export default MapVisualization;
But the result looks like this:
Does anyone know how to fix this? Thanks!
style was written by wrong way, style must be object
import React from 'react';
function MapVisualization(props) {
return(
<div>
<iframe src="https://voyagerwsh.shinyapps.io/USMapWithCountyPolygon/?_ga=2.183050790.160516643.1596758294-1394498961.1595634152"
style={{ border: 'none',
width: '100%',
height: 850,
frameborder:0}}>
</iframe>
</div>
);
}
export default MapVisualization;
I'm using bulma css in my react application. And I have some additional css in my css module file to set image size.
Additionally I want to use css classes from bulma like my-2 mr-4 in my main wrapping div.
How do I add these classes to the main wrapping div ?
import React from "react";
import logoimg from "../../assets/images/logo.svg";
import classes from "./Logo.module.scss";
const logo = (props) => {
return (
<div className={classes.Logo}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
export default logo;
.Logo a img {
width: 80px;
height: auto;
vertical-align: middle;
}
.Logo a {
text-align: center;
}
.Logo a p {
display: inline-block;
color: #434343;
font-weight: bold;
}
You can pass more classes into className using template literal strings. Here's an example passing in the my-2 and mr-4 you wanted to add:
import React from "react";
import logoimg from "../../assets/images/logo.svg";
import classes from "./Logo.module.scss";
const logo = (props) => {
return (
<div className={`${classes.Logo} my-2 mr-4`}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
export default logo;
Use classnames npm mudule. classnames is conditionally joining classNames together.install this mudule with
npm install classnames --save
or
yarn add classnames
and use for example :
import React from "react";
import cs from "classnames";
import logoimg from "../../assets/images/logo.svg";
import classes from "./Logo.module.scss";
const logo = (props) => {
return (
<div className={cs(classes.Logo, 'my-2', 'mr-4' )}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
export default logo;
also you can use this code without any module
className={`${classes.Logo} my-2 mr-4`}
All that classes.Logo does is return a string corresponding to the css class name for Logo which they have made unique(for scoping purposes), so you can just append it to a pre existing string, either by defining string in a variable or by doing it inline
Eg:
const logo = (props) => {
let logoClass = 'my-2 mr-4 ' + classes.Logo;
return (
<div className={logoClass}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
Or doing it inline like <div className={'my-2 mr-4 ' + classes.Logo}>
P.S would recommend first approach because you can change the string conditionally. Oh, and make sure that the classes are space seperated in the string.
The way you have it implmented you need to install the Bulma npm package. Then in the .scss file you are importing in your React code (in your case the logo functional component file) you need to import whatever Bulma CSS you want to use from the node_modules folder for example your Logo.module.scss could contain something like this:
// Import only what you need from Bulma
#import "../../../node_modules/bulma/sass/utilities/_all.sass";
#import "../../../node_modules/bulma/sass/base/_all.sass";
#import "../../../node_modules/bulma/sass/elements/button.sass";
#import "../../../node_modules/bulma/sass/elements/container.sass";
#import "../../../node_modules/bulma/sass/elements/title.sass";
#import "../../../node_modules/bulma/sass/form/_all.sass";
#import "../../../node_modules/bulma/sass/components/navbar.sass";
#import "../../../node_modules/bulma/sass/layout/hero.sass";
#import "../../../node_modules/bulma/sass/layout/section.sass";
Finally include the class names you want to use by appending them to the logoClasses string and setting them as the value (delimited by a space) for the className attribute in your wrapping div:
const logo = (props) => {
let logoClass = 'my-2 mr-4 ' + classes.Logo;
return (
<div className={logoClass}>
<a href="/">
<img src={logoimg} />
<p>Resume Builder</p>
</a>
</div>
);
};
I have been struggling with this issue for a few weekends now. I'm trying to build a carousel in to my (first) Gatsby website using react-slick however when I view the frontend after running gatsby develop the slider initialised but the markup that gets output is malformed, causing the slider to not work.
I am calling this component on to my index.js page like this, however the rendered output on page looks like this:
<div class="art_list__slider">
<div class="slick-slider slick-initialized">
<div class="slick-list">
<div class="slick-track" style="width: 1348px; opacity: 1; transform: translate3d(0px, 0px, 0px);">
<div aria-hidden="false" class="slick-slide slick-active slick-current" data-index="0" style="outline: none; width: 1348px;" tabindex="-1">
<div>
<div>
<div class="gatsby-image-wrapper" style="position: relative; overflow: hidden; margin: 3rem 0px;">
// image slide here - code removed for space
</div>
</div>
<div>
<div class="gatsby-image-wrapper" style="position: relative; overflow: hidden; margin: 3rem 0px;">
// image slide here - code removed for space
</div>
</div>
<div>
<div class="gatsby-image-wrapper" style="position: relative; overflow: hidden; margin: 3rem 0px;">
// image slide here - code removed for space
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see from the render above, ALL of the individual images are rendering as one slide. How can I fix this?
You need to make sure you import the css as well. Depending on what version of the React Slick you are using you need to include that as well
ie.
npm install slick-carousel
// Import css files
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
As per documentation here
If that is not working for some reason, you can try to reference the css straight from where it is in your node modules file. Alternatively you can try using the cdn solution.
If using React Helmet you can try something like
<Helmet>
<link
rel="stylesheet"
href="href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" "
></link>
</Helmet>
Inside the React Component you are rendering your carousel or inside the Layout.js file if you are using this in many places in your project.
As react-slick expects each child node to be it's own slide, you're probably going to have to render your slider in the same component that you make the staticQuery
import React from "react"
import { StaticQuery, graphql } from "gatsby"
import Img from "gatsby-image"
import Slider from "react-slick"
export default props => (
<StaticQuery
query = {graphql`
query {
allFile(
filter: {
extension: { regex: "/(jpg)|(png)|(jpeg)/" }
relativeDirectory: { eq: "gallery" }
}
) {
edges {
node {
base
childImageSharp {
fluid {
...GatsbyImageSharpFluid_withWebp_tracedSVG
}
}
}
}
}
}
`}
render = { data => (
<Slider {...sliderSettings}>
{data.allFile.edges.slice(0, `${props.limit}`).map(image => (
<div key={image.node.childImageSharp.fluid.src}>
<Img fluid={image.node.childImageSharp.fluid} style={{ margin: '3rem 0' }} />
</div>
))}
</Slider>
) }
/>
)