Hello I have to been trying to search for a solution to my problem that is my box-shadow not working, I have seen other question on Stack Overflow that are similar but the all did not solve my problem can I please get some help
Code below is my React Component
import React from "react";
import "../StyleSheet/MainDashBaordWindow.css";
const HomeDashContent = () => {
return (
<div className="DashBoardContent">
<h1 className="DashBoardContent__header">Welcome Back!</h1>
<div className="DashBoarContent__mainWindow">
<div className="mainWindow__cards left-card">
<h2>On Going Shipments</h2>
</div>
<div className="mainWindow__cards right-card">
<h2>Finished Shipments</h2>
</div>
</div>
</div>
);
};
export default HomeDashContent;
Code below is my stylesheet
.DashBoardContent {
flex: 0.8;
display: flex;
flex-direction: column;
align-items: center;
}
.DashBoardContent__header {
font-weight: bolder;
margin-bottom: 2em;
}
.DashBoarContent__mainWindow {
display: flex;
}
.mainWindow__cards {
background-color: #f5f5f5f5;
padding: 4em 2em;
height: 30vh;
transition: transform 0.4s;
box-shadow: 2rem 2.5rem 2rem solid lightslategray;
}
.mainWindow__cards:hover {
transform: scale(1.1);
}
.left-card {
margin-right: 5em;
}
.right-card {
margin-left: 5em;
}
'Solid' value is not available for the box-shadow property. Just try to put a length value like 1px for the spread value(which is the fourth property value for box-shadow) instead of solid and it's gonna work.
Related
I am learning React and I am trying to simulate this design here: https://www.figma.com/file/QG4cOExkdbIbhSfWJhs2gs/Travel-Journal?node-id=2%3A2&t=LV3bLPEMOLMR8ksp-0
I started working on the project and I more or less finished it.
However, I am having trouble
Adding a line break after each trip-div. I thought I could do so on the ".map" cycle but it breaks. How should I approach it?
const trips = data.map(trip=>{
return (<Trip
item={trip}
/> <hr>)
})
For some reason the trip-div is not expanding 100% to the right. It must be something related to max-widht but I can't understand it.
Here is my code: https://scrimba.com/scrim/c3rDMnUL
Trip
export default function Trip(prop){
return(
<div className='trip container'>
<div className="trip-main">
<img src={prop.item.imageUrl} alt="" className="trip-img" />
</div>
<div className="trip-aside">
<p className="trip-location">{prop.item.location} View on Maps</p>
<h2 className="trip-title">{prop.item.location}</h2>
<p className="trip-dates">{prop.item.startDate} - {prop.item.endDate}</p>
<p className="trip-description">{prop.item.description}</p>
</div>
</div>
)
}
App
import { useState } from 'react'
import reactLogo from './assets/react.svg'
import Nav from "./components/Nav"
import Trip from "./components/Trip"
import data from '../src/assets/data'
const trips = data.map(trip=>{
return (<Trip
item={trip}
/>)
})
function App() {
const [count, setCount] = useState(0)
return (
<div className="App">
<Nav/>
{trips}
</div>
)
}
export default App
css
* {box-sizing: border-box;}
#root{
max-width: 600px;
}
body{
margin: 0;
font-family: 'Inter';
background: #FFFFFF;
}
h1,h2,h3,p {
margin:0
}
.container {
padding: 0 40px;
}
nav {
height: 55px;
background: #F55A5A;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2.5rem;
}
.nav-img {
margin-right: 7px;
}
.nav-title{
font-style: normal;
font-weight: 500;
font-size: 14.4608px;
line-height: 18px;
letter-spacing: -0.075em;
color: #FFFFFF;
}
.trip{
display: flex;
gap: 20px;
margin-bottom: 18px;
min-width: 100%;
}
.trip-main{
max-width: 40%;
}
.trip-aside{
max-width: 60%;
}
.trip-img{
width: 125px;
height: 168px;
border-radius: 5px;
}
.trip-location{
font-weight: 400;
font-size: 10.24px;
line-height: 12px;
letter-spacing: 0.17em;
color: #2B283A;
margin-bottom: 7px;
}
.trip-title{
font-weight: 700;
font-size: 25px;
line-height: 30px;
color: #2B283A;
margin-bottom: 7px;
padding-bottom: 10px;
}
.trip-dates{
font-weight: 700;
font-size: 10.24px;
line-height: 12px;
margin-bottom: 10px;
color: #2B283A;
}
.trip-google-maps{
font-weight: 400;
font-size: 10.24px;
line-height: 12px;
/* identical to box height */
text-decoration-line: underline;
color: #918E9B;
}
.trip-description{
font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 10.24px;
line-height: 150%;
/* or 15px */
color: #2B283A;
}
Let's answer your 2nd question first.
For some reason the trip-div is not expanding 100% to the right. It must be something related to max-width but I can't understand it.
The #root div has a max-width of 600px, which is cascading down and is affecting all the child components under it.
Now onto the more complicated one.
Adding a line break after each trip-div. I thought I could do so on the ".map" cycle but it breaks. How should I approach it?
You can only return 1 element from the map but you're trying to return 2 - 1 and 1 .
There's a couple of ways you can solve it.
The more obvious one - wrap them in a <div>
const trips = data.map(trip=>{
return (<div>
<Trip item={trip} />
<hr>
</div>)
})
The better solution is to use a React Fragment
const trips = data.map(trip=>{
return (<React.Fragment>
<Trip item={trip} />
<hr>
</React.Fragment>)
})
This way you don't need to render additional DOM elements.
For the first point:
You can't return adjacent elements like this:
const trips = data.map(trip=>{
return (<Trip
item={trip}
/> <hr>)
})
You need to wrap them in a parent and make container for hr to get the same width, it will be like this:
const trips = data.map(trip=>{
return (
<React.Fragment>
<Trip
item={trip}
/>
<div className="container"><hr /></div>
</React.Fragment>
)
})
For the second point:
You have max-width: 600px on the root, you need to remove that and for the .trip-aside remove the max-width and give it flex-grow: 1; to take the rest of the width of the screen.
So it will be like this:
.trip-aside{
flex-grow: 1;
}
I have a react component called TeamBanner like so
import styles from "./teamBanner.module.css";
import { useNavigate } from "react-router-dom";
import { TeamBannerProps } from "../ProjectTypes.types";
export const TeamBanner = ({
team,
onBannerClick,
showName,
}: TeamBannerProps) => {
let navigate = useNavigate();
const handleOnClick = () => {
navigate(`/${team}`);
onBannerClick();
};
return (
<div
className={`${styles.container} flex theme-light ${
showName ? "" : styles["no-name"]
}`}
title={team}
onClick={handleOnClick}
>
<div>
<img
src={require(`../logos/${team}.svg`)}
alt="logo"
className={`${styles.logo} ${showName ? "" : styles["only-logo"]}`}
/>
</div>
{showName ? team : ""}
</div>
);
};
The teamBanner.module.css file is like so
.container {
margin: 0.25em;
align-items: center;
cursor: pointer;
top: 0;
z-index: 2;
background-color: hsl(var(--color-background));
padding: 0.1em 0.25em;
border-radius: 0.5em;
box-shadow: 0.05rem 0.05rem 0.2rem rgb(0 0 0 / 50%);
font-family: var(--ff-serif);
font-size: var(--fs-200);
}
.logo {
display: inline-block;
vertical-align: middle;
width: 3vmax;
height: 3vmax;
}
.container:hover {
outline: 0.15em solid hsl(240, 90%, 67%);
}
.no-name {
border-radius: 0.25em;
}
.only-logo {
width: 5vmax;
height: 5vmax;
}
I am using it to create a list of team of a page & this works just fine.
However, I want to use it in another place also. In the place, the to now want the .container:hover effect & I want the font properties of the .contaner and width & height properties of the .logo changed.
How can I accomplish this? only changing these items of the module.css? Can any one help? Thanks
I ran into a problem which some styles on my website don't seem working when viewing on a mobile device. Where is my website: https://www.chingpingyang.club/
When I open it with my phone the submit button for the price filter and the price for books are having different styles from when I open the site with my laptop. And seems not only these two are not the same...
Here is the code for the submit button.
input {
all: unset;
font-size: 0.8rem;
width: 50px;
height: 20px;
cursor: pointer;
text-align: center;
color: ${props => props.theme.primWhite};
background-color: ${props => props.theme.interactive};
transition: 0.2s;
&:hover {
background-color: ${props => props.theme.interactiveDark};
}
}
Thank you all so much in advance!
The issue does look to be button, but everything else. The button didn't change for me at all. Try this css below.
#media (max-width: 800px){
.sc-fzoyTs.jZUSDr {
flex-direction: column;
}
.sc-fzoNJl.fvpgSY {
width: calc(100% - 40px);
border: 1px solid #efefef;
padding: 1rem;
margin: 0 auto 3rem;
}
.sc-fzoLsD.fYZyZu,
.sc-fzqBZW.chhgrb {
width: 100%;
}
.gpozzs {
flex-direction: row;
flex-wrap: wrap;
}
.gpozzs label {
width: auto;
margin: 0 1rem 0 0;
}
}
I have figured out the problem. It's caused by the "all: unset" I applied to the button. So just simply remove it and use other ways to remove the default button style.
Here is a fiddle showing my issue:
https://jsfiddle.net/dbfev23h/
In essence, I have a React-Bootstrap <Row> tag and underneath it I am mapping over a list of books that I want rendered as "cards" to the screen. However, because of the size of the content, the heights of the "cards" are all over the place. How do I make the height of the cards to be uniformly the height of the max height of the card in that row?
One thing that may be an issue is that there is only one bootstrap <Row>, is that the issue?
In any case, I've tried the suggestions from stuff like: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height and Bootstrap 4 Cards of same height in columns and Make ReactStrap/Bootstrap4 Cards In Separate Columns Same Height but nothing works.
Here is my actual code:
export class BooksComponent extends React.PureComponent {
render() {
return (
<Row>
this.props.books.map((b, index) => (
<BookComponent
key={index}
title={b.title}
summary={b.summary}
/>
))
</Row>
);
}
}
export class BookComponent extends React.PureComponent {
render() {
return (
<Col md={4}>
<div className="book-item">
<div className="book-title">{this.props.title}</div>
<div className="book-summary">{this.props.summary}</div>
</div>
</Col>
);
}
}
SCSS
.book-item {
margin-bottom: 20px;
padding: 10px;
border: 1px solid gray;
.book-title {
font-size: 1.2rem;
font-weight: bold;
}
.book-summary {
font-size: 0.9rem;
}
&:hover {
cursor: pointer;
box-shadow: 1px 1px 5px gray;
}
}
You need to make your .col-md-4 as flex because then only you will be able to stretch the child elements.
.col-md-4 {
flex: 0 0 33.3333333%;
max-width: 33.3333333%;
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
display: flex;
}
Why my qrcode-big do not hidden, the bellow is my component code:
<script>
export default{
name: 'iheader',
data(){
return {
qrcodeIsHidden:true
}
},
components: {},
methods: {
overShow(){
this.qrcodeIsShow=true
},
outHide(){
this.qrcodeIsShow=false
}
}
}
</script>
<style scoped>
...
.qrcode-big {
width: 110px;
height: 140px;
background-color: #fff;
text-align: center;
position: absolute;
right: 10px;
top: 50px;
z-index: 100;
}
.i-hide {
display: none;
}
.qrcode-big img, span {
margin: 0 auto;
}
.qrcode-big img {
display: block;
width: 50px;
height: 50px;
margin-top: 20px;
margin-bottom: 14px;
}
.box-shadow{
-webkit-box-shadow:0 0 10px rgba(204, 204, 204, .5);
-moz-box-shadow:0 0 10px rgba(204, 204, 204, .5);
box-shadow:0 0 10px rgba(204, 204, 204, .5);
}
.qrcode-big span {
font-size: 12px;
color: #000;
}
.qrcode img {
line-height: 68px;
width: 14px;
height: 14px;
margin: 4px auto -4px auto;
background-color: #c3c3c3;
}
.flex-box {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
</style>
there is the html code:
<template>
......
<div class="right-buttons ">
<div class="qrcode" #mouseover="overShow" #mouseout="outHide">
<img src="../../assets/img/home/little-qrcode.png">
</div>
<div class="login-logout">
<a>登录/注册</a>
</div>
</div>
<div :class="{ 'qrcode-big': true, 'box-shadow': true, 'i-hide':qrcodeIsHidden }">
<img src="../../assets/img/home/little-qrcode.png">
<span>请扫码关注,接收重要通知</span>
</div>
</div>
</div>
</template>
there are some indifferent code upper you can ignore them, the key code are qrcode-big, its display:none; do not work, you can check in the bellow.
from the snapshot you can see the i-header's style:
the display: none; is strikethrough, why it do not work there?
the snapshot is there, why it do not hidden?
the display: none; did not work.
Sounds like it might be a case of css specificity. Some other style rule is overriding the i-hide class.
For a css class that is required to perform an exact task, using !important might be ok. However, it is better to avoid as it can lead to problems later on.
But you can at least quickly test with it:
.i-hide,
div.i-hide,
.container .i-hide{
display: none!important;
}
And if that works, then if you prefer not to use the !important, then remove it and see if the new specificity of the call was sufficient. Or if it still don't work, then try additional specifications of the class hereditary.
NB: you can try these edits rght in the Developer console... so you can quickly see which is the best combination. Just edit the style in the styles window.