With react I have created a very simple card component in a Card.jsx file. The component looks like this.
class Card extends React.Component{
render() {
return (
<div className={style.mainContainer}>
<div className={style.container}>
<div className={style.title}>Hello world</div>
<div className={style.value}></div>
</div>
</div>
);
}
}
export default Card
In one of my web app's page I have added two cards, and I space them out with flex display.
The page render:
function Home() {
return (
<div className={style.container}>
<Card> </Card>
<Card> </Card>
</div>
)
}
Container CSS:
.container {
width: 100vw;
height: 100vh;
margin-top: 10px;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
The only problem with this code is that the margin-top in the css is not applying margin to the div. I encountered this problem several times, leading me to not be able to use nor padding nor margin. Can someone help? Thanks.
Image of components not being affected by margin
I found out that trying to reset React's default padding through the following lines of code:
* {
margin: 0 !important;
padding: 0 !important;
}
was yielding the issue. Nonetheless, how can I reset React's default padding / margin without the styling affecting ALL padding and margins in the app?
It's generally a bad idea to override the style properties for a lot of elements (the * selector). But, it is ok to override the user agent stylesheet for specific tags. For instance, Chrome automatically adds a margin to the <body> tag, so you can override the margin property without using !important in React I think.
After you remove the !important overrides, create a separate container class for your Card component. Setting widths and heights of individual flex items can interfere with the flex container layout, and possibly cause margins to collapse.
Add a padding to container
.container {
padding: 10px;
}
Related
I have a Page component in my React application with the size of A4 page. Inside this Page component I have multiple different nested children. However I came across a problem.
Problem lays when children of one Page component overflow it's height. How can I create another instance of Page component and move children that are overflowing to that component. Also, if possible, for solution to be recursive because n Page component can also have children that are overflowing it's height.
I tried multiple different solutions but all of them were either ineffective or full of bugs.
I have a page component:
const Page = ({ children }) => {
return <div style={{ width: A4.width, height: A4.height }}> {children} </div>
}
And this is in some particular container:
const Container = () => {
return (
<Page>
<div className="child" />
<div className="child" />
{/* This should be moved into another Page instance programmatically */}
<div className="child" />
</Page>
}
}
And this is my CSS:
.child {
position: relative;
width: 100%;
height: 50%;
border: 2px solid black;
}
NOTE: This question does not refer and is not identical as this one: How to make a HTML Page in A4 paper size page(s)?
I need a way to dynamically create containers and append children from previous containers that are overflowing the height of said previous containers.
I have a demo WEB page which have three panel & each have their own title. I want to align all in horizontally. In other words we have title "Amazon cloud Infrastructure", "Amazon cloud Application" and "Essential healthcare powered by ". I want all these should come in all same horizontal line.
I tried to calculate the top of panel 3 title and set the TOP to first and second panel but it doesn't work.
this JavaScript doesn't work. can we do the same thing using CSS?
let topValue = document.querySelector('#rc20p3 .rh02-ttl').getBoundingClientRect().top
console.log(topValue);
document.querySelector('#rc20p2 .rh02w3').style.top = topValue+"px"
document.querySelector('#rc20p1 .rh02w3').style.top = topValue+"px"
You can achieve this using display:flex in css at parent div of those child panels. You do not need javascript.
display:flex puts all the child element in horizontal line, now to align the children's top use align-items:flex-start.
<div style="display:flex;align-items:flex-start;">
<div class="children">child 1</div>
<div class="children">child 2</div>
<div class="children">child 3</div>
<div>
You should look into flexbox. Look at my example bellow.
.parent {
display: flex;
flex-direction: row;
align-items: center;
}
.parent * {
padding: 10px;
}
<div class="parent">
<h1>Hello</h1>
<h2>Stack</h2>
<h3>Overflow</h3>
</div>
As I tried to inspect plunker code, for smaller screen panels are coming in different rows but for large screen they are being displayed in single row only.
enter image description here
So for smaller screen display: flex is being used but flex-direction: column using media query:
#media only screen and (max-width: 974px)
.rc20v1 #rc20panels {
display: flex;
flex-direction: column;
}
if you want them to be displayed in one single row, change direction to row or use important to override css property:
.rc20v1 #rc20panels {
display: flex;
flex-direction: row !important;
}
But, now problem is somehow width for panels is 0. so u can define each panel width let suppose 33.33%:
.rc20v1 #rc20panels .rc20panel {
width: 33.33%
}
Please read about flexbox if you haven't yet. Its a powerful tool in css.
I am making a web page to play a game. It uses two containers (inside a component). They show 2 images but by default they are empty. I apply one style to them: img-container which set the dimentions and color the background (it must be black), but the style doesn't work, although all other styles do.
Clarifications: At start, the div uses 2 classes (img-container and flex-child, which works fine). Also, I am working with Visual Studio Code.
I already try: change class name, reboot the host (closing VS Code an using 'npm start'), using another web browser (chrome and firefox) and change property values for bigger ones. This doesn't work but insert the properties in preexisting CSS classes and call they do.
Component code:
import React, { Component } from 'react';
//Class component
class PPT extends Component {
render() {
return (
<div id = "PPT">
<h3 id="explanation">¿Cómo se juega? </h3>
<div id="container" className="flex-parent">
<div id="player_hand" className="flex-child">
<h2>Jugador</h2>
<div className="img-container"></div>
</div>
<div id="computer_hand" className="flex-child">
<h2>Computadora</h2>
<div className="img-container"></div>
</div>
</div>
</div>
)
}
}
export default PPT;
CSS style:
#PPT {
margin-top: 90px;
margin-bottom: 15px;
}
#img-container {
background-color: #262626;
width: 474px;
height: 266px;
}
You are using #img-container while you must use .img-container because it's a class. I also suggest that you remove that hyphen(-) and use an _ instead to maintain proper naming convention of classes in react and to also respect lint rule as your approach will show a warning in some editors. At the end your class name must look like img_container in jsx and like this .img_conatiner in css.
The wrong part is this section in your JSX:
className="img-container"
since you are using className you have to provide a class in your related css file for it, like below:
.img-container {
background-color: #262626;
width: 474px;
height: 266px;
}
You are selecting your element in a wrong way!
In CSS, # is an ID selector, while . is a class selector. So, to target an element with class name img-container, you should use .image-container, and not #img-container.
I am having issue of large white spaces appearing on the right and the bottom of the web page. When testing for responsiveness of the web page.
I found a similar issues on stackoverflow
White space showing up on right side of page when background image should extend full length of page [closed]
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
Solution in both the posts are same
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
I don't know where exactly to add this in the gatsby, I found a post with a similar issue to mine regarding gatsby How do I style the body / background?. Don't seem to understand what is the solution for this!
Found this post How to add a dynamic class to body tag in Gatsby.js? got some idea about using react-helmet, how exactly I can use it?
Could anyone explain how I can set the html body in gatsby, to avoid this large white space?
Resolution 1366x768 area under the bounder is the whitespace
Resolution 1920x1080 area under the bounder is the whitespace
To add global styles (such as the ones you're talking about), you have multiple ways to follow. The easiest one is to use gatsby-browser.js file. I will provide a solution for your use-case based on my paths, adapt it as you wish.
Create a global.css file in /src/styles/global.css and paste your code:
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
In your gatsby-browser.js file, import your global styles:
import './src/styles/global.css';
Basically, you are adding global styles using CSS files for your project.
There's a huge lack of details in your question but I guess that white part is the footer of the site. Since you don't have any content pushing the footer at the bottom of the page, it appears flexible as it could.
P.S: I've committed How to add a dynamic class to the body tag in Gatsby.js?'s solution since you don't need to add dynamic classes. To make the footer always sticky at the bottom of the browser, you need to make a few adjustments. Wrap your <Layout> with something like:
import React from "react"
import Navbar from "./navbar"
import Footer from "./footer"
import Sidebar from "./sidebar"
import '/yourStyles.css'
const Layout = ({ children }) => {
return (
<section className="site-wrapper">
<main>{children}</main>
<Footer />
</section>
)
}
export default Layout
And add the following CSS (in your /yourStyles.css or in your global styles)
.site-wrapper {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex-grow: 1;
}
Basically, you are telling the wrapper (site-wrapper) to expand until filling the viewport (100vh). Since your main tag (change it to the desired class if needed) can grow free (flex-grow: 1) so your footer will be always at the bottom of the page because it's pushed by the rest of the flexbox column.
I currently have multiple divs each has its own content containing image, button, and text.
I loop through an array of objects to create these divs in react / redux JSX
The divs are showing up underneath each other and I want them to display horizontally instead. Ideally I want three to a page, but as long as its horizontally displaying I'm satisfied.
This is a snippet of my JSX react code. It's inside a class component and it inherited the property houses. Houses is an array of objects.
return (
<div className="rows">
<ul>
{houses.map(house => (
<li key={house.id}>
<div className="row">
<p>Location: {house.location}</p>
<img src={house.imageUrl} height="150" width="320" />
<p>FuelType: {robot.fuelType}</p>
{/* delete button */}
<button
... omitted button code
</button>{" "}
<button
... omitted button code
</button>
</div>
</li>
))}
</ul>
I tried a bunch of things to make my divs go horizontal across the screen. Including:
.rows .row {
display: inline-block;
}
But no matter what I do the divs just show up underneath each other.
What can I do to fix this?
You're applying the property to the parent's parent of the elements you're trying to horizontally span. Your class CSS should be applied to the <ul>.
<div>
<ul className="rows">
Also, flexbox will horizontally span and is far easier to work with and reason
.rows .row {
display: flex;
// flex-wrap: wrap <- if needed
}
Use cloumn count OR grid
one simple way use cloumn count: (for a 3 in a row)
.rows {
display: block;
column-count: 3;
}
.rows .row {
break-inside: avoid;
}
you can also use flex or grid like:
.rows {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
grid-gap: 10px;
max-width: 900px;
}
and control the count of items in line with max-width