How do you do flex-grow behavior without setting styles on parent element?
<div>
<header>
</header>
</div>
div {
display: flex;
justify-content: center;
}
header {
flex-basis: 1440px;
flex-grow: 0.2;
}
So flex-grow 0.2 (20% of margins while staying centered) without the wrapping div. Basically what I am trying to do is create a reusable container class (e.g. 768px, 1440px etc.) with flex-grow: 0.2 that you can add to elements. But this does not work because a parent element with display: flex and justify-content: center is required.
Related
I have a styles.module.scss file and a react component. How can add multiple classNames from the styles to ONE html element?
Below is my code:
/styles/styles.module.scss file
.gridContainer {
display: grid;
gap: 2em;
grid-template-columns: 1fr 25em;
grid-template-rows: auto;
}
.gridItem {
display: flex;
flex-flow: column;
}
.imageWithText {
border: 1px solid #4338ca;
border-radius: 1.6rem;
align-self: start;
}
/pages/infoPage.tsx file
import styles from "../styles/styles.module.scss";
export default function InfoPage({}: PageProps) {
<div className={styles.gridContainer}>
<div className={styles.gridItem}>
...
</div>
{/* I have added TWO style selectors here */}
<div className={(styles.gridItem, styles.imageWithText)}>
...
</div>
</div>
}
When I run this code, the div with TWO style selectors does not work as expected. The second classname={styles.gridItem} does not take the scss styles from the .gridItem selector. This div takes the styling only from the .imageWithText.
EXPECTED BEHAVIOR: I want the styles for both the .gridItem and the .imageWithText to apply to the second div.
I believe I am not writing the multiple selectors in the html element correctly and this has possibly got something to do with the way scss works. Any help would be appreciated.
You can try with backtic character (`), so your code :
<div className={`${styles.gridItem} ${styles.imageWithText}`}>
I am using Accordion in next js. I am following this (react-accessible-accordion) package.
Currently it is getting collapse when main div is getting clicked. What i want to achieve is According should be collapse when click on arrow icon not on main div.
If there is an alternate way of doing this please let me know.
UPDATE
Here is the code sandbox
What i want to achieve is explained here
Thanks!
first I had to modify the styles so the icon is not taking the full width.
Accordion.css
.accordion__icon {
/* margin-left: auto; */
transition: transform 0.6s ease;
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
display: flex;
align-items: center;
border: none;
outline: none;
transition: background-color 0.6s ease;
/* add flex display and justify content */
display: flex;
justify-content: space-between;
}
Add onClick to the main SVG and pass it through the props.
Chevron.js
// pass an onClick props to the main SVG
function Chevron(props) {
return (
<svg
className={props.className}
height={props.height}
width={props.width}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
onClick={props.onClick}
>
<path
fill={props.fill}
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
/>
</svg>
);
}
export default Chevron;
Finally make the props.onClick of the Chevron component handle the onClick event not its Button parent component.
Accordion.js
...
// move the onClick from the button to the Chevron component
return (
<div className="accordion__section">
<button className={`accordion ${setActive}`}>
<p className="accordion__title">{props.title}</p>
<Chevron
onClick={toggleAccordion}
className={`${setRotate}`}
width={10}
fill={"#777"}
/>
</button>
...)
full sandbox link
I have a style like this
//inside page.jsx
export function Page() {
return (
<div css={container}>
<div css={header}>
<div css={horizontal}>
<Menu
mode="horizontal"
>
<Menu.Item>
<Link href="#>
<a>Menu A</a>
</Link>
</Menu.Item>
</Menu >
</div>
</div>
</div>
)
}
//inside styles.js
export const horizontal = css`
display: none;
#media (min-width: 720px) {
display:block;
}
`
export const header= css`
height: 10%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: white;
position: sticky;
top: 0;
z-index: 1;
`
When testing the browser with a size less than 720px its works as intended the content is invisible because of display none, but when the browser size is back to more than 720px it's not working at all (not going back to visible).
if I replace the Menu component with another component the style is working properly (when less than 720px = invisible and when more than 720px = visible). Also, it can work with the Menu component if removing display flex in the header style.
I'm a bit confused about what going on here.
I'm trying to implement or add multiple class in out container when I click a button. But it seems that the styling is not being applied. Below are my code
Layout.module.css
.Content {
padding-left: 240px;
min-height: calc(100vh);
top: 0;
display: block;
position: relative;
padding-top: 80px;
background: #eee;
padding-bottom: 60px;
transition: padding-left 0.2s linear;
}
.Content.collapse {
padding-left: 100px;
display: block;
transition: padding-left 0.2s linear ;
}
Now I added the collapse class in my nav component like so
const layout = (props) => (
<Aux>
<Sidebar collapse={props.collapse} />
<div className={`${classes.Content} ${props.collapse ? 'collapse' : ''}`}>
<TopNavigation toggle={props.toggle}/>
{props.children}
<Footer />
</div>
</Aux>
);
So basically I'm just checking the props if it's collapse or not. If it is then I'll add a text collapse in the class.
Now when I click on a button it sets the state.collapse = true/false. It was able to do it's job. Now it seems that it's not reading my css style. Below is the generated class in my DOM
Notice the class .Content styling was detected. But as you can see here
Layout_Content__2WLOk collapse the div container has a class of collapse. So I was thinking it should read the .Content.collapse selector. Am I missing something here?
When using CSS modules, it creates a unique classname for each class for each instance of the component.
So you need to use the imported classes to have access to the generated classnames, just like you do for the .Content
So
<div className={`${classes.Content} ${props.collapse ? classes.collapse : ''}`}>
You are using a string not the generated hash
this part will not work
${props.collapse ? 'collapse' : ''}
Quick fix
Try not chaining it.
.collapse {
padding-left: 100px;
display: block;
transition: padding-left 0.2s linear ;
}
and add
classes.collapse instead of collapse
${props.collapse ? classes.collapse : ''}
In React you need to use the keyword 'className' instead of 'class'
https://reactjs.org/docs/dom-elements.html#classname
Also if you want to use CSS Modules you need to import your Layout.module.css file like this
import styles from './Layout.module.css';
And you can add CSS selector like this
<div className={styles.Content}></div>
you can study this here https://www.w3schools.com/react/react_css.asp
I have two angularjs components displaying different content placed vertically parallel on a page -
I need to set the height of both components to be be equal. So, I need to increase the height of components B to be equal to height of component A if the height of component A is more than that of component B based on the content that component A is displaying.
Also, whenever the content/height of any of the component increases, I again need to re-adjust the height of other component.
I have tried getting the height of the components on ng-init using heightOffset but get the value as 0 consistently. I have also looked at ResizeObserver, but that has limited browser support at this time.
Any other way to achieve the required behavior?
This can be solved purely with css. You can use a flex-box with align-items: stretch;. Look here for more information.
#container {
display: flex;
align-items: stretch;
}
#left {
display: flex;
flex-grow: 1;
border: 1px solid #999;
min-height: 10px;
}
#right {
display: flex;
flex-grow: 1;
border: 1px solid #999;
min-height: 10px;
}
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
<br>
<button onclick="document.getElementById('left').innerHTML += 'New line<br>'">Add new line to left</button>
<button onclick="document.getElementById('right').innerHTML += 'New line<br>'">Add new line to right</button>