I have created a React Social Card component using Bootstrap. I want all the cards to be the same size. However, the first card is rendering much larger than the other two. I have tried unsuccessfully to manipulate the CSS to fix this problem but unfortunately, I am a novice with Bootstrap. I have also tried exporting this project into Codesandbox from the Github repository I have it stored in to make it easier to help me find the solution. I am getting this error there: Error importing GitHub repository: Could not find package.json.
Anyway, does anyone know the solution to this problem? Below, I will share a screenshot to illustrate the problem as well as the code for the relevant components and CSS file. Here is the link to the Github repository: https://github.com/jevoncochran/React-Social-Card
Here is the Cards component:
import React, { Component } from "react";
import Card from "./CardUI";
import img1 from "../assets/me-telice-pelo.jpg";
import img2 from "../assets/me-pernambues.jpg";
import img3 from "../assets/me-lucas-walking-pernambues.jpg";
class Cards extends Component {
render() {
return (
<div className="container-fluid d-flex justify-content-center">
<div className="row">
<div className="col-md-4">
<Card imgsrc={img1} title="Convergeance" />
</div>
<div className="col-md-4">
<Card imgsrc={img2} title="Continuation" />
</div>
<div className="col-md-4">
<Card imgsrc={img3} title="Conspiracy" />
</div>
</div>
</div>
);
}
}
export default Cards;
Here is the CSS code:
body {
background: radial-gradient(#e5e5e5, #ffff, #e5e5e5);
}
.card {
width: 20rem;
}
.card:hover {
box-shadow: 5px 10px 20px 1px rgba(0,0,0,0.253) !important;
}
.card-body {
padding: 3rem 0 !important;
}
.card-text {
font-size: 0.9rem;
padding: 0.4rem 1.9rem;
}
.container-fluid .row {
padding: 6rem;
}
.overflow {
overflow: hidden;
}
.card-img-top {
transform: scale(1);
transition: transform 0.5s ease;
}
.card-img-top:hover {
transform: scale(1.4);
}
So, I figured out a solution. I'm not sure it's the best solution out there. But I determined that the problem was that the first image is bigger than the other two images. In my CSS, I just set the maximum height of the all images to the height of the last two (211.938px).
Related
I have a simple lightbox component that uses a material-ui modal and has a style sheet. The component and the css look like this.
Lightbox.tsx
import { Modal } from '#material-ui/core';
import { CloseOutlined } from '#material-ui/icons';
import styles from './Lightbox.module.css';
export default function Lightbox(props: any) {
return (
<Modal
className={styles.modal}
open={props.open}
onClose={props.handleClose}
>
<div className={styles.imageContainer}>
<div className={styles.imageToolbar}>
<CloseOutlined
aria-aria-label={props.closeButtonMessage}
className={styles.toolbarButton}
data-cy="lightbox-close"
fontSize="inherit"
onClick={props.handleClose}
role="button"
/>
</div>
<img src={props.url} className={styles.image} title={props.name} />
</div>
</Modal>
);
}
Lightbox.module.css
.modal {
z-index: 2147483640 !important;
}
.imageContainer {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.image {
max-width: 90%;
max-height: 90%;
}
.imageToolbar {
right: 10px;
top: 10px;
position: absolute;
width: 100%;
font-size: 40px;
}
.toolbarButton {
color: #cccc;
cursor: pointer;
float: right;
}
.toolbarButton:hover {
color: #ffff;
}
The component is rendered inside another component like so:
<Lightbox
closeButtonMessage={formatMessage(closeMessageDescriptor)}
url={url}
name={name}
handleOpen={handleOpen}
handleClose={handleClose}
open={open}
/>
When the application is run, the class names are present on the elements however, the styles are missing.
Elements in debugger console: Rendered elements
Rendered CSS for the elements: Style not rendering for the class
What am I doing wrong?
Please note that I need to use CSS style sheet as mentioned in my example and not inline CSS styles.
Since I am new to react, I have tried looking at other components in the project I am currently working on. This method of using CSS style works for other components. Since I am new to React, any help is appreciated.
I am trying to animate a side menu, but for some reason it just wont work!
I read on a few answers that using a map to map the <li> items could be the issue (and I have tried with just a few items with static text), but that doesnt seem to be the problem.
Additionally, I have also put the generated items into a state, and wrapped the set with an useEffect to prevent retriggering of the map, still doesn't work. Only the transition is not working, the menu is appearing where it must appear, closes itself when I click the menu button, etc.
EDIT: I think it is worth mentioning that while working on it on my development server, when I am updating my css file (its not refreshing the page), when I change some of the styles that make the sidebar move, it moves with animation, so the animation is there, it is just not working when I am clicking the open/close button but it just appears instantly.
P.S. uuid() generates unique key for each element, so that is not an issue either.
export default function SideBar({ names, closeSidebarOnClick, show }) {
const [robots, setRobots] = useState();
useEffect(() => {
setRobots(GenerateNavItems());
}, names);
function GenerateNavItems() {
return names.map((robotName) => {
return (
<li key={uuid()} className={`nav-item`} onClick={() => {closeSidebarOnClick();}}>
{robotName}
</li>
);
});
}
return (
<nav className={`sidebar ${show ? "show-sidebar" : ""}`}>
<ul>{robots}</ul>
</nav>
);
}
.nav-item {
padding-left: 15px;
text-decoration: none;
font-weight: bold;
}
.nav-item:hover {
color: red;
cursor: pointer;
}
.toggle-sidebar-button {
user-select: none;
cursor: pointer;
padding-left: 1.5rem;
padding-top: 0.5rem;
border: none;
background: transparent;
z-index: 300;
/* z-index: 50; */
}
.toggle-sidebar-button:active {
border: none;
}
.toggle-sidebar-button-line {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
.sidebar {
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 200px;
z-index: 200;
background-color: white;
transform: translateX(-100%);
transition: transform 1s ease;
}
.sidebar.show-sidebar {
transform: translateX(0);
}
.sidebar ul {
height: 100%;
list-style: none;
padding-left: 3rem;
padding-top: 3rem;
display: flex;
flex-direction: column;
}
<div id="root">
<div class="content row">
<div class="toggle-sidebar-button">
<div class="toggle-sidebar-button-line"></div>
<div class="toggle-sidebar-button-line"></div>
<div class="toggle-sidebar-button-line"></div>
</div>
<nav class="sidebar ">
<ul>
<li class="nav-item">ROBOT 1</li>
<li class="nav-item">ROBOT 2</li>
</ul>
</nav>
<div class="rendered-robot col">
<div>CHOOSE ROBOT</div>
</div>
</div>
</div>
It's possible that as you are re-rendering the nav component so the transition is not been visible. I suggest you to try this experiment - In closeSidebarOnClickdont don't let this do a re-render and just use the - document.getElementsByTagName('nav')[0].classList.add('show-sidebar');
There is a way to create a React.createRef() or useRef as mentioned here but this again is not to be used frequently.
Well, it may be a bad practice but when it comes to css animations what is the alternative we have? I use these animations via redux all the time :) I think the dom must not be manipulated directly frequently but since this is a nav bar and likely there is only one nav in the entire app, this much shall be ok. Let me know in case you find a typical react way of getting css animations work.
I was having this same issue, and uuid() WAS the problem. Simply using a different type of key solved the transition issue.
I am using mdi-react package and combining it with scss to define some styles but the font-size propert is not working.
Everything else (like color property) is working.
I searched it all over the internet but can't find a solution so finally decided to write my first question on stackoverflow.
And I know I can just use size="8rem" in the icon component itself but I don't want to do that because of some reasons.
Here is my Home.js file:
import React from 'react';
import { Helmet } from 'react-helmet';
import CubeOutlineIcon from 'mdi-react/CubeOutlineIcon';
import { Link } from 'react-router-dom';
const home = () => (
<>
<Helmet><title>Quiz App - Home</title></Helmet>
<div id="home">
<section>
<div>
<CubeOutlineIcon className="cube" />
</div>
<h1>Quiz App</h1>
<div className="play-button-container">
<ul>
<li><Link to="/play/instructions">Play</Link></li>
</ul>
</div>
<div className="auth-container">
<Link to="/login">Login</Link>
<Link to="/register">Register</Link>
</div>
</section>
</div>
</>
);
export default home;
Here is my home.scss file:
#home {
background-image: url('../../assets/img/bg1.jpg');
background-size: cover;
background-position: center;
display: flex;
justify-content: space-around;
height: 100vh;
section {
background-color: rgba($color: #000000, $alpha: 0.7);
padding: $normal $md;
height: 80%;
width: 35%;
}
.cube {
font-size: 8rem; //Not working
color: $orange;
}
}
That's because the .cube is actually assigned to an SVG element and that would require you to use height and width to change it's size. Font ain't gonna work hence.
(I'm assuming that you considered it to be a font-icon or so as the color property got applied to it, but it did so cos fill is set as currentColor, which uses the current text-color.)
According to docs, to change the size of the icon you should use the size property.
Check the following link:
https://github.com/levrik/mdi-react#usage
i have setup react big calendar on two different pages and have applied some styling on it through external CSS
i have tried using important tag in css but it only fix one page and disturb other
First file CSS
.rbc-timeslot-group {
min-height:120px ;
/* border-left: 1px solid #000000 */
}
Second file CSS
.rbc-timeslot-group {
min-height:20px ;
/* border-left: 1px solid #000000 */
}
i want to achieve different CSS on both pages but end up fixing one and disturbing other
Update
This is how I'd approach things using React/JSX:
class Demo extends React.Component {
render() {
const BigCalendar = ({classes}) => (
<div className={`rbc-timeslot-group ${classes}`}></div>
)
return (
<div>
<BigCalendar />
<BigCalendar classes="second" />
<BigCalendar classes="third" />
</div>
)
}
}
ReactDOM.render(<Demo />, document.querySelector("#app"))
And the CSS
.rbc-timeslot-group {
width: 50px;
height: 50px;
background-color: red;
}
.rbc-timeslot-group.second {
background-color: green;
}
.rbc-timeslot-group.third {
background-color: blue;
}
jsFiddle
You need to introduce greater specificity in your CSS. For example, start with a base style that works for the default case and, most importantly, is available to all pages, globally.
.rbc-timeslot-group {
min-height: 120px ;
}
Then, extend from there using another class. This would be declared on another page.
.another-page.rbc-timeslot-group {
min-height: 20px;
}
<div class="rbc-timeslot-group another-page">…</div>
And so on…
.yet-another-page.rbc-timeslot-group {
min-height: 40px;
}
<div class="rbc-timeslot-group yet-another-page">…</div>
Don't know whether its an elegant solution,but was able to resolve my issue by enclosing my component in another div and overriding that div e.g
<div className="first">
<BigCalendar>
</BigCalendar>
</div>
<div className="second">
<BigCalendar>
</BigCalendar>
</div>
in css
I did
.first.rbc-timeslot-group{
min-height:20px !important;
}
.second.rbc-timeslot-group{
min-height:20px !important;
}
I'm building a Navbar with react-bootstrap, but come across the following problem.
When I scroll to the top/right/bottom or keep the page still, everything looks fine.
But when I scroll to the left, there is a white space appear on the right of the content, making navbar exceeding the length of the main body.
Here's my script:
const HomePage = () => {
return (
<div id="homePageTitle">
<h1>Home Page</h1>
</div>
)
}
class Header extends React.Component {
render() {
return (
<div>
<Navbar inverse collapseOnSelect id="navbar">
<Navbar.Header>
<Navbar.Brand>
<p>Brand</p>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1}>Home</NavItem>
<NavItem eventKey={2}>Projects</NavItem>
<NavItem eventKey={3}>Passions</NavItem>
<NavItem eventKey={4}>Contact</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
<HomePage />
</div>
)};
}
Here's my css:
/*---------Header----------*/
.navbar-brand {
min-height: 100px;
}
.navbar.navbar-inverse{
width: 100%;
height: 100px;
margin-bottom: 0;
background-color: lightskyblue;
border: lightskyblue;
border-radius: 0;
position: fixed;
top: 0;
transition: opacity 0.5s;
}
.navbar-right {
margin-top: 30px;
font-size: 18px;
}
/*---------HomePage----------*/
#homePageTitle {
padding-top: 80px;
padding-bottom: 420px;
width: 100%;
text-align: center;
background-color: lightcoral;
margin: 0;
color: #507e9a;
}
Even just a clue as to why this happens is much appreciated! Thanks!
The body has a default margin of 8px. If you want the whitespace there, then add the same
margin: 0 8px;
to the navbar class. Alternatively you could add:
body{
margin: 0;
}
and that would remove the white space altogether. This happens because the #homePageTitle is still in the document flow whereas the navbar being position: fixed is removed from document flow and thus isn't influenced by the margin of the body since it is no longer bounded by it.
You can see this even more by adding:
body{
position:relative;
}
This will set body as the context for the navbar to be fixed in, and thus be influenced by the body's margin yet again. This is probably the preferred way to do it if you want to keep the margin there as you won't need to set margins on any other position: fixed elements.
Without being able to play around with the page itself it's hard to say for sure, but I'm fairly sure this is your issue.
I have found someone with a similar problem and it is solved by disabling horizontal scroll as suggested in this post. This perfectly solves my problem.