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>
Related
I'm using flexbox to display several 3-4 widgets in a single vertical column. Each widget contains a table with a dynamic number of fixed-height rows. I'm trying to accomplish the following:
Widgets should auto-size to their content (remaining as small as possible) (flex-basis:auto)
Widgets should not grow (never appear larger than their content) (flex-grow:0)
Widgets should shrink (showing scrollbars) when the parent container is full (flex-shrink:>0)
Widgets should shrink relative to the size of their content (larger widgets should shrink more than smaller widgets) (flex-shrink:items.length)
Unfortunately, I'm having trouble with the last objective. I've tried using the item count as a value for flex-shrink, assuming it would shrink each widget relatively based on the number of items it contained. However, this doesn't work and leads to some strange/unexpected behavior.
Below is a code snippet demonstrating the issue (JSFiddle here: https://jsfiddle.net/87uwfkv3/5/). In this case (4 widgets of varying sizes) I'd like the second widget to show a single row (since it's only a single item), and the other 3 widgets to be (approximately) the same pixel height as one another with scrollbars.
const App = () => (
<div className="root">
<Widget count={60} />
<Widget count={1} />
<Widget count={600} />
<Widget count={40} />
</div>
);
const Widget = ({ count }) => (
<div className="widget" style={{flexShrink: count}}>
{new Array(count).fill(0).map((o,i) => (
<div key={i}>
item {i+1}
</div>
))}
</div>
);
ReactDOM
.createRoot(document.body)
.render(<App />);
html, body {
background: #aaa;
padding: 5px;
}
.root {
background-color: #ccc;
display: flex;
flex-direction: column;
height: 200px;
gap: 5px;
}
.widget {
background-color: #fff;
border: 1px solid black;
flex: 0 1 auto;
overflow-y: auto;
width: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
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 .
I have an array I'm mapping into image sources to form an image gallery. At the moment it maps down one column. I'm unsure how to make it fill the other columns. Any tips would be much appreciated!
This is current output
Aiming to have -
[123]
Code -
<div className="image-grid">
<SRLWrapper options={options}>
{data.home.galleryImage.map((image, index, caption) => (
<div className="image-item" key={`${index}-cl`}>
<img src={`http:XXX${image.url}`} alt="" class="galleryimg"/>
<div class="imgoverlay">
<div class="imgtext">zoomie</div>
</div>
</div>
))
}
</SRLWrapper>
</div>
css -
.image-grid {
display: grid;
grid-template-columns: repeat(3, minmax(100px, 1fr));
column-gap: 2rem;
}
.image-item {
position: relative;
width: 100%;
display: block;
margin-bottom: 2rem;
}
The reason is simple. Your display:grid property is only applied on SRLWrapper component.
You need to set the set the className="image-grid" in the parent element of your SRLWrapper component and then it will work :)
SRLWrapper.js file returns some JSX. What you have right now is only one grid-item for your grid-container. That's why even though you have set your 3-columns for your grid container, there is only one child element SRLWrapper to show.
One Trick: Always always use Developer Console (Ctrl+Shift+I) to debug these scenarios because we get the actual picture there.
In the CSS file
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
change autofit to 3 it might work
I am trying to centrally position a modal whose button is clicked in grid column 2. Can anyone please point me in the right direction. I wouldn't want to hard code any margins ofcourse (responsive).
Right now it (green div) is only showing up / restricted to grid-column 2 as seen below .
display: grid;
grid-template-columns: 1fr 1fr;
height: 100%;
margin: 10px;
class Login extends Component {
state = {
isShowModal: false
};
openModal = () => {
this.setState({ isShowModal: true })
}
render() {
const { isShowModal } = this.state;
return (
<>
<div className="grid-1">
</div>
<div className="grid-2">
{isShowModal && <Modal />}
<div className="add">
<button onClick={() => this.openModal()} type="button">Open modal</button>
</div>
</div>
</>
)
}
}
Hi I think what you are looking for is Width max-content with some padding and margin 0px auto.
margin: 0px auto;
width: max-content;
padding: 10px;
max-width:100%; //for responsive purposes.
Then make a surrounding div and position it fixed. And apply the above styles to the divs inside your surrounding div
What this is doing is making a surrounding div that you can design your stuff inside of that will be centered.
Side Note: If you div is falling underneath other elements just set the z-index to 1.
z-index:1;
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.