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.
Related
Hello I am trying to make a hamburger menu bar. But I can't seem to position the circle right icon to the right. When I try to add a padding-right it won't let me.
My JS:
{
SidebarData.map((item, index) => {
return (
<div >
<li key={index} className={item.cName}>
<Link to={item.path}>
{item.icon}
<span>{item.title}</span>
<span className={"roundright"}>
<PageRight />
</span>
</Link>
</li>
</div>
);
})
}
My CSS:
.nav-text {
display: flex;
justify-content: center;
align-items: center;
padding: 8px 16px 8px 16px;
list-style: none;
height: 50px;
text-align: center;
}
.nav-text a {
text-decoration: none;
color: #FFFFFF;
border: 1px solid white;
font-size: 14px;
width: 90%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.roundright {
font-size: 14px;
color: #E7135D;
font-size: 14px;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
Here is what I currently have:
Desired result:
Here is my CSS:
I would recommend using a flexbox and the justify-content for this case. You can view more on the space-between property here. Note that my answer only contains new classes and not your previously written classes.
Example HTML:
<div >
<Link to={item.path}>
<li key={index} className={`${item.cName} item-container`}>
{item.icon}
<span>{item.title}</span>
<span className={"roundright"}>
<PageRight />
</span>
</li>
</Link>
</div>
Example CSS:
.item-container {
display: flex;
justify-content: space-between;
align-items: center;
}
I don't know how to vertical align images in React Slick slider in mobile version. Always images that are 16:9 (vertical images) are on top on the div, but I would like to have them in the middle of the div (just how the arrows are positioned).
jsx file:
return (
<div className="galerija-container">
<div className="grupa">
<h2>Lavanda</h2>
<Slider
{...settings}
style={{
display: "flex",
}}
>
{lavanda.map((item, index) => (
<div key={index} className="slike">
<img src={item.slika} alt="" />
</div>
))}
</Slider>
</div>
</div>
);
scss file:
.galerija-container {
width: 95%;
margin: 20px auto;
& .grupa {
background-color: var(--lightorange);
border-radius: 15px;
padding: 10px;
height: 450px;
margin: 40px 0;
& h2 {
text-align: center;
font-size: 2.5rem;
}
& img {
max-height: 350px;
max-width: 100%;
padding: 5px;
border-radius: 30px;
margin: 0 auto;
}
}
& .arrow {
font-size: 50px;
padding: 5px;
cursor: pointer;
color: var(--lightgrey);
height: 350px;
display: flex;
align-items: center;
}
}
I was trying to make the homepage layout for a project that I'm doing with the help of a course and they SCSS to style their Reactjs. But the layout isn't the same to the one in the course even after using the exact same styling. So, please help me out.
Thanks in advance.
Expected :
Result :
Here's the styling :
.homepage {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 80px;
}
.directory-menu {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu-item {
min-width: 30%;
height: 240px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 0 7.5px 15px;
&:first-child {
margin-right: 7.5px;
}
&:last-child {
margin-left: 7.5px;
}
.content {
height: 90px;
padding: 0 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid black;
.title {
font-weight: bold;
margin-bottom: 6px;
font-size: 22px;
color: #4a4a4a;
}
.subtitle {
font-weight: lighter;
font-size: 16px;
}
}
}
Here's the code :
<div className='homepage'>
<div className='directory-menu'>
<div className= 'menu-item'>
<div className='content'>
<h1 className='title'>HATS</h1>
<span className='subtitle'>SHOP NOW</span>
</div>
</div>
</div>
.
.
.
.
</div>
What you have works. It's a dynamic layout so your viewing width effects it; resize the browser and you'll see:
https://codesandbox.io/s/nifty-kalam-1bx9t?file=/src/styles.scss
I need to align text near an icon to middle.
See the admin word near the user icon in this sandbox:
https://codesandbox.io/s/fragrant-morning-267l5
I have this css, but it's not taking affect:
.HeaderToolbar {
background-color: black;
color: white;
fill: white;
width: 100%;
margin: 0 auto;
align-items: baseline;
vertical-align: middle;
/*white-space: nowrap;*/
}
I would suggest you to use elements like header, nav and div for layout along with flexbox instead of going for table to layout your header.
Please check following code. It shows basic mark up for header component with navigation and logo.
header {
width: 100vw;
height: 54px;
}
.header {
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
padding: 0 8px;
}
.logo {
flex: 1;
}
nav {
flex: 2;
display: flex;
justify-content: flex-end;
}
button {
padding: 8px 12px;
color: white;
border: none;
cursor: pointer;
}
.ghost {
color: black;
background: transparent;
}
<header>
<div class='header'>
<div class="logo">
<h2>Logo</h2>
</div>
<nav>
<button>Projects</button>
<button>Projects</button>
<button class='ghost'>Admin 😳</button>
<button>Profile</button>
</nav>
</div>
</header>
You need to add a class to your element and then add a css to your class:
display: flex;
justify-content: flex-start;
align-items: center;
I have three elements in my HTML that I would like to arrange vertically (stacked if you will), regardless of size (which is dynamic for some of the elements).
I have tried using flexbox and the usual advice on the net but it does not seem to work.
.intro {
font-family: monospace;
font-size: 24px;
color: #455934;
padding-top: 25px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;
align-self: flex-start;
}
.recipe {
background-color: rgba(255, 255, 255, .6);
margin: auto;
min-height: 400px;
height: auto !important;
height: 400px;
width: 75%;
box-sizing: border-box;
display: flex;
display: -ms-flexbox;
display: -webkit-flex;
flex-direction: column;
-webkit-flex-direction: column;
align-items: flex-start;
-webkit-align-items: flex-start;
justify-content: left;
}
.recipe a:link,
a:visited,
a:active {
color: #cda44c;
font-family: monospace;
font-size: 18px;
padding-top: 5px;
padding-right: 50px;
padding-bottom: 5px;
padding-left: 50px;
align-self: flex-start;
}
.recipe a:hover {
color: white;
align-self: flex-start;
}
.recipe_image {
padding-top: 5px;
}
<div class="recipe">
<p class="intro">
{{label}}
</p>
<a href='test.html'>
Rezept von {{source}}
</a>
<br>
<a href='test.html'>
<img src='C:/users/fabian.nguyen/03 - Customer Analytics/Bots/Flask Test/static/rock.gif' alt="TEST" class="recipe_image">
</a>
</div>
You can see the resulting HTML (rendered via Flask but that is not the issue) here:
https://nachhaltig-kochen.herokuapp.com/getrecipe
Instead of stacking into a column (1. Label 2. Text-Link 3. Image-Link) they arrange in a row of equally sized divs.
EDIT:
Thanks to Pete, the solution is simply to remove any flex box reference as the elements should (and do) naturally stack vertically without any other style.