I have JSX which renders a card-like component:
{userResourceGuides && userResourceGuides.map((guide) => (
<div className='UserResourceGuides' key={guide.id}>
<div className='UserResourceGuides__col-1'>
<h2>{guide.file_label}</h2>
<p>From: {guide.service_name}</p>
</div>
<div className='UserResourceGuides__col-2'>
<div>
<a href={guide.file_url} target='_blank' rel='noreferrer'>
<span><AiOutlineLink /></span>
</a>
<p>View</p>
</div>
<div>
<span><AiOutlineDelete /></span>
<p>Delete</p>
</div>
</div>
</div>
))}
UserResourceGuides is the parent class. How can I apply a :not(:last-child) selector to this class?
SCSS
.UserResourceGuides {
display: flex;
justify-content: space-between;
margin: 1rem;
&:not(:last-child) {
border: 1px solid red; // all entries have border styling applied
}
&__col-1 {
margin-left: 2rem;
h2 {
color: $color-blue-subheader;
font-size: 1.8rem;
}
p {
color: black;
font-weight: 300;
font-size: 1.2rem;
}
}
&__col-2 {
display: flex;
align-items: center;
margin-right: 1rem;
...
The current styling I have still renders all entries with the border styling applied, and does not exclude the last-child. Not my desired result. What is my error here?
Related
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 working on a project where there is a checkbox and a label, and they need to be aligned on the same line, with the text vertically aligned center to the checkbox. But the text comes slightly below the checkbox.
import React from "react";
import './checkbox.less';
interface ICheckBoxProps {
label: string;
}
const Checkbox:React.FC<ICheckBoxProps> = ({label}) => (
<div className="flex">
<div>
<input
type="checkbox"
id={label}
className = "container"
/>
<label htmlFor={label} className="label">{label}</label>
</div>
</div>
)
export default Checkbox;
The CSS File :
.App {
font-family: sans-serif;
text-align: center;
position:relative;
display: inline;
}
.container {
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: left;
vertical-align:middle;
display:inline-block;
}
.flex{
display: flex;
align-items: center;
justify-content: flex-start;
vertical-align:middle;
display: inline-flex;
}
.label{
display : inline;
}
Please help
This is because you apply a margin-bottom: 12px; on your <input type="checkbox"/> element (through .container class):
<input
type="checkbox"
id={label}
className = "container"
/>
.container {
margin-bottom: 12px;
You can simply not apply this margin on the <input> only (see label1 in below screenshot), or apply it on the containing div (that wraps both the <input> and the <label>, see label2 in below screenshot):
<div className="flex">
<div class="container2">
<input type="checkbox" id="label2" class="container1" />
<label for="label2" class="label">{label2 margin-bottom on containing div (both input and label)}</label>
</div>
</div>
.container1 {
/*margin-bottom: 12px;*/
}
.container2 {
margin-bottom: 12px;
}
Demo: https://jsfiddle.net/sabr7xw0/2/
I would like to know how to restore to the default style of NavLink as marked in the screenshot below. The color should be white and without the underlines. You would find my code below the screenshot:
Home is the default path that is currently selected. The activeClass property on this is working as it should.
The code:
const NavBar = () => {
return(
<div className="navBar">
<div className="logo">LOGO</div>
<div className="navOptions">
<ul>
<li>
<NavLink exact activeClassName="activeClass" to="/">Home</NavLink>
</li>
<li>
<NavLink exact activeClassName="activeClass" to="/advanceFilter">Advanced Search</NavLink>
</li>
<li>
<NavLink exact activeClassName="activeClass" to="viewAll">View All</NavLink>
</li>
<li>Logout</li>
</ul>
</div>
</div>
);
}
export default NavBar;
The CSS:
.navBar {
display: flex;
justify-content: space-between;
width: 100%;
height: 100%;
color: white;
font-weight: bold;
}
.logo {
display: flex;
flex: 1;
align-items: center;
padding-left: 50px;
}
.navOptions {
display: flex;
justify-content: flex-end;
flex: 1;
height: 100%;
}
//The li items don't have the color and text-decoration properties on them
li {
display: inline;
margin-right: 20px;
cursor: pointer;
height: 100%;
text-decoration: none;
color: white;
}
li:hover {
background-color: gray;
}
ul {
margin-right: 40px;
list-style-type: none;
}
.activeClass {
text-decoration: none;
color: purple;
}
The NavLink component renders an anchor <a /> tag, update the selector in your CSS to also target anchor tags that are children of li elements.
li, li a {
display: inline;
margin-right: 20px;
cursor: pointer;
height: 100%;
text-decoration: none;
color: white;
}
Alternatively you could also specify a "navlink" class and apply default non-active CSS styling there.
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.