I have an app like this:
as you can see the middle component continues down out of page and that's why I need a scrollbar to scroll down to it. but I can only make it work if I attach it directly on the middle component but I want a regular whole page scrollbar.
here is my app.js
import React, { Component } from 'react';
import OysterView from './components/OysterView.js'
import './uikit/uikit.css';
import './App.css';
import logo from './uikit/assets/images/hrm-white.svg';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<header>
<img src={logo} className="App-logo" alt="HRM"/>
</header>
</div>
<div className="OysterView">
<OysterView />
</div>
</div>
);
}
}
export default App;
I have tried setting it on different places but it does not recognize that the component is out of bounds so cant scroll down the <OysterView /> component is the component that is out of bound so I have tried in CSS
.App {
overflow-y: scroll;
background-color: #fafafa;
position: fixed;
height: 100vh;
width: 100vw;
z-index: -2
}
tried this as well:
html{
height: 100%;
overflow-y: scroll;
margin: 0;
padding: 0;
}
which doesn't add anything at all and that is probably because .App has no height but if I add height the rest of the content gets pushed down so it solves nothing. I have tried adding it to the index.css html as well and that gives me an scrollbar but it cant be scrolled down. so I am al out of ideas here. how should I attack this? z-index on .App?
You do have to scroll the component itself, just make its container full-screen so that the scrollbar will be on the right side of the window.
.modal-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba( 0, 0, 0, .5 );
overflow-y: scroll;
}
.modal-content {
background: red;
margin: 20%;
height: 2000px;
}
Page content
<div class="modal-container">
<div class="modal-content">
Modal content
</div>
</div>
Related
When I use Facebook's dashboard, and I just scroll down the browser, I can see only the main part(newsfeed at home) scrolled to down with infinite scrolling and another parts are fixed on side and top of the screen. How do I implement like this? I mean, scrollbar is on the right side of browser on the Facebook while the scrolling part is just the main contents part, not the inner side(I mean, not at the right side of the inner part - newsfeed). I tried to copy and clone-coding the Facebook and the left side of main(name, Friends, Watch, Group, Events, etcs) scrolled down together.
Real Question is -
How can I just scroll down the part I want, not the whole part?
Please check the image below to make sure what this question is clearly about.
https://i.stack.imgur.com/00uB6.png
Here is an example of structure
.header {
position: fixed;
top: 0px;
background: blue;
width: 100%;
}
.wrap {
display: flex;
position: relative;
top: 15px;
}
.menu {
width: 100px;
position: fixed;
}
.main {
height: 1500px;
border: 1px solid black;
margin-left:100px;
}
<div class="wrap">
<div class="header">Header</div>
<div class="menu">side menu</div>
<div class="main">main</div>
</div>
Check this sample design below. This might help.
Basically, I have used the flex layout as the one to create the page and then I've hidden the scrollbar for the news feed container.
for (var i = 1; i <= 200; i++) {
document.getElementsByClassName("container2")[0].innerHTML += 'scrollable area ' + i + '<br />';
}
* {
margin: 0;
}
.main-container {
display: flex;
width: 100%;
height: 100vh;
overflow: hidden;
}
.container1 {
background-color: #a00;
flex: 0.2;
position: sticky;
top: 0;
align-self: flex-start;
}
.container2 {
background-color: #0a0;
flex: 0.8;
overflow: auto;
}
.container2::-webkit-scrollbar {
width: 10px;
}
<div class="main-container">
<!-- keeps both containers -->
<div class="container1">
<!-- container1 has page links, group links (left side of facebook) -->
Unscrollable area. This will contain the page links, group links and others. This is the left side on facebook.
</div>
<div class="container2">
<!-- container2 has the scrollable news feed -->
This is the news feed. You can use javascript to load more content when user reaches the scroll end of this element. <br />
</div>
</div>
I've not been able to find any thing about this issue so far, hopefully it's something simple that someone here has come across before. The code and example below have been simplified for brevity.
I'm using Vue V3 with Vue CLI for running it locally.
I have two views which have an element with the same class in each, I'm using scoped CSS for the styling of the element and Vue Router to handle routing.
I load the first page, Home, and see the background image as expected however when I click the next button it takes me to the next page with the correct URL and content but still shows the image from the scoped CSS on the Home view.
If I then do a full refresh in the browser the styling clears, is this a bug in Vue of do I need to do something to force a clearing of the style?
Home.vue
<template>
<div
v-if="content"
class="content"
>
<router-link :to="`/next-page`">
Next
</router-link>
</div>
</template>
<style>
.content {
min-height: 100vh;
background-size: cover;
background-image: url(https://assets.website-files.com/5e832e12eb7ca02ee9064d42/5f915422ccb28e626ad16e20_Group%20939.jpg);
}
.content:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
top: 0;
left: 0;
}
</style>
NextPage.vue
<template>
<div
v-if="content"
class="content"
>
Some text content
<router-link :to="`/home">
Back
</router-link>
</div>
</template>
In Home.vue component style add the scoped attribute to the style tag:
<style scoped>
.content {
min-height: 100vh;
background-size: cover;
background-image: url(https://assets.website-files.com/5e832e12eb7ca02ee9064d42/5f915422ccb28e626ad16e20_Group%20939.jpg);
}
.content:after {
content: '';
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(0,0,0,.5);
top: 0;
left: 0;
}
</style>
I am attempting to create a CTA component at the top of my react application, that contains the navbar and the CTA text. After successfully completing the component, I am noticing a minor bug that I would like to resolve. I am only providing my image with a width of 100% and no defined height. This causes the divs beneath the image to flicker upwards until the image has fully loaded. I know not providing the image with a defined height is causing it because the bug goes away when I provide the image with a random height. I am wondering if there is a way to provide the image with a responsive height that would behave in a similar way to just providing my image with 100% width.
my css code is as follows:
body {
margin: 0;
padding: 0;
}
.container {
position: relative;
}
.container .container-background {
opacity: 0.25;
}
.container-background-img {
width: 100%;
position: relative;
}
.container .content {
position: relative;
z-index: 1;
}
.app-outer {
max-width: 1170px;
margin: 0 auto;
position: relative;
padding: 0rem 1rem;
}
#media only screen and (max-width: 1170px) {
.container-background-img {
height: 656px;
object-fit: cover;
}
}
#media only screen and (max-width: 768px) {
.container-background-img {
height: 653px;
object-fit: cover;
}
}
/* CODE ADDED */
#navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
}
#content {
position: absolute;
top: 20%;
}
my jsx code is as follows:
import React from "react";
import "./styles.css";
export default function App() {
return (
<>
<div className="container">
<div className="container-background">
<img
id="rob"
src="https://i.imgur.com/iyFtMNA.jpg"
alt="bg"
className="container-background-img"
/>
</div>
<div id="content" className="content">
I am the CTA
</div>
<div id="navbar">
<div
style={{
backgroundColor: "white",
height: 100,
width: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center"
}}
>
I am the navbar
</div>
</div>
</div>
<div>I am beneath the cta</div>
</>
);
}
the following link I have provided contains a code sandbox: https://codesandbox.io/s/issue-react-forked-4lsdm?file=/src/App.js:0-868
Please Note: *** within the code sandbox the issue is not very apparent, but within my react application it is much more noticeable
As you mentioned, the issue is not really clear to see from your sandbox code.
I am not sure this would fix your issue but instead of using image tag try setting your CTA component to have background-image() instead.
Make sure to add other background css attributes too such as
background-repeat: no-repeat;
background-size: cover;
background-posistion: center;
padding-bottom: 60%;
Make sure to add padding-bottom: 60% (Your image seems to have a 3:2(w:h) ratio);
Hopefully, this works for you!
I have a basic app with a text editor and a title bar. I don't want scrollbars to appear on the side unless the text editor goes into overflow. Even then, I don't want the titlebar to disappear during the scroll. Right now, it does.
I think there's some CSS witchcraft I'm missing here, or maybe I've done something wrong.
Using React, JS, and Electron. The text editor is Quill.js if that matters. Used create-react-app.
App.css:
.App {
min-height: 100%;
margin: 0;
background-color: red;
}
.editor {
background-color: rgb(29, 29, 29);
color: rgb(201, 201, 201);
min-width: 100%;
height: 100%;
position: absolute;
margin-top: 30px;
}
.app-bar {
-webkit-app-region: drag;
min-width: 100%;
background-color: green;
position: fixed;
height: 30px;
}
App.js:
import React, { Component } from 'react'
import ReactQuill from 'react-quill';
import './App.css';
import 'react-quill/dist/quill.bubble.css';
export class App extends Component {
constructor() {
super();
}
render() {
return (
<div className="App">
<div className="app-bar">
test
</div>
<div>
<ReactQuill theme="bubble" className="editor" />
</div>
</div>
);
}
}
export default App;
Screenshot of what I mean:
When I scroll down the text stays there, but the colour scrolls:
Try add this,
body{
margin-bottom:30px;
}
i have a Card and a Modal component like so
class Card extends Component {
constructor() {
super();
this.state = { showModal: false }
}
render() {
const { showModal } = this.state;
return (
{/* Some code */}
{showModal && <Modal />}
)
}
}
So, I don't want to render my Modal until it is required. Logic.
The Modal's job, in this context, is to display the full content of the Card component (The Card has a fixed height, so I cannot displaying every bit of information in there).
Now, at a higher level I have the following:
class App extends Component {
/* Some Code */
render() {
return (
<div>
<Content /> {/* Our content */}
<Overlay /> {/* Our all-purpose-overlay (we need it for the Modal) */}
</div>
)
}
}
The problem is that my Card component has the style position: relative and the Modal component has the a z-index and the style position: absolute.
I did some research and I read that nested elements with non-static
position will not work the same way regarding the z-index. The z-index will take effect only within the non-static element.
So I cannot make my Modal appear above the the Overlay component. Furthermore, The Card component has a overflow:hidden property. And so, the Modal gets cropped.
Here is a simple demonstration.
function toggleModal() {
var app = document.getElementById("app");
app.classList.toggle("-modal");
}
:root {
background: #ddd;
}
#app,
#overlay {
height:100vh;
width:100%;
}
#app {
display: flex;
align-items: center;
justify-content: center;
}
/* Overlay */
#overlay {
position: absolute;
top: 0;
left: 0;
z-index: 1;
visibility: hidden;
background: rgba(0,0,0,0.3);
}
.-modal #overlay {
visibility: visible !important;
}
/* Card */
#card {
position: relative;
width: 250px;
padding: 1em;
border-radius: 5px;
background: white;
overflow: hidden; /* Problem */
}
.content {
padding: 4em 0;
text-align: center;
}
.btn {
padding: 1em 2em;
border:none;
color:white;
float: right;
cursor: pointer;
transition: 0.2s ease;
background: #00abff;
}
.btn:hover {
background: #0c9de4;
}
/* Modal */
#modal {
width: 300px;
position: absolute;
top:0;
left: 50px; /* Modal Gets clipped */
visibility: hidden;
background-color:red;
}
.-modal #modal {
visibility: visible;
}
<div id="app">
<div id="card">
<div class="content">content</div>
<button class="btn" onclick="toggleModal()">Display Modal</button>
<div id="modal">
<div class="content">
<div>Modal</div>
<div>With same content</div>
<div>(under the Overlay and also cropped)</div>
</div>
</div>
</div>
<div id="overlay" onclick="toggleModal()"></div>
</div>
Question : How should I organize my components so that I do not get this problem?
I thought of having only one Modal at top level. Then I simply display it. But I need to render the children of the Card into the Modal.
How should I proceed?
Since you are using React, what I would actually recommend is to use a Portal to render your modal. One thing Portals solve in React are precisely this issue. If you are using a more recent version of React (16+) then you already have access to portals.
If you are using an older version of React, that is okay. You can use an implementation like this (react-portal) instead.
Now you will have your components/markup rendered in a totally separate React tree outside of the context of your containing <div> that has position: relative on it and you can absolute or fixed position it wherever you need to.