score:0
instead of using w-100
and w-50-l
you can use flex-grow-1
on both the inner divs. and similar to what you have done with widths, you can do with order to set the order in both mobile and desktop - see simplified demo:
body,html { height: 100%;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet" />
<div id="react-root" class="h-100" style="height:100%">
<div class="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column">
<div class="flex justify-center items-center bg-purple h-100-l order-1-l order-2 flex-grow-1"></div>
<div class="bg-orange flex flex-column justify-center h-100-l order-2-l order-1 flex-grow-1 pb4-l"></div>
</div>
</div>
now for the react part - you can toggle between flex-grow-1
and flex-grow-0
of the red section on click of the other section - see demo below:
class app extends react.component {
constructor(props) {
super(props);
this.state = {toggle: false};
this.handleclick = this.handleclick.bind(this);
}
handleclick() {
this.setstate(state => ({toggle: !state.toggle}));
}
render() {
return (
<div classname="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column">
<div classname="flex justify-center items-center bg-purple h-100-l order-1-l order-2 flex-grow-1" onclick={this.handleclick}></div>
<div classname={`bg-orange flex flex-column justify-center h-100-l order-2-l order-1 pb4-l ${this.state.toggle ? 'flex-grow-1' : 'flex-grow-0'}`}></div>
</div>
)
}
}
reactdom.render(<app />, document.getelementbyid("react-root"));
html,body{height:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet" />
<div id="react-root" class="h-100"></div>
Source: stackoverflow.com
Related Query
- Responsive layout using Flexbox and Tachyons
- Set height and width for responsive chart using recharts ( Barchart )
- Flexbox layout with two columns on desktop and one column on mobile
- React Bootstrap Cards and CardDeck Components - responsive layout
- Resize High Charts based on grid layout width and height using react
- Make Item go the bottom using Flexbox and Material UI
- How to add a shared layout when using NextJS and Auth0?
- Project layout for single-page app built using Clojurescript and React
- React unmounts and remounts layout components using react-router
- Gatsby.js - Responsive images using gatsby-image and gatsby-transformer-sharp
- How to toggle between 2 responsive headers (mobile and desktop) using React and styled-components considering performance and advertisement displays?
- Vertical align and centre multiple divs using Flexbox
- Convert this Responsive Blog Card Slider made using HTML, CSS and Swiper js into React js with Swiper js
- How implement a proper layout using reactjs and react-router
- How to make Flexbox work with children when using horizontal MUI Collapse Component and TransitionGroup transitions?
- React material container header main and footer it is not aligned using flexbox in the header
- Unable to properly setup navbar in responsive mode using Next JS and Chakra UI
- When using suneditor toolbarContainer property, why is the toolbar layout messed up and the icons huge?
- Complex layout using React and CSS Grid
- What's the difference between "super()" and "super(props)" in React when using es6 classes?
- How do you test for the non-existence of an element using jest and react-testing-library?
- How to style components using makeStyles and still have lifecycle methods in Material UI?
- How to import and export components using React + ES6 + webpack?
- How to repeat an element n times using JSX and Loadsh
- How to render react components by using map and join?
- How to store Configuration file and read it using React
- typesafe select onChange event using reactjs and typescript
- Updating and merging state object using React useState() hook
- Import JavaScript file and call functions using webpack, ES6, ReactJS
- ERROR in Cannot find module 'babel-core'. using react.js, webpack, and express server
More Query from same tag
- Reset state to initial value instead of most updated recent one
- Component for Checkbox Sum in React
- I am new in typescript When I compile my code given No overload matches this call error
- How to display chart (rechart) with data from API in ReactJS
- How to get array item from json, React
- Trying to understand logical operator (a && a === b && a === C) Used in React JS sample
- TypeError: Cannot read property 'id' of undefined react map function
- Here is my edit reducer .It works fine but i want to use object.assign method
- Setting up a working URL with React Router
- Can't display my data in a react-bootstrap-table
- How to allow any value to be entered in input in React-Select
- How to submit the form so that it is displayed in the table?
- Issue iterating state from firebase in react
- Add Edit Button in react-bootstrap-table
- Pass multiple state values to child component in reactjs
- React component class, can't write async method?
- rendering an additional pop up dialog on button click React
- Cannot send event handler to child element through props
- Changing Background Component - REACTJS
- How to build everything into a dist with folder structure by webpack?
- display array data through map in react table
- Searching from State in React
- how to convert an array to a array of objects with additional information in react using map when doing a POST api request
- How to render an editable table with formik 2 and react-table 7?
- Using globally defined script inside the component
- How to handle response from API with TypeScript
- Usercontrol equivalent in html5
- Check if a const of type number is invalid except 0
- Cannot read property 'temp' of undefined
- Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside (Jwt ) Redux