I am trying to align Text on the left and button controls on right in display: flex div.
<CustomFieldContainer>
<StyledWellContainer>
<FieldDetails key={id}>
<H4 bold>{label}</H4>
<StyledBody>({capitalizeFirst(type)}) {required && <StyledSpan>REQUIRED</StyledSpan>} </StyledBody>
</FieldDetails>
<DeleteAction {...props} />
</StyledWellContainer>
</CustomFieldContainer>
this to what I got so far.
below is the CSS for all the above reactjs elements.
const CustomFieldContainer = styled.div`
display: flex;
flex-direction: row;
`;
const FieldDetails = styled.div`
display: flex;
flex-direction: column;
border: none;
`;
const DeleteButton = styled(Button)`
flex-basis:33.33%;
margin-right: 0;
margin-left:auto;
display:block;
`;
this makes
what I am trying to achieve is very simple, as below
any help would be tremendous, the basic idea is to main a container to have texts on the left and controls on the right. thank you.
Update:
const StyledWellContainer = styled(WellContainer)`
margin-right: 1rem;
width: 100%;
padding-bottom: 2px;
padding-top: 0;
`;
import styled from 'styled-components';
const WellContainer = styled.div`
display: flex;
flex-direction: column;
padding: 1rem;
border: ${({ theme, borderType }) => (borderType === 'attention' ? theme.color.border.negative : theme.color.border.light)};
border-radius: 12px;
& > * {
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: ${({ theme, disableDivider }) => (disableDivider ? 'none' : theme.color.border.light)};
}
& > :last-child {
padding-bottom: 0;
margin-bottom: 0;
border-bottom: none;
}
`;
export default WellContainer;
Update after changes, advised by adam.
Your StyledWellContainer styles need changing such that:
flex: 1 0;
display: flex;
flex-direction: row;
align-items: flex-start;
Currently it is a column, which is why the button appears below rather than by the side.
By adding row, this fixes that. flex: 1 0 tells it to stretch to fit the parent, and align-items: flex-start; will prevent the content of the button being stretched to height.
You also need to let the button be its base size and not tell it to grow:
const DeleteButton = styled(Button)`
flex: 0 0 auto;
margin-right: 0;
margin-left: auto;
`;
StyledWellContainer needs to be the flex container, not CustomFieldContainer
const StyledWellContainer = styled.div`
align-items: center;
display: flex;
flex-direction: row;
`;
const FieldDetails = styled.div`
display: flex;
flex: 2;
flex-direction: column;
height: 100%;
border: none;
`;
const DeleteButton = styled(Button)`
flex: 1;
margin-right: 0;
margin-left:auto;
display:block;
`;
Related
I have 4 boxes which I'm using them as component , when I'm applying justify-content:center it is centering my items in terms of with , but when I'm trying to use align-items:center , it's not working , and the more confusing thing that I made body color teal and the whole page turned teal but in developer tools it shows that I only have small amount of height, so why the whole page turned to teal ?
import React from 'react';
import "./App.css"
function Myfunc(props){
return(
<div className="holder">
<h1>{props.text}</h1>
</div>
);
}
export default Myfunc;
import React from "react";
import Myfunc from "./CSSexample";
function App(){
return(
<div className="container">
<Myfunc text=""/>
<Myfunc text=""/>
<Myfunc text= ""/>
<Myfunc text=""/>
</div>
);
}
export default App;
*,
*::before,
*::after{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.holder{
background-color: crimson;
width: 10rem;
height: 10rem;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid white;
}
body{
display: flex;
justify-content: center;
align-items: center;
background-color: teal;
}
.container{
display: flex;
justify-content: center;
align-items: center;
color: white;
}
Try setting the width/height of container
.container {
display: flex;
justify-content: center;
align-items: center;
color: white;
height: 100vh;
width: 100vw
}
In my React app, I like to write CSS style within a style tag of a given TSX component. Is there a way to achieve VS Code syntax highlighting for CSS within this context?
Currently, the entire file reflects TSX syntax highlighting, which means the CSS string fragment is all a single color.
I am not using styled-components.
Below is an example of the text I'd like highlighted within the style tag content:
export default function HomeStyle() {
return (
<style>{`
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
`}</style>
);
}
If you use a tagged template literal named css you should get CSS Intellisense & syntax highlighting. eg:
const css = String.raw;
export default function HomeStyle() {
return (
<style>{css`
.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.footer {
width: 100%;
height: 100px;
border-top: 1px solid #eaeaea;
display: flex;
justify-content: center;
align-items: center;
}
`}</style>
);
}
If you use a tagged template literal named html you should get HTML Intellisense and syntax highlighting. eg:
const html = String.raw
const template = html`
<div class="container"></div>
`
In these examples I’m using String.raw as a passthrough. Frameworks may provide their own html and css functions to use for this purpose that add framework specific features.
i have div wrapper with header and container divs and i want to place these in the center of the page.
below is the code,
return (
<Wrapper>
<Header><svg/></Header>
<Content>
<span>first</span>
<span> second</span>
<Actions>
<button> cancel</button>
</Actions>
</Content>
</wrapper>
);
const Wrapper = styled.div`
width: 100vw;
background-color: white;
height: calc(100vh - 20px);
position: relative;
`;
const Content = styled.div`
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
`;
const Actions = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
`;
const Header = styled.div`
position: absolute;
width: 100%;
display: flex;
justify-content: center;
`;
how can i make the header and content divs to be in the center of the page using css. could someone help me with this. thanks.
[image 1[image 2]
Image 1: Normal View,
Image 2: When keyboard is enabled the card jumps up and when I close its normal
Is this behavior normal? or there's some fault in my CSS. I used styled-components for writing the CSS.
CSS
export const Container = styled.section`
height: 92vh;
display: flex;
justify-content: center;
align-items: center;
background: #f5f5f5;
`;
export const Form = styled.form`
display: flex;
flex-direction: column;
align-items: center;
`;
export const Card = styled.section`
width: ${(props) => props.Width || '22rem'};
height: fit-content;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1rem;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(68, 47, 47, 0.5);
background: white;
`;
export const Header = styled.header`
min-height: 7vh;
background: rgb(0, 5, 36);
`
Login.js
import React from 'react';
import {
Card,
Container,
Form,
} from '../Styles/StyledProfile';
import TopHeader from '../Dashboard/Header';
function Login() {
return (
<>
<TopHeader />
<Container>
<Card>
<Form>
.....
</Form>
</Card>
</Container>
</>
)
}
I think this is normal behavior but if you want to prevent login box to be on the top of the header, you could add this CSS:
export const Container = styled.section`
min-height: 92vh;
height: 100%;
`;
export const Card = styled.section`
margin: 40px 0;
`;
I have markup like so:
HTML:
<ListElementRoot>
<ListElementText>
{children}
</ListElementText>
<ListElementDescription>
{description}
</ListElementDescription>
</ListElementRoot>
//platform.web.js
export const ListElementRoot = div(style.root)
export const ListElementIcon = div(style.icon)
export const ListElementText = div(style.text)
export const ListElementDescription = div(style.description)
//CSS
.root {
display: flex;
width: 100%;
height: 56px;
align-items: center;
border-top: 1px solid var(--color-gray2);
padding: 0;
}
.icon {
position: absolute;
width: 28px;
height: 28px;
align-items: center;
padding-left: 18px;
}
.text {
color: #000;
font-size: calc(var(--font-size-body) / 10)rem;
padding-left: 64px;
}
.description {
color: #000;
font-size: calc(var(--font-size-body) / 12.3)rem;
padding-left: 64px;
}
I'm new to flexbox.
How can I make element just under ?
I'm trying to find a solution but it is heavily twisted in flexbox for me (for now). Any ideas?
EDIT:
Without flex-direction: column;
With flex-direction: column;
You need to have a flex-direction property set to column for your flex container (.root).
Here you can find a jsfiddle example.
EDIT:
Change align-items: center to be align-items: flex-start in order to have the elements align to the left