i am trying to create a flexbox with image in one pill and some text in another pill. here's the code i have written in react->
import NavbarTop from "../navbar/navbar";
import "./style.css";
import React from 'react';
function Home() {
return (
<>
<NavbarTop />
<div id="titleTextDiv" className="d-flex">
<div className="p-2 flex-fill">
<img className="titlePic" src="home/titleLogo.png" />
</div>
<div className="p-2 flex-fill">
<span className="titleText">Dumpster<br></br>Dive</span>
</div>
</div>
</>
);
}
export default Home;
style.css
#titleTextDiv {
margin-top: 30px;
text-align: center;
}
.titlePic {
height: 60px;
width: 80px;
}
.titleText {
text-align: justify;
font-size: 25px;
font-weight: bold;
}
but the flexbox isnt working. the text is displayed under the image for some reason. can someone guide me in right direction?
Do you have display: flex; set anywhere in this component? If not, then the css doesn't know to put it into a flexbox. Add the display: flex; to the #titleTextDiv and they should appear next to each other.
#titleTextDiv {
margin-top: 30px;
text-align: center;
display: flex;
}
.titlePic {
height: 60px;
width: 80px;
}
.titleText {
text-align: justify;
font-size: 25px;
font-weight: bold;
}
Blitz
Related
Hello I am new to React Js and Iam not great with CSS and struggling.
I am trying to implement a basic cookie banner design.
Here is the overall code of what I've tried so far
JS:
import React from "react";
import { withWidth } from "#material-ui/core";
import style from './Cookie.module.css';
function Cookies(props) {
return (
<React.Fragment>
<div ref={props.forwardedRef}>
<div className={style.cookies}>
<div className={style.content}>
<p className={style.header}>We use cookies on this site to enhance your user experience</p>
<p className={style.message}> By clicking any link on this page you are giving your consent for us to set cookies. Detailed information, also on the right to withdraw consent, can be found in the website's privacy policy.</p>
<div className={style.click}>
<button className={style.button}>
Yes I agree
</button>
</div>
</div>
</div>
</div>
</React.Fragment >
)
}
export default withWidth()(Cookies);
CSS:
.cookies {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
}
.content {
padding-left: 100px;
padding-top: 5px;
}
.header {
color: #FFFFFF;
font-size: 20px;
}
.message {
color: #FFFFFF;
font-size: 16px;
}
.click {
left: 0;
}
.button {
background-color: #3f7edf;
color: #FFFFFF;
font-size: 13px;
height: 50px;
width: 100px;
border-radius: 5px;
border-color: #3f7edf;
}
I tried adding my custom CSS and implementing a basic UI for cookie banner.
Here is my current Cookie Banner:
CURRENT DESIGN
Here is the design I am trying to accomplish:
MY GAOL
You can wrap your header and message div in another div like this
<div className={style.cookies}>
<div className={style.content}>
<div className={style.main}>
<p className={style.header}>We use cookies on this site to enhance your user experience</p>
<p className={style.message}> By clicking any link on this page you are giving your consent for us to set cookies. Detailed information, also on the right to withdraw consent, can be found in the website's privacy policy.</p>
</div>
<div className={style.click}>
<button className={style.button}>Yes I agree</button>
</div>
</div>
</div>
and add this to css file :
.content {
padding-left: 100px;
padding-top: 5px;
display: flex;
justify-content:center;
align-items:flex-end
}
.main{
width: 55%
}
.click {
width:45%;
margin-right: 5px
left: 0;
}
Try to chagne your content css class to this
.content {
max-width: 1200px;
display: flex;
justify-content: center;
align-items: flex-end;
}
Hi I am trying to create the header of amazon homepage by following a tutorial on youtube but I am unable to get the amazon logo to be displayed smaller on the left side of the browser.
Here is my Header.js code:
import React from 'react';
import "./Header.css";
import SearchIcon from '#mui/icons-material/Search';
import { IconButton } from '#mui/material';
import AddShoppingCartOutlinedIcon from '#mui/icons-material/AddShoppingCartOutlined';
function Header() {
return (
<div className="header">
<img
classname="header__logo"
src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
alt="amazon logo"
/>
<div className="header__nav">
<div className="header__option">
<span className="header__optionLineOne">Deliver to</span>
<span className="header__optionLineTwo">Singapore</span>
</div>
</div>
<div className="header__search">
<button className="header__searchFilter">All</button>
<input className="header__searchInput" type="text"></input>
<IconButton>
<SearchIcon className="header__searchIcon" />
</IconButton>
</div>
<div className="header__nav">
<div className="header__option">
<span className="header__optionLineOne">Hello, sign in</span>
<span className="header__optionLineTwo">Account & Lists</span>
</div>
</div>
<div className="header__nav">
<div className="header__option">
<span className="header__optionLineOne">Returns</span>
<span className="header__optionLineTwo">& Orders</span>
</div>
</div>
<div className="header__nav">
<div className="header__option">
<AddShoppingCartOutlinedIcon className="optionCart" />
<span className="header__optionLineTwo">Cart</span>
</div>
</div>
</div>
)
}
export default Header
Here is my Header.css code:
.header {
height: 60px;
display: flex;
align-items: center;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
}
.header__logo {
width: 100px;
object-fit: contain;
margin: 0 20px;
margin-top: 18px;
}
.header__search {
display: flex;
flex: 1;
align-items: center;
border-radius: 24px;
}
.header__searchInput {
height: 12px;
padding: 10px;
border: none;
width: 100%;
}
.header__searchIcon {
padding: 5px;
height: 22px;
background-color: #cd9042;
}
.header__optionLineOne {
font-size: 10px;
color: white;
}
.header__optionLineTwo {
font-size: 13px;
font-weight: 800;
color: white;
}
.header__optionCart {
display: flex;
align-items: center;
color: white;
}
.header__nav {
display: flex;
justify-content: space-evenly;
}
The rendered site looks like this now:
It is supposed to look like this:
Please let me know what am I doing wrong. Thank you!
it seems you made a mistake at img - class name, so styles are not being applied there.
<img
className="header__logo"
src="http://pngimg.com/uploads/amazon/amazon_PNG11.png"
alt="amazon logo"
/>
change classname to className
Don't use width use height
.header__logo {
height: 50px;
object-fit: contain;
margin: 0 20px;
margin-top: 18px;
}
I am trying to load a dynamic login page with React Modal. Is there a way to make React Modal resize to the size of its child elements?
//App.js
import "./styles/app.scss";
import Layout from './options/Layout'
import Login from './Components/Login'
import { useState } from "react";
import Modal from 'react-modal'
function App() {
const [OpenModal, setOpenModal] = useState(false)
return (
<div id="app" className="App">
<Layout>
<button onClick = {() => setOpenModal(true)}>open modal</button>
<Modal isOpen = {OpenModal}>
<Login/>
</Modal>
</Layout>
</div>
);
}
export default App;
//login.scss
.login {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 280px;
margin: 0 auto;
background-color: #5c8fc2;
border-radius: 30px;
}
.login_top {
display: flex;
align-items: center;
justify-content: center;
margin-top: -40px;
margin-bottom: 20px;
color: whitesmoke;
}
.login_register_container {
border: none;
outline: none;
border-radius: 50%;
}
button {
margin-right: 12px;
margin-top: 30px;
border: none;
border-radius: 4px;
cursor: pointer;
}
I want to dynamically manage the size according to the child element.
I've tried several methods, but without success. How to fit modal's component to child element???
If you use the developer tools you can see that the content grows because they have applied some styles to the modal.
position: absolute;
inset:40
inset is same as
top: 40px;
left: 40px;
right: 40px;
bottom: 40px;
If you want your content to be exactly the same size as your content, you can remove the right and bottom from the styles.
<ReactModal
isOpen={true}
contentLabel="Minimal Modal Example"
className="Modal"
>
<div>
<div style={{ height: '500px' }}>Some content</div>
</div>
<button onClick={() => {}}>Close Modal</button>
</ReactModal>
CSS:
.Modal {
position: absolute;
top: 40px;
left: 40px;
background-color: papayawhip;
}
You will lose equal spacing on all sides of the modal if you do this though.
Here is an example. https://stackblitz.com/edit/react-vxe3cn
I'm having an issue where the grid columns in my React component are showing up on separate rows in Safari 13. Numerous Google searches have come up with nothing and I'm really hoping somebody here can help. Here is the code of my React component (I've left out a bunch of state stuff and functions that aren't relevant):
import React, { useState, useRef } from 'react'
import classNames from 'classnames'
import SlideToggle from 'react-slide-toggle'
import styles from './shoppingListItem.module.css'
const ShoppingListItem = ({
itemId,
listTitle,
canEdit,
description,
quantity,
notes
}) => {
const [currentQuantity, setCurrentQuantity] = useState(quantity)
return(
<div className={styles.root}>
<button className={styles.button} onClick={toggleDetails}>
<span ref={headerRef} className={classNames(styles.header, { [styles.headerEditable]: canEdit })}>
{canEdit &&
<span className={styles.editIcons} ref={iconsRef}>
<div className={styles.icon} ref={deleteRef} onClick={destroyItem}><FontAwesomeIcon className={classNames(styles.fa, styles.destroyIcon
)} icon={faTimes} /></div>
<div className={styles.icon} ref={editRef} onClick={showEditForm}><FontAwesomeIcon className={styles.fa} icon={faEdit} /></div>
</span>}
<h4 className={styles.description}>{description}</h4>
</span>
<span className={styles.quantity}>
{canEdit && <div className={styles.icon} ref={incRef} onClick={incrementQuantity}>
<FontAwesomeIcon className={styles.fa} icon={faAngleUp} />
</div>}
<div className={styles.quantityContent}>
{currentQuantity}
</div>
{canEdit && <div className={styles.icon} ref={decRef} onClick={decrementQuantity}>
<FontAwesomeIcon className={styles.fa} icon={faAngleDown} />
</div>}
</span>
</button>
<SlideToggle toggleEvent={toggleEvent} collapsed>
{({ setCollapsibleElement }) => (
<div className={styles.collapsible} ref={setCollapsibleElement}>
<p className={styles.notes}>{notes || 'No details available'}</p>
</div>
)}
</SlideToggle>
</div>
)
}
The relevant CSS is:
.root {
font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
background-color: var(--main-color);
border-bottom: 1px solid var(--border-color);
}
.root:hover {
background-color: var(--hover-color);
}
.button {
width: 100%;
background: none;
border: none;
border-bottom: 1px solid var(--border-color);
text-align: left;
cursor: pointer;
padding: 0;
display: grid;
grid-template-columns: 2fr 1fr;
}
.fa {
color: var(--title-text-color);
}
.destroyIcon {
margin-right: 8px;
}
.header {
display: inline-block;
padding: 32px 16px;
border-right: 1px solid var(--border-color);
}
.headerEditable {
display: flex;
align-items: flex-start;
}
.editIcons {
display: flex;
flex-direction: row;
margin: auto 12px auto 0;
}
.quantity {
font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
font-size: 1rem;
color: var(--title-text-color);
display: inline-block;
margin: auto 0;
padding: 32px 8px;
display: flex;
justify-content: space-between;
}
.quantityContent {
margin: auto;
}
.icon {
display: inline-block;
padding: 4px;
cursor: pointer;
}
.description {
display: inline-block;
font-family: 'Quattrocento Sans', Arial, Helvetica, sans-serif;
font-size: 1.025rem;
color: var(--title-text-color);
margin: auto 0;
line-height: 1.25;
}
This is what the list item .button element/its children look like in Chrome (i.e., the way it's supposed to look):
This is the way the element looks in Safari (i.e., how it's not supposed to look):
The issue here turned out to be that I was using the button element incorrectly as the slide-toggle trigger and Chrome didn't mind but Safari didn't like it. I had made it a button because of accessibility reasons but I guess that was the wrong way to go. Changing the slide-toggle trigger into a div made it look the same in both Chrome and Safari.
I'm working on some basic styling for my personal project, and for some reason, most of the class selectors in my css file Header.css works, except headerOptionCount. Earlier, some other classes weren't working, but putting Header.css in a styles directory seemed to help, but now it is happening again. When changing margin-left and margin-right of headerOptionCount, nothing changes. When inspecting the element in dev tools, the styles dont show up at all.
Header.css:
.header {
height: 60px;
display: flex;
align-items: center;
background-color: #131921;
position: sticky;
top: 0;
z-index: 100;
}
.headerLogo {
width: 60px;
object-fit: contain;
margin: 0 10px;
}
.headerSearch {
display: flex;
flex: 1;
align-items: center;
border-radius: 24px;
}
.headerSearchInput {
width: 100%;
height: 12px;
padding: 10px;
border: none;
}
.headerSearchIcon {
padding: 5px;
height: 22px !important;
background-color: tomato;
}
.headerOptionLineOne {
font-size: 10px;
}
.headerOptionLineTwo {
font-size: 13px;
font-weight: 800;
}
.headerOptionBasket {
display: flex;
align-items: center;
color: white;
}
.headerOptionCount {
margin-left: 10px;
margin-right: 10px;
}
.headerNav {
display: flex;
justify-content: space-evenly;
}
.headerOption {
display: flex;
flex-direction: column;
margin-left: 10px;
margin-right: 10px;
color: white;
}
Here is my Header component that imports this css file.
Header.js:
import React from "react";
import logo from "../zipshopIcon.png";
import { Search, ShoppingCart } from "#material-ui/icons";
import "../styles/Header.css";
const Header = () => {
return (
<div className="header">
<img className="headerLogo" src={logo} alt="Logo" />
<div className="headerSearch">
<input className="headerSearchInput" type="text" />
{/* Logo */}
<Search className="headerSearchIcon" />
</div>
<div className="headerNav">
<div className="headerOption">
<span className="headerOptionLineOne">Hello Guest</span>
<span className="headerOptionLineTwo">Sign In</span>
</div>
<div className="headerOption">
<span className="headerOptionLineOne">Returns</span>
<span className="headerOptionLineTwo">& Orders</span>
</div>
<div className="headerOption">
<span className="headerOptionLineOne">Your</span>
<span className="headerOptionLineTwo">Prime</span>
</div>
<div className="headerOptionBasket">
<ShoppingCart />
<span className="headerOptionTwo headerBasketCount">0</span>
</div>
</div>
</div>
);
};
export default Header;
The import directory is definitely correct since the other styles work. I've tried using css modules, but it didnt fix anything. Should i try using scss? it just baffles me why class selectors cant even work when imported as css files. Any advice would be appreciated, thanks!
None of your elements in the js have the classname headerOptionCount, you need to give the element you want to have those styles the classname for it to work.