How to position a div inside another div in reactJs? - javascript

I want to put the children div on end of parent div , but positioning is not working. i'm using reactJs, NextJs and styled-components for this code;
reactjs code:
<a href={links[indexImg]} target="_blank" >
<Carousel
image={images[indexImg]}
>
<DescriptionText>
<p>{descriptions[indexImg]}</p>
</DescriptionText>
</Carousel>
</a>
styled-componentes code:
export const DescriptionText = styled.div`
color: white;
background-color: black;
background-position: 20px;
opacity: 0.5;
`;
export const Carousel = styled.div`
position: relative;
border-radius: 50px;
border: solid;
border-width: 3px;
border-color: #C2C2C2;
margin: 0;
height: 100%;
width: 100%;
justify-content: flex-end;
background-size: cover;
background-position: center;
background-image:url(${props => props.image});
`;

If your .inner division has a position of absolute and your .outer one gets position relative, the .inner division will adjust itself inside the .outer one. For example: if you want the .inner one to stick to the bottom of the .outer one you can do this:
.outer {
position: relative
}
.inner {
postion: absolute;
bottom: 0
}

first of all install bootstrap from terminal using the command
npm install react-bootstrap bootstrap
suppose you are working with components like Leftsidebar.js , Rightsidebar.js and Content.js which you have imported to index.js
to do this you have install bootstrap in your react.js
follow the steps
index.js blow
import React from 'react';
import ReactDom from 'react-dom';
import Leftsidebar from './Leftsidebar';
import Rightsidebar from './Rightsidebar';
import Content from './Content';
ReactDom.render(
// outer most div
<div class='row'>
<div class='col-4'>
<Leftsidebar/>
</div>
<div class='col-4'>
<Content/>
</div>
<div class='col-4'>
<Rightsidebar/>
</div>
</div>
,documment.getelementbyId('root');
);
simple we have used the grid system to divide the screen into 4 different part out of 12 secondly the above code is just typed in the text editor .but my aim was to guide you how to show data in different layout or positions using react js and it work because i myself use row column to arrange data in position and it is the easiest method .

Related

How do I re-size Toast UI's React calendar?

I am trying to put two components side by side in my React project. The first is a component I coded myself, and the second is a third-party calendar. (Toast UI's React calendar, to be precise.)
Here is a bare-bones React app I created that shows the problem.
I have tried:
Adding a div with a flex display and the default direction set to "row" around both components:
// App.js
import "./App.css"
<div className="app">
<MyComponent />
<Calendar />
</div>
// App.css
.app {
display: flex;
flex-default: row;
}
Changing from flex to grid, with grid-template-columns set to 1 fr and 3 fr.
// Updated App.css
.app {
display: grid;
grid-template-columns: 1fr 3fr;
}
Styling each component to float: left and float: right, with width: 25% and width: 75%, respectively. With and without a wrapping div.
// App.js
import "./App.css"
{/*<div>*/}
<MyComponent className="list" />
<Calendar className="mycalendar" />
{/*</div>*/}
// App.css
.list {
float: left;
width: 25%;
}
.mycalendar {
float: right;
width: 75%;
}
I'm guessing the problem has to do with the third party calendar. Seems like it just wants to take up the whole page no matter what. I feel like there should be a simple solution though.
Does anyone know how I can resolve this?
This is bootstrap way. remove css if you are trying this.
<div className='container'>
<div className='row'>
<div className='col'>
<MyComponent />
</div>
<div className='col'>
<Calendar />
</div>
</div>
</div>
this will give 50% to MyComponent and 50% to Calendar. you can adjust sizing. once go through bootstrap documentation :)
css way:
.grid-container {
display: grid;
grid-template-columns: auto auto;
}
.grid-item {
text-align: center;
}
<div className="grid-container">
<div className="grid-item"><MyComponent /></div>
<div className="grid-item"><Calendar /></div>
</div>

Two Components Connected to Each-other

Two of my React components are connected together. You might be thinking, if they are both separate components then they shouldn't be connected, right. WRONG.
What I want to do is this. I want to create a footer but the footer is apparently linked to another component. I think this is a react bug but I have decided not to go there in case it's just my fault. I want to change the width of the footer to be max width with the screen but it doesn't work, it changes both of the components width.
.footer {
width: 100%;
}
.footer {
background-color: gray;
border: 1px solid gray;
border-radius: 1px;
height: 100px;
width: 10000px; /*Or 100%*/
}
.otherComponent {
/*For some reason it copies the same attributes as the css one above (there in different files by the way*/
width: 10000px; /*Or 100%*/ /*The one that got copied by react.*/
background-color: gray;
border: 1px solid gray;
border-radius: 1px;
height: 100px;
}
<div class="otherComponent">
</div>
<br />
<p>This is to demonstrate the bug/error that is happening with my program. And what it looks like</p>
<div class="footer">
</div>
Edit:
I am editing this question since I have received comments saying that this question is not understandable, which I understand. The problem is that I want one of the components (which is a code-box for a documentation website that I am working on) to be somehow separated from another component (which is the footer). Every time I apply a style to the footer component the code-box component is having the same styles.
Information
Both of the different styles for the components are in separate folders. They are separated away from each-other using "<br />" tags. The components are placed like this in the App.js file.
{/* Middle of the page */}
<HomeInfo />
{/* Bottom of the page */}
<Footer />
If this edit still doesn't make sense commenting on the post would help.
As there is little to go on here I'll describe one case where this could occur.
Given the following two components and root app.
Component A:
CSS:
.root {
width: 100%;
}
.component-a-heading {
color: blue;
}
Component:
import React from 'react';
import './component-a.css';
const ComponentA = () => {
return (
<div className="root">
<h1 className="component-a-heading">
I am component A
</h1>
</div>
)
}
export default ComponentB;
Component B:
CSS:
.root {
width: 50%;
}
.component-b-heading {
color: red;
}
Component:
import React from 'react';
import './component-b.css';
const ComponentB = () => {
return (
<div className="root">
<h1 className="component-b-heading">
I am component B
</h1>
</div>
)
}
export default ComponentA;
App:
import React from 'react';
import ComponentA from './ComponentA';
import ComponentB from './ComponentB';
const App = () => {
return (
<div>
<ComponentA />
<ComponentB />
</div>
);
}
export default App;
The assumed intended result is that:
ComponentA would be 100% width,
ComponentA heading would be blue,
ComponentB would be 50% width,
ComponentB heading would be red.
The reality is that:
ComponentA would be 50% width,
ComponentA heading would be blue,
ComponentB would be 50% width,
ComponentB heading would be red.
This is caused by the fact that even though the CSS unique to each component is imported per component the resulting CSS is global and effects all components that might use the class names defined within (in the example above .root).
Depending on your bundling process you might end up with a single CSS file that
looks something like this:
.root {
width: 100%;
}
.component-a-heading {
color: blue;
}
.root {
width: 50%;
}
.component-b-heading {
color: red;
}
Or you might end up with the styles inserted into the head of your HTML like this:
<style type="text/css">
.root {
width: 100%;
}
.component-a-heading {
color: blue;
}
</style>
<style>
.root {
width: 50%;
}
.component-b-heading {
color: red;
}
</style>
This is a common mistake for people who come from Angular, where imported CSS is scoped to each component, to React.
One way to get around this is to look at the possibility of using CSS Modules which will allow you to locally scope each imported CSS file (this just makes the CSS class names unique in your resulting bundle).
Another option would be to implement a naming policy to ensure that the class names remain unique between components.

how to get 4 cards in the same row currently i am having 2 cards in a row

i am making a recipe web application but i am not using any inbuilt card feature from material ui or bootstrap. i want to have 4 recipe components in a row instead of two. Also the recipe component has a button named ingredient so whenever i click that button it should display ingredients only for that food recipe but instead it displays recipe for all the recipe components in that row. pls tell me how to fix this.
I am attaching the github repo link to the project :- https://github.com/ankita413/recipe
the ingredient component is defined in ingredient.jsx and its css in recipe.css
and recipe component is in recipe.jsx and its css in recipe.css
Also for the button functionality i am attaching the code right here and the image as well[when i click the ingredient button of first recipe the 2nd ingredient button also opens up but displays nothing i want that only the ingredient button which i click should open up][1]
[1]: https://i.stack.imgur.com/z4DUY.png
code for recipe component containing ingredient button
import React, { useState } from 'react';
import './styles/recipe.css';
import Recipeingredient from './ingredient';
const Recipe = ({title,calories,image,ingredients}) => {
const [show,setShow] = useState(false);
return(
<div className="recipe">
<h2>Search Recipe</h2>
<h3>{title}</h3>
<p>Calories: {Math.floor(calories)}</p>
<img src={image} alt = {title} ></img>
<button onClick={() => setShow(!show)}>Ingredients</button>
{show && <Recipeingredient ingredients = {ingredients}/>}
</div>
);
}
export default Recipe;
in recipe.css
width: 30rem;
margin: 3rem;
display: flex;
flex-direction: column;
background-color: #d3d3d3;
padding: 2rem;
position: relative;
border-radius: 0.5rem;
box-shadow: 2rem 3rem 5rem #aaa;
}
in app.css
.recipes{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
Here you have given a width of 30 rem which approx to 30*16px(since rem is not set to custom) for each card. Which is pretty much bigger for three cards it equals 1440 px and plus the margin of 3 rem which gives an extra 96px for each side for each card 1728px. So there is no way to get 4 cards in a row. That is you have made flex: wrap for recipes. which simply move to the next line
so to fix this reduce the margin between each cards and also reduce the width of the card to something 300px. and margin to 1 rem.
for the 2nd question
I have created codesandbox for you
https://codesandbox.io/s/hungry-glade-pn58b
Actually, the 2nd recipe is not opened. But due to default auto height, the 2nd card is expanding.
for this, you can either define
height:fit-content
.recipe {
width: 30rem;
margin: 3rem;
display: flex;
flex-direction: column;
height: fit-content; //add this
background-color: #d3d3d3;
padding: 2rem;
position: relative;
border-radius: 0.5rem;
box-shadow: 2rem 3rem 5rem #aaa;
}

Reactjs Not able to make a button functional

I am designing a sidebar for my react project and I have the sidebar which is functioning correctly as expected. As you will see that I have also created a button that will basically open the sidebar from left to right and close it from right to left. But I was not able to make the button functional. Help would be appreciated. Thanks in advance.
[This is what I am getting in the output][1]
[1]: https://i.stack.imgur.com/qnOHz.png
This is the file in which I have the sidebar
import React, { Component } from 'react';
import {NavLink} from 'react-router-dom'
import './TableStyle.css'
class HomePage extends Component {
constructor(props){
super(props);
this.state = {
visible: false
}
}
toggleSidebar(){
this.setState.visible = !this.state.visible
}
render() {
return (
<div id = "sidebar">
<div class = "toggle-btn" onClick = {this.toggleSidebar()}>
<span></span>
<span></span>
<span></span>
<ul>
<NavLink to = "/" style={{color: "white"}}>Home</NavLink>
<p></p>
<NavLink to = "/data" style={{color: "white"}}>Show all entries</NavLink>
</ul>
</div>
</div>
This is TableStyle.css
* {
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
#sidebar {
position: fixed;
width: 200px;
height: 100%;
background: rgb(58, 68, 77);
}
/* #sidebar.active{
left: 0px;
} */
#sidebar ul{
color: rgb(240, 243, 245);
list-style: none;
padding: 15px 10px;
border-bottom: 1px solid rgba(100,100,100,0.3);
transition: all 500ms linear;
}
#sidebar.active{
left: 0px;
}
#sidebar.toggle-btn {
position: absolute;
left: 230px;
top: 30px;
}
#sidebar .toggle-btn span {
display: block;
width: 30px;
height: 3px;
background: white;
margin: 5px 0px;
}
Try using the React Hook useState instead, you don't need an internal state in this case, here is what I would've done:
import React, { Component, useState } from 'react';
import { NavLink } from 'react-router-dom'
import './TableStyle.css'
class HomePage extends Component {
const [visible, setIsVisible] = useState(false);
render() {
return (
<div id="sidebar">
<div class="toggle-btn" onClick={setIsVisible(!visible)}>
<span></span>
<span></span>
<span></span>
<ul>
<NavLink to = "/" style={{color: "white"}}>Home</NavLink>
<p></p>
<NavLink to = "/data" style={{color: "white"}}>Show all entries</NavLink>
</ul>
</div>
</div>
In this way, the button will toggle the visible value from false to true and viceversa. This happens on
<div class="toggle-btn" onClick={setIsVisible(!visible)}>
Where onClick toggles the visible value.
And then use the visible value for example in the following:
<div id="sidebar" class={visible ? "open-sidebar-class" : "close-sidebar-class"}>
The "open-sidebar-class" : "close-sidebar-class" is where you would put the class you want to trigger in the sidebar when the menu opens or closes.
Try then doing this example in TableStyle.css to see if it works, if it does, then just type in the css attributes you want instead to trigger in the sidebar whenever you click the button.
...
.open-sidebar-class {
background-color:green;
}
.close-sidebar-class {
background-color:red;
}
...
Your problem is re-rendering HomePage each time you click on the button, so it resets visibility to false as it executes the component script again. I can't tell why you are re-rendering from the snippet (and please reformat to usual indentation and I couldn't get it to run in a sandbox bc unclosed brackets), but you can work around by passing the sidebar visibility as a prop to the HomePage component.

Stacked divs resizing each other

This is probably going to be a long one:
I'm trying to make a chat application (similar to Slack) with Electron, React and Socket.io. My issue is mostly dealing with React and CSS/Sass though. Right now I've got a few bootstrap, but I'm not really using the grid system at all, so that can/may be scrapped.
The structure of the page is as follows: I've got a footer with a resizable textarea. above it I've got a div that will be holding messages. That div has overflow-y set to scroll, that way the scrollbar is only for the messages and doesn't take the entire page's space. I want the div to get shorter as the footer grows with the textarea. Right now though the div just extends under the footer (and the scrollbar along with it). Since the messages fill the div there's nothing to scroll and no thumb (I think that's the correct term) in the scrollbar.
React component (I've only included one li for the sake of brevity, but in my code I've got bunch):
import React from 'react';
import { Button, Image, Media, Panel } from 'react-bootstrap';
export default class Page extends React.Component {
constructor(props) {
super(props);
this.state = props;
}
footerResize() {
// code to resize messages div, or at least get some information about
// the footer's height
}
render() {
return (
<div className="page">
<div className="sidebar">
</div>
<div className="container-fluid">
<div classname="messages">
<ul>
<li className="message>
<Media>
<Media.Left>
<Image src="#" />
</Media.Left>
<Media.Body>
<Media.Heading>
Name
</Media.Heading>
Message content
</Media.Body>
</Media>
<li>
</ul>
</div>
<footer>
<textarea defaultValue="test text" />
</footer>
</div>
</div>
);
}
}
_page.scss (most of this is from the file name _page.scss but a few properties are pulled in from other files here so I'm only typing one file's contents):
$dark-grey: #383838;
$default-font-color: #FFFFFF;
$light-grey: #474747;
$light-light-grey: #908E8F
$sidebar-width: 250px;
body {
color: $default-font-color;
overflow: hidden;
}
ul {
list-style: none;
}
.page {
background-color: $light-grey;
height: 100vh;
.sidebar {
background-color: $light-light-grey;
position: fixed;
height: 100%;
width: $sidebar-width;
.container-fluid {
margin-left: $sidebar-width;
padding-left: 0px;
padding-right: 0px;
.messages {
overflow-y: scroll;
}
footer {
background-color: $main-green;
bottom: 0;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
position: fixed;
width: calc(100% - #{$sidebar-width});
}
}
}
}
I've tried a bunch of different things to get this to work. I've tried a few node modules. I've tried adding event listeners both by adding ref='footer' to the footer and referring to it as this.refs.footer in when adding the event listener and by giving footer and id and using document.getElementById('footer'). The whatever I try I can't get any information about the footer's size in the footerResize. Any help on this would be appreciated. I don't even know if this is something I should be doing with sass properties or whether I need js/React to do this.
You can try out a flexbox based layout.
This for .container-fluid
display: flex;
flex-direction: column;
This for .messages
flex: 1;
Then you remove position: fixed from footer
What this does: it sets the height of .messages to fill its parent's remaining space. So when footer gets bigger, there is less remaining space and .messages will shrink.
Please note that you will need to add vendor prefixes for flexbox depending on your targeted browser support.

Categories

Resources