how to zoom in a page without displaying scroll in the parent component(main component) of the page

user_15018440 0
Viewed 565

I want to build a page that looks like the window application. There is a problem with this that when I zoom-in the page it will display a scroll-bar on the main page. I set the parameters of the main page (the parent) as below. width: 100vw, height: 100vh

what should I do To scroll through the component inside the main page(the children components) instead of the main page(the parent component). I put my the css part of my code below.

first css code of the main page(parent). I use Material-ui for styling. root is the className of the main page. header,breadeCrumb and content are className of my children components.

const useStyles = makeStyles({

root: {
    width:'100vw',
    height: '100vh',
},

header: {
    height: '10%',
},

breadCrumb: {
    height: '10%',
},

content: {
    height: '80%',
}

});

The content component also has its own children (sidebar and content) which I put their css properties below.

const useStyles = makeStyles({

root: {
    border: '1px solid blue', 
    display: 'flex',
    width:'auto',
    height: 'auto',
},

sidebar: {
    backgroundColor: 'orange',
    width: '20%',

    height: 'auto',
    border: '1px solid red',
    overflow: 'scroll'
},

content: {
    height: 'auto',
    width: '80%',
}

});

Is there something that I forgot to set? please guide me to solve this problem if you can.

flexbox material-ui reactjs scrollbar css
3 Answers

This page on how to hide the scroll bar but keep the scrolling functionality from w3schools might be helpful: https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

 /* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

You could apply this to your .root class (or the html or body in your .css file) to hide the scrollbar on the root element or page when a user zooms in.

If you want only e.g. your Content element or Sidebar elements to scroll, you will need to set their height. auto will adjust height to accommodate the content. Try setting it with px or vh.

Here's a quick fiddle I made with some options for how to hide the scrollbar at the page level, but show it in a Sidebar and Content element: https://jsfiddle.net/bethylogism/b6nuehqg/246/

If this isn't quite what you're getting at, make a quick JS Fiddle or CodePen of the functionality you're struggling with. It will be easier to diagnose and help you. E.g. I'm not 100% sure what you mean by "the window application".

user_112163580

Fortunately, I solve the problem and I am goning to share it here.

As I told, I want my page to not be scrolled, but the components inside it should be scrolled by zooming-in. When I set the main page's width and height to 100vw and 100vh, I can give the width and height of components inside it with percentage to fit them in the page. The below code is the css for the main page.

I want to build a page that looks like the window application. There is a problem with this that when I zoom-in the page it will display a scroll-bar on the main page. I set the parameters of the main page (the parent) as below. width: 100vw, height: 100vh

what should I do To scroll through the component inside the main page(the children components) instead of the main page(the parent component). I put my the css part of my code below.

first css code of the main page(parent). I use Material-ui for styling. root is the className of the main page. header,breadeCrumb and content are className of my children components.

const useStyles = makeStyles({

root: {

width:"100vw",
height:"100vh",

},

header: {

height: "10%",
width: "100%",

},

breadCrumb: {

height: "10%",
width: "100%",

},

content: {

height: "80%",
width: "100%"

}, });

And the Content component's css code which consists of two components(Sidebar and content) is below.

const useStyles = makeStyles({

root: {

display: "flex",
width:"100%",
height:"100%",

},

sidebar: {

width: "20%",
height: "100%",
overflow: "auto",

},

content: {

width: "80%",
height: "100%",
overflow: "auto",

},

});

user_150184400

Generally speaking, you should do these items ...

  1. in your page(or the higher container component) style your root :

height:"100vh" -> this will fill whole screen.

  1. and again in that container, style your children components :

in the way that some of all the heights be 100%

  1. at the end, in each child component, the height must be:

height: '100%' -> to fit in the page

user_148458600
Related