Justify-content: space-between isn't spacing the two buttons. They're side-by-side with no margin. How do I make the buttons space-between?
export const Divbuttons = styled.div`
display: 'flex';
flex-direction: 'row';
justify-content: 'space-between';
align-items: 'center';
padding: 0px;
position: 'absolute';
`;
export const Continue = styled.button`
line-height: 16px;
letter-spacing: 1.25px;
padding: 10px 23px;
box-sizing: 'border-box';
position: 'static';
`;
export const Cancel = styled.button`
line-height: 16px;
letter-spacing: 1.25px;
padding: 10px 23px 10px 23px;
box-sizing: 'border-box';
position: 'static';
`;
<Divbuttons>
<Cancel type='button'>Cancel</Cancel>
<Continue type='button'>Save and continue</Continue>
</Divbuttons>
it looks like you need to remove your quotes. e.g. display: flex; instead of display: 'flex';
Related
The left most item is not aligned with the rest of the items. How to i center them correctly?
.activities{
display: flex;
align-items: center;
flex-direction: column;
padding-top: 25px;
background-color: #F3FAEF;
text-align: center;
}
.activities-image{
border-radius: 50%;
width: 150px;
height: 150px;
}
.activities-header{
font-size: 18px;
font-weight: bold;
}
.activities-cols{
display: flex;
align-items: center;
text-align: center;
}
.activity-col{
border: 1px solid red;
width: 330px;
height: 330px;
}
Demo: https://codepen.io/AdanRod133/pen/jOxPBEX
Full-page: https://codepen.io/AdanRod133/full/jOxPBEX
.activity-col {
border: 1px solid red;
width: 330px;
height: 330px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
enter image description here
I want sidebar next to content area, but under logo and one component and above another component and footer.
export default function ImportPage(){
return(
<>
<Component1/>
<Component2/>
<div className="App">
<Sidebar/>
<MainContent/>
</div>
<AnotherComponent/>
</>
)}
in scss file:
.App {
font-family: sans-serif;
height: 100%;
display: flex;
position: relative;
}
.App .main {
padding: 24px;
flex-grow: 1;
display: flex;
}
.sidebar-btn-wrapper {
display: flex;
align-items: center;
justify-content: center;
padding: 20px 24px;
}
.sidebar-btn {
padding: 1px 15px;
border-radius: 40px;
background: rgba(255, 255, 255, 0.05);
color: #adadad;
text-decoration: none;
margin: 0 auto;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
text-overflow: ellipsis;
overflow: hidden;
}
.sidebar-btn span {
margin-left: 10px;
font-size: 13px;
}
and sidebar and main use normal stuff, noting important.
What I do wrong that the sidebar is on component, or on header section, or all page disappear..
UPDATE:
I use this structure of react bootstrap:
<Container>
<Row>
<Col sm={2}>
<Aside/>
</Col>
<Col sm={2}>
</Col>
<Col sm={8}>
<Main/>
</Col>
</Row>
</Container>
but it do not resolve all of problems because, the sidebar is not touch a left side but is more like forward to center; and this solutions is not responsive.
I have a Sidebar which is built using FlexBox column layout as shown below:
.SideBarContainer {
// flex-grow: 1;
width: 100%;
height: 100%;
// display: flex;
// flex-direction: column;
padding: 0.5rem 1rem;
align-items: center;
justify-content: space-evenly;
overflow-y: auto;
overflow-x: hidden;
font-family: $font-family;
}
And looks like:
This is when I comment out flex layout (ideally which I want to keep). But when I enable flex layout as shown below:
.SideBarContainer {
// flex-grow: 1;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
padding: 0.5rem 1rem;
align-items: center;
justify-content: space-evenly;
overflow-y: auto;
overflow-x: hidden;
font-family: $font-family;
}
for some reason it forces the image to be shifted to top and it can't be scrolled to the view:
One way would be to get rid of flexbox and somehow align the items to center but I am more interested in understanding how can I achieve the same with FlexBox and what exactly it is that's pushing the image to cut off when flexbox is applied.
I have created this html code and CSS for you:
.main {
width: calc(100%/3 + 60px);
font-family: 'Jost', sans-serif;
}
.SideBarContainer {
display: flex;
flex-direction: column;
}
.name {
margin: 0;
font-size: 30px;
}
.desig {
color: #bcbcbc;
font-weight: 600;
}
.profile-img {
border-radius: 100%;
height: 100px;
width: 100px;
object-fit: cover;
}
.btn {
background-color: #f5f5f5;
color: #000000;
display: inline-block;
text-align: center;
text-decoration: none;
font-size: 16px;
padding: 4px 20px;
margin: 10px 0;
width: fit-content;
box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
}
.btn.dark {
background-color: #000;
color: #f3ff26;
text-transform: capitalize;
font-weight: 400;
font-size: 18px;
width: calc(100% - 60px);
border-radius: 8px;
box-shadow: 0 0 5px 0 rgb(0 0 0 / 20%);
}
<div class="main">
<div class="SideBarContainer">
<img src="https://via.placeholder.com/150x150" class="profile-img" />
<h6 class="name">Rampy sharma</h6>
<span class="desig">Individual Singer</span>
Edit
<p>It is a long established fact that a reader will be distracted by the readable that it has a more-or-less normal distribution of letters, as opposed to using 'Content here.</p>
portfolio
</div>
</div>
I need to overlap the left part of the Input using styled-components in React. He will be able to write only after the overlap, on the right part.
Codesandbox is here CLICK HERE
Just like this image below:
const TextInput = styled.input`
font-size: 16px;
padding: 10px 10px 10px 10px;
display: block;
border: 2px solid #e3e5e5;
border-radius: 8px;
height: 28px;
width: 100%;
&:focus {
outline: none;
}
`;
I would push the border styling and layout to the Wrapper component. Add a styled label component.
Code
const Wrapper = styled.div`
width: 100%;
position: relative;
margin-bottom: 1rem;
display: flex;
flex-direction: row;
border: 2px solid #e3e5e5;
border-radius: 8px;
overflow: hidden;
`;
const InputLabel = styled.label`
background-color: #e3e5e5;
color: gray;
display: flex;
flex-direction: column;
font-size: 16px;
height: 28px;
justify-content: center;
padding: 10px;
width: auto; // <-- can set to specific width for consistency
`;
const TextInput = styled.input`
border-width: 0;
flex: 1;
font-size: 16px;
height: 28px;
padding: 10px;
outline: none;
`;
const TextError = styled.span`
display: block;
font-size: 12px;
color: #ff0000;
line-height: 14px;
font-weight: bold;
margin-top: 11px;
`;
const Input = ({
label,
name,
type = "text",
value = "",
handleChange = () => {},
error = null,
touched = false
}) => {
return (
<div>
<Wrapper>
<InputLabel htmlFor={name}>{label}</InputLabel>
<TextInput
id={name}
name={name}
type={type}
value={value}
onChange={handleChange}
/>
</Wrapper>
{error && touched && <TextError>{error}</TextError>}
</div>
);
};
I tried to recreate same way as in the picture above. For the solution i added extra class to the Wrapper. Does this approach solve your problem? example
const Overlap = styled.span`
width: min-content;
display: flex;
align-items: center;
padding: 0px 60px 0 20px;
border-radius: 8px 0 0 8px;
background-color: hsl(0, 0%, 90%);
color: hsl(195, 2%, 68%);
font-size: 1.2em;
white-space: nowrap;
`;
In my project I have progressbar and it works fine in all browsers, except IE11 (<11 I do not support).
In all browsers it looks like this:
And in IE11 it looks like this:
I dont know why justify-content: space-between on IE11 works incorrect.
This is my code for statusbar container:
export const ProgressBarContainer = styled.div`
display: flex;
display: -ms-flexbox;
width: 95%;
flex-direction: row;
-ms-flex-direction: row;
justify-content: space-between;
-ms-justify-content: space-between;
margin-left: 20px;
position: relative;
`;
export const ProgressLineStyled = styled.div`
width: 100%;
position: absolute;
left: 0px;
bottom: 11px;
height: 2px;
background: ${({ theme }) => theme.lightText};
z-index: 0;
`;
export const ResultLineStyled = styled(ProgressLineStyled)`
background: #445b9d;
width: auto;
`;
This is my code for statusbar item:
export const ItemText = styled.div`
font-size: 12px;
color: ${({ theme }) => theme.text};
text-transform: uppercase;
font-weight: 600;
position: absolute;
`;
export const ItemDot = styled.div`
width: 24px;
height: 24px;
margin-top: 24px;
display: flex;
display: -ms-flexbox;
align-items: center;
-ms-flex-align: center;
justify-content: center;
-ms-flex-pack: center;
box-sizing: border-box;
border-radius: 50%;
z-index: 1;
background: #ffffff;
border: 2px solid ${({ theme }) => theme.lightText};
& div {
border-radius: 50%;
box-sizing: border-box;
}
`;
export const ProgressItemStyled = styled.div`
display: flex;
display: -ms-flexbox;
flex-direction: column;
-ms-flex-direction: column;
align-items: center;
-ms-flex-align: center;
&#select {
${ItemText} {
color: #445b9d;
}
${ItemDot} {
border: 2px solid #445b9d;
& div {
width: 6px;
height: 6px;
border: 1px solid #445b9d;
background: #445b9d;
}
}
}
&#completed {
${ItemDot} {
background: #445b9d;
border-color: #445b9d;
& div {
width: 6px;
height: 6px;
border: none;
background: #ffffff;
}
}
}
`;
just replace the -ms-flex-pack: space-between; with -ms-flex-pack: justify;
I usually use these mixins:
-webkit-justify-content: space-between;
-moz-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
-ms-flex-pack: space-between;
Also, maybe the problem is with your parent, check out this, maybe it helps.