I´m havin issues with blocking the whole height of the screen. I made this navbar and want it to look like it´s "floating" on the page, by adding some margin around ist, so it´s not touching the border of the screen.
Using the height: 100% prop won´t work, bc I the margin won´t get attached at the bottom of the screen -> First it goes all the way down the screen, so that I have to scroll down a bit until the margin gets added + the following content does not appear to the right, but underneath the sidebar -> watch the image.
So I basically want this thing to be in a vertical div element for example, so that the next element will be next to the right of the navbar (right now the text "TEST" still is underneath the navbar).
I´m also using TailwindCSS, those are my classes attached to the wrapping div of the navbar:
import SidebarHeader from './sidebarHeader';
import SidebarMenu from './SidebarMenu';
const Sidebar = () => {
return (
<div
style={{ height: '100vh' }}
className=" m-5 rounded-2xl bg-primary w-80 border-l-4 border-primary transition duration-500 pl-5 py-5">
<SidebarHeader />
<SidebarMenu />
</div>
);
};
export default Sidebar;
App code:
import { BrowserRouter } from 'react-router-dom';
import './assets/tailwind.css';
import Sidebar from './page-components/sidebar';
import Header from './page-components/header';
function App() {
return (
<BrowserRouter>
<Sidebar />
<Header />
</BrowserRouter>
);
}
export default App;
// Header code
//const Header = () => {
// return <div>TEST</div>;
//};
//
//export default Header;
I could do a grid layout I guess, but I don´t know if that´s the smartest solution. There must be a way to have smth like a vertical block element or not?
Glad for any help I can get- cheers!
You can use css calc like height: calc(100vh - XXpx) and then you can add margins to it - sum of bottom and top margins must be equal to XXpx you defined earlier.
Or just wrap the sidebar in a parent component with some padding { height: 100vh; padding: XXpx}; display: flex;, with display flex. Child should have a flex-grow property set to 1.
To put something next to the sidebar, both elements should have display: inline-block; vertical-aligh: top in that case the second solution would not work unless you wrapp the sidebar parent + aside content in a wrapper div with display: flex property.
Related
Okay so my code isn't complex at all. I am watching a tutorial on react styled components and my code got to this point:
const Container = styled.div
`height: 60px;
`
const Wrapper = styled.div`
padding : 10px 20px;
display : flex;
justify-content : space-between;
`
const Left = styled.div`
flex : 1;
`
const Center = styled.div`
flex: 1;
`
const Right = styled.div`
flex : 1;
`
This is the rest of the code:
const Navbar = () => {
return (
<Container>
<Wrapper>
<Left>loremmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</Left>
<Center>Center</Center>
<Right>Right</Right>
</Wrapper>
</Container>
)
}
export default Navbar
So what is basically happening is that i created 3 components on the same line named Left, Center and Right components and i put them inside a Wrapper component. What the flex attribute is meant to do is to give Left, Center and Right components equal space on the browser. Meaning that if there is some long string inside Left (as seen above), the Center and Right components maintain their positions and are not pushed to the side to accommodate Left. Its meant to be working but when i open my browser, this is what i see:
loremmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmCenterRight
meaning that the flex attribute is obviously not working? so anyone knows what i am doing wrong? and btw, the tutorial i am watching just came out in September 2021 so i doubt its because there's a change in the syntax or something, but if it is the case then please point it out.
That is because flex attempts to size according to your proportions by organizing around element boundaries - or words in case of text.
But it is not an absolute rule. Since you're having a gigantic word that cannot be wrapped flex does the best it can do under this condition. Similar to how you would usually not want to break up or hide parts of a large button to respect proportions at all costs. This is called overflow.
Your CSS should work if you have different paragraph sizes with normal words.
One option is to hide overflow or show a scroll bar:
const Left = styled.div`
flex : 1;
overflow: hidden; # also scroll
# text-overflow: ellipsis; # Optional to show a nicer "Loremmmmm..."
`
Alternatively you can permit wrapping on letter boundary - breaking up long words will also make flex proportions achievable:
const Left = styled.div`
flex : 1;
overflow-wrap: anywhere;
`
I want to smoothly resize a DIV with onClick event. But transition doesn't work. onClick just changes the style without animation.
App.js
import React, { useState } from 'react'
import './App.scss';
function App() {
const [clicked, setClicked] = useState(-1)
return (
<div
className={clicked === -1 ? "app" : "app__clicked"}
onClick={() => setClicked(0)}>
div clicked {clicked}
</div>
);
}
export default App;
App.scss
.app {
background-color: red;
transition: width 3s;
&__clicked {
background-color: blue;
width: 100px;
}
}
I think I'm doing something wrong with SCSS.
As can be seen here, your SASS rules will result in two different css classes which you toggle between when assigning a className prop to your div.
The second class is app__clicked and it has no transition property which is why the transition doesn't work. It also doesn't work because, as indicated in the comments, you don't have an initial width on the div, so there is nothing to transition between. By moving the transition property to the app_clicked class and setting width to 100% in the initial state, you will have a working example.
As an advice when doing transitions manually, use a base class which has the transition property set and then toggle the other state by means of other classes (or inline with style) to make sure that the element always has the transition property set. Like this:
<div className={ `app ${clicked === -1 ? "before" : "after"}`}>
div clicked {clicked}
</div>
or
<div className={ "app" } style={{"width": clicked === -1 ? "100%" : "100px"}}>
div clicked {clicked}
</div>
Finally, you might wanna have a look at react-transition-group where transitions with React components is shown. However, you might think that this brings nothing new to the table and that it is too verbose. But it's good to know about and it might have its use cases.
Here is a sandbox with all of the above examples and an example with the CSSTransition component from react-transition-group: Sandbox
I have a react component called SectionHeader which just returns the custom header with props text. This is what is returned from inside the render function :
<div
id='header-text'
style={{
width:'100%',
textAlign:'center',
fontSize:'28px',
lineHeight:'34px'
}}
>
<img src={require('./stroke.svg')} style={{marginRight:'50px'}} />
{this.props.text}
<img src={require('./stroke.svg')} style={{marginLeft:'50px'}} />
</div>
Now the stroke.svg is just 6px in height but longer in width. Since line-height is 34px it is stuck to the bottom of the div header-text somewhat like this:
_________ Header Text __________
I need to add a margin-top of -10px to both img tags so that it is somewhat vertically centered like this:
--------- Header Text ---------
But it doesn't work.
What I have tried :
Wrap all three children inside separate div tags and set display for them as inline-blocks and set display of header-text to block, then add negative margin to the divs containing the img. (Has no effect)
Wrap the prop text inside a div with display:inline-block and add positive margin to it. (This just shifts all 3 children down by 10px)
Wrap both imgs inside divs with display:inline-block and add negative margin to them. (Has no effect)
What is the right way to achieve this?
The easiest way would be to go with flex-box. Here is the CSS: display: flex; align-items: center. You would also have to wrap your text inside an element like a span for instance
<div
id='header-text'
style={{
width:'100%',
textAlign:center,
display: flex,
alignItems: center,
fontSize:'28px',
lineHeight:'34px'
}}
>
<img src={require('./stroke.svg')} style={{marginRight:'50px'}} />
<span>{this.props.text}</span>
<img src={require('./stroke.svg')} style={{marginLeft:'50px'}} />
</div>
I have a React component which opens up a popup on a button click. So the popup has a Scrollbar and there is another component below the popup which contains the confirmation button and cancel button. Currently the popup's scrollbar is overlapping the other component as shown below:
The code for the screen is pasted below:
import styled from "styled-components";
const Wrapper = styled.div`
width: 90vw;
height: 90vh;
`;
const Content = styled.div`
height: fit-content;
padding-bottom: 150px;
`;
return (
<Wrapper>
<Content>{popupToDisplay()}</Content>
</Wrapper>
);
The popupToDisplay() function displays a popup depending on the result of a switch case.
So, now I am trying to move the Scrollbar above the purple line as shown in the image. I am able to reduce the size of the Popup by decreasing the 'height' property of the Wrapper component as shown below:
const Wrapper = styled.div`
width: 90vw;
height: 40vh;
`;
But now the issue while doing so is since the height is getting decreased, the popup is coming down from the top, i.e. there is space at the top as shown below:
I don't want the top of the popup to move down, only the bottom of the popup should move up. I also tried giving 'margin-bottom' property to the Wrappper constant, but its still not working. Can someone please help me with this.
I am having an issue getting a react component to be horizontally resizable. When I added the resize property a class in my component like so:
.side-menu-container {
display: 'inline-block';
width: 15%;
height: 100%;
resize: horizontal;
overflow-y: auto
}
I am only getting a resizable marker on the bottom right corner of the div like so:
Instead, I am looking to have the whole right edge of the div be resizable instead of just the bottom right corner. I know this can be done via javascript (was trying to stay strictly css), but I am not sure now how to go about doing this in my React component.
This is the example of the component where this css class is used:
import './app.less';
export default class App extends Component {
render() {
return (
<div className='main-window-container'>
<div className='side-menu-container'>
<SideMenu />
</div>
</div>
);
}
}