I have seen that similar posts already exist... the solutions posted there did not work for me tho. Sorry for asking again.
In my gatsby project I want a solid border and border-radius on an image. On Chrome it looks as expected but on mobile devices and Safari the image just does not get the rounded corners and overflows the border. How can I fix this?
.imgContainer {
border: solid 1px #0784b5;
border-radius: 10px;
overflow: hidden;
}
.img {
position: relative;
border-radius: 10px;
top: 0;
left: 0;
}
<div className={styles.imgContainer}>
<GatsbyImage className={styles.img}
image={data.file.childImageSharp.gatsbyImageData}
alt="portrait"
/>
</div>
Thanks in advance!!
The gatsby-image package is now deprecated
You can use: https://www.gatsbyjs.com/plugins/gatsby-plugin-image/
Ex:
import { StaticImage } from 'gatsby-plugin-image';
const IndexPage = () => (
<StaticImage
src="../images/test_image.jpg"
alt=""
imgStyle={{ borderRadius: '20%' }}
/>
);
Related
I have written a simple navbar that has a scroll animation.
Example:
<div className={"nav active"}>
Here CSS on active is not working. Even if I write .active or nav.active in my CSS file, I have no result. In my code I have used a on scroll event listener so when I scroll down, the navbar appears black and when I go on the navbar, it disappears. But the problem is that CSS is working in nav, but not working in
active and as a result black color in active is not appearing.
const [show , handleshow]= useState(false);
const transitionNavBar = () => {
if (window.scroll > 100){
handleshow(true);
}else{
handleshow(false);
}
};
useEffect(() => {
window.addEventListener("scroll",transitionNavBar);
return () => window.removeEventListener("scroll", transitionNavBar);
}, []);
return (
<div className={`nav ${show && "active"}`}>
<div className="nav_contents">
<img className='nav_logo'
src="http://assets.stickpng.com/images/580b57fcd9996e24bc43c529.png"
alt=""
/>
<img className='nav_avatar' src="https://i.pinimg.com/originals/0d/dc/ca/0ddccae723d85a703b798a5e682c23c1.png"
alt=""
/>
</div>
</div>
)
}
.nav{
position: fixed;
top: 0;
padding: 20px;
width: 100%;
height: 30px;
z-index: 1;
}
.nav.active{
background-color: #111;
}
.nav_contents{
display: flex;
justify-content: space-between;
}
.nav_logo{
position: fixed;
top: 10px;
left: 0%;
width: 80px;
object-fit: contain;
padding-left: 20px;
cursor: pointer;
}
.nav_avatar{
position: fixed;
cursor: pointer;
right: 20px;
width: 30px;
height: 30px;
}
Instead of this
<div className={`nav ${show && "active"}`}>
Try this:
<div className={`nav ${show ? "active":""}`}>
I think you need to write your CSS in a seperate file, if you are not using styled components for example.
Write your CSS classes inside a seperate file and then import the css file inside your JSX/JS.
For example:
import "./navbar.css"
Edit: Sorry, just reread and noticed your nav is working.
As the other posts suggest, you would probably need to use a conditional operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
I don't know what was a problem but i uninstall ns install vs code again my issue was solved I really don't know how it worked but it worked.
I am trying to animate a side menu, but for some reason it just wont work!
I read on a few answers that using a map to map the <li> items could be the issue (and I have tried with just a few items with static text), but that doesnt seem to be the problem.
Additionally, I have also put the generated items into a state, and wrapped the set with an useEffect to prevent retriggering of the map, still doesn't work. Only the transition is not working, the menu is appearing where it must appear, closes itself when I click the menu button, etc.
EDIT: I think it is worth mentioning that while working on it on my development server, when I am updating my css file (its not refreshing the page), when I change some of the styles that make the sidebar move, it moves with animation, so the animation is there, it is just not working when I am clicking the open/close button but it just appears instantly.
P.S. uuid() generates unique key for each element, so that is not an issue either.
export default function SideBar({ names, closeSidebarOnClick, show }) {
const [robots, setRobots] = useState();
useEffect(() => {
setRobots(GenerateNavItems());
}, names);
function GenerateNavItems() {
return names.map((robotName) => {
return (
<li key={uuid()} className={`nav-item`} onClick={() => {closeSidebarOnClick();}}>
{robotName}
</li>
);
});
}
return (
<nav className={`sidebar ${show ? "show-sidebar" : ""}`}>
<ul>{robots}</ul>
</nav>
);
}
.nav-item {
padding-left: 15px;
text-decoration: none;
font-weight: bold;
}
.nav-item:hover {
color: red;
cursor: pointer;
}
.toggle-sidebar-button {
user-select: none;
cursor: pointer;
padding-left: 1.5rem;
padding-top: 0.5rem;
border: none;
background: transparent;
z-index: 300;
/* z-index: 50; */
}
.toggle-sidebar-button:active {
border: none;
}
.toggle-sidebar-button-line {
width: 35px;
height: 5px;
background-color: black;
margin: 6px 0;
}
.sidebar {
height: 100%;
position: fixed;
top: 0;
left: 0;
width: 200px;
z-index: 200;
background-color: white;
transform: translateX(-100%);
transition: transform 1s ease;
}
.sidebar.show-sidebar {
transform: translateX(0);
}
.sidebar ul {
height: 100%;
list-style: none;
padding-left: 3rem;
padding-top: 3rem;
display: flex;
flex-direction: column;
}
<div id="root">
<div class="content row">
<div class="toggle-sidebar-button">
<div class="toggle-sidebar-button-line"></div>
<div class="toggle-sidebar-button-line"></div>
<div class="toggle-sidebar-button-line"></div>
</div>
<nav class="sidebar ">
<ul>
<li class="nav-item">ROBOT 1</li>
<li class="nav-item">ROBOT 2</li>
</ul>
</nav>
<div class="rendered-robot col">
<div>CHOOSE ROBOT</div>
</div>
</div>
</div>
It's possible that as you are re-rendering the nav component so the transition is not been visible. I suggest you to try this experiment - In closeSidebarOnClickdont don't let this do a re-render and just use the - document.getElementsByTagName('nav')[0].classList.add('show-sidebar');
There is a way to create a React.createRef() or useRef as mentioned here but this again is not to be used frequently.
Well, it may be a bad practice but when it comes to css animations what is the alternative we have? I use these animations via redux all the time :) I think the dom must not be manipulated directly frequently but since this is a nav bar and likely there is only one nav in the entire app, this much shall be ok. Let me know in case you find a typical react way of getting css animations work.
I was having this same issue, and uuid() WAS the problem. Simply using a different type of key solved the transition issue.
I'm working on a project, and would like to have a side panel in a fixed position on the screen (just below the navbar) until it reaches the top of the footer so the two don't overlap. I've found some suggestions using Jquery, but this project is in react and I am using the materialize css framework. Here is the code I am working with in App.js...
<div className="App">
<Navbar />
<div className="row" id="landingcontainer">
<div className="col s3" id="sidebar">
<Sidebar />
</div>
</div>
<Footer />
</div>
And here is what my css looks like:
#landingcontainer {
height: 120vh;
position: relative;
}
#sidebar {
position: fixed;
height: 85vh;
background-color: plum;
color: white;
top: 12vh;
right: 5px;
}
I've also made a sandbox for this: https://codesandbox.io/s/dawn-snow-3cmdv
Right now the when the user scrolls all the way to the bottom, the sidebar overlaps the footer.
Thanks!!
Why are you using materialize?
Just use this: https://material-ui.com/components/drawers/,
at least you'll avoid that kind of problems.
If you want to keep using materialize,
just, tell me why are you using position:fixed ?
Are you aware of that position:fixed make an element
to stay always in the same place even if the page is scrolled?
Are you sure you didn't want to do this :
#landingcontainer {
height: 120vh;
position: relative;
margin-bottom:0;
}
#sidebar {
position: absolute;
height: 100%;
background-color: plum;
color: white;
top: 0;
right: 0;
}
I am working on a ReactJS project and I am facing a CSS problem. I will explain exactly what I want to achieve and what I have done so far.
My fluidContainer is the div with the gray background.
Here is what I have now :
And here is what I want to achieve, I want that space to be eliminated :
I used negative margins and made my fluid-container larger but it is bad code for me, so here is my react component :
const FluidContainer = props => (
<div
className="co-fluid-container"
>
{props.children}
</div>
);
And here is my sass file and what I have tried already :
#import "../../appConstants/style/cssVariables.scss";
.co-fluid-container {
//TODO: améliorer la précision
margin: 0 ( calc( (#{$container-width} + (#{$grid-gutter}/2) - 99vw) /2) );
padding: 40px (calc((100vw - #{$container-width} - (#{$grid-gutter}/2))/2));
&--fluid-content {
padding: 40px 20px;
}
#media($extra-small){
// a justifier
width:calc(100vw + #{$grid-gutter}*5);
margin-left: calc(-#{$grid-gutter}*3/2);
}
#media($small) {
// a justifier
width: calc(100vw + #{$grid-gutter}*5);
margin: 0 calc(-#{$grid-gutter}*3);
padding: 40px calc(#{$grid-gutter}*3);
}
#media($medium){
width:calc(110vw);
margin-left: calc(-#{$grid-gutter}*3/2);
padding: 40px calc(#{$grid-gutter}*3);
}
#media($large){
margin: 0 ( calc( (#{$container-width} + (#{$grid-gutter}/2) - 100vw) /2));
padding: 40px (calc((100vw - #{$container-width} - (#{$grid-gutter}/2))/2));
}
}
This code is causing me problem, when I try to make my page responsive, here are the variables I used in my code :
grid-gutter : 32 px;
container: 1170px;
extra-small: "max-width: 599px"
medium and large and small are breakpoints too ..
Here is a solution I have tried also, is using relative and absolute positioning but still get a problem, so I changed my rendered element to this :
const FluidContainer = props => (
<div className="co-fluid-conteneur">
<div className="co-fluid-container">{props.children}</div>
</div>
);
and that is my style :
.co-fluid-conteneur {
position: relative;
height: 300px;
}
.co-fluid-container {
position: absolute;
width: 100vw;
}
but those are the results :
Any help would be much appreciated.
For a quick example:
Take the code for the main html file or element as:
<div className="parent">
<div className="child">
</div>
</div>
CSS looks like this:
.parent {
position: relative;
width: 50vw;
height: 50vh;
background-color: blue;
}
.child {
position: absolute;
width: 100vw;
height: 40vh;
background-color: rgba(255, 0, 0, 0.50);
}
This will produce the following layout. (vw is a measure of the viewport width, so 50vw is 50% of the Viewport Width).
I'm building a Navbar with react-bootstrap, but come across the following problem.
When I scroll to the top/right/bottom or keep the page still, everything looks fine.
But when I scroll to the left, there is a white space appear on the right of the content, making navbar exceeding the length of the main body.
Here's my script:
const HomePage = () => {
return (
<div id="homePageTitle">
<h1>Home Page</h1>
</div>
)
}
class Header extends React.Component {
render() {
return (
<div>
<Navbar inverse collapseOnSelect id="navbar">
<Navbar.Header>
<Navbar.Brand>
<p>Brand</p>
</Navbar.Brand>
<Navbar.Toggle />
</Navbar.Header>
<Navbar.Collapse>
<Nav pullRight>
<NavItem eventKey={1}>Home</NavItem>
<NavItem eventKey={2}>Projects</NavItem>
<NavItem eventKey={3}>Passions</NavItem>
<NavItem eventKey={4}>Contact</NavItem>
</Nav>
</Navbar.Collapse>
</Navbar>
<HomePage />
</div>
)};
}
Here's my css:
/*---------Header----------*/
.navbar-brand {
min-height: 100px;
}
.navbar.navbar-inverse{
width: 100%;
height: 100px;
margin-bottom: 0;
background-color: lightskyblue;
border: lightskyblue;
border-radius: 0;
position: fixed;
top: 0;
transition: opacity 0.5s;
}
.navbar-right {
margin-top: 30px;
font-size: 18px;
}
/*---------HomePage----------*/
#homePageTitle {
padding-top: 80px;
padding-bottom: 420px;
width: 100%;
text-align: center;
background-color: lightcoral;
margin: 0;
color: #507e9a;
}
Even just a clue as to why this happens is much appreciated! Thanks!
The body has a default margin of 8px. If you want the whitespace there, then add the same
margin: 0 8px;
to the navbar class. Alternatively you could add:
body{
margin: 0;
}
and that would remove the white space altogether. This happens because the #homePageTitle is still in the document flow whereas the navbar being position: fixed is removed from document flow and thus isn't influenced by the margin of the body since it is no longer bounded by it.
You can see this even more by adding:
body{
position:relative;
}
This will set body as the context for the navbar to be fixed in, and thus be influenced by the body's margin yet again. This is probably the preferred way to do it if you want to keep the margin there as you won't need to set margins on any other position: fixed elements.
Without being able to play around with the page itself it's hard to say for sure, but I'm fairly sure this is your issue.
I have found someone with a similar problem and it is solved by disabling horizontal scroll as suggested in this post. This perfectly solves my problem.