I'm trying to keep my page to a single fixed view (100% height & width) and wrap any long content using react-custom-scrollbar found within Layout <content>.
Ideally I would like to only have a scrollbar within <content></content> to display my content. The issue may be because I have not defined any layout container sizing to support 100vh view (responsive)
Resources:
Tabs
Custom scrollbar
How can I achieve the single pageview assuming it's through css?
I am still pretty new with react-custom-scrollbar, How can I reset scroll position to the top when TabPane is loaded/clicked?
Page view
https://dw0to.csb.app/
Set outermost div's overflow property to hidden. Then define a wrapper for your <content> component, and set its overflow property to auto.
I am not familiar with antd, but this is how it is done with CSS.
In this example, App encapsulates all elements, so that's why I set its overflow property to hidden.
JSX:
function App() {
return (
<div className="App">
<div className="wrapper">
//Your components
</div>
</div>
);
}
CSS:
html,
body {
overflow: hidden;
height: 100%;
}
.App {
height: 100%;
width: 100%;
overflow: hidden;
}
.wrapper{
height: 100%;
width: 100%;
overflow: auto;
}
Related
I have a sticky-top navbar. I want the scrollbar to start scrolling inside the container and not the body, because when some other page is shorter and there's no scrollbar the items in the navbar move on the right (for the width of a scrollbar).
How do I need to change the html or CSS?
jsfiddle
You need to use overflow: auto on your container. But it only works if you set the height too!
I guess you want to stretch the container to full height. So the easiest way is to define a variable for the navbar height and calculate the container's height. Add this code to your css:
:root {
--navbar-height: 56px;
}
.navbar {
height: var(--navbar-height);
}
.container {
overflow: auto;
height: calc(100vh - (var(--navbar-height)));
}
I use React-Table as a table component. Within there, I'm basically presented with the following scenario: https://codesandbox.io/s/52lvxrj8r4
The vertical scrollbar of the body is doing its thing, however, it's outside of the viewport of the parent div, which does the horizontal scrolling. Meaning you only see the vertical scrollbar when you completely scroll the horizontal scrollbar to the right.
My html is:
<div class="rt-table">
<div class="rt-tbody">
test
<br />
test
<br />
(repeat test<br /> many times)
</div>
</div>
My SASS is:
.rt-table {
width: 600px;
height: 600px;
overflow-y: hidden;
.rt-tbody {
height: 1000px;
width: 1000px;
overflow-x: auto;
overflow-y: scroll;
}
}
Is there a possibility to make sure that the vertical scrollbar is always shown within the viewport of its parent, regardless of the position of the horizontal scrollbar?
Change your sass as to put the scrolling on the parent and not on the child.
When creating a scrollable container always make sure the smaller outer container is the one that contains the scrollbars, otherwise your scrollbars might be hidden.
.rt-table {
width: 600px;
height: 600px;
overflow-y: scroll;
.rt-tbody {
height: auto;
width: 1000px;
}
}
index.html
<td>
<div id="wrapper">
words go her alot of them
</div>
</td>
style.css
#wrapper {
height: 100%;
width: 200px;
overflow: auto;
}
I am currently unable to get the scroll bar to appear, this is what I get:
You could use the overflow property:
#wrapper {
height: 100%;
width: 200px;
overflow: scroll;
}
The overflow property specifies what happens if content overflows an element's box.
This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.
Note: The overflow property only works for block elements with a specified height.
Further reading - W3Schools
Further reading - MDN
Try setting
overflow: scroll;
Should do the trick
Try setting overflow to scroll:
#wrapper {
overflow: scroll;
}
You would need to add a height to the td tag;
Example:
height="250px" or change your height in your #wrapper.
overflow-y: scroll
i used this and it fixed the problem
I have a page with the following HTML structure...
<html>
...
<body>
<div class="wrapper">
...
</div>
</body>
</html>
The .wrapper is being set at min-width: 1100px for reasons I won't go into. Therefore when the browser is resized to less than 1100px I want a horizontal scrollbar to appear.
My CSS is as follows:
html {
overflow-x: scroll;
height: 100%;
}
body {
overflow: auto;
}
.wrapper {
min-width: 1100px;
margin: 0 auto;
}
For some reason the only horizontal scrollbar showing is one when you've scrolled vertically down to the bottom of the page, and it appears sort of "within" the main browser frame, above the main browser horizontal scroll area. I want the main horizontal scrollbar of the window to be the one that is available.
Here is a diagram of my problem: http://oi62.tinypic.com/r06m1z.jpg
And a codepen: http://codepen.io/anon/pen/ocxvs
Thanks in advance for any help!
Its because your document (body) isnt stretched to the full height of the viewport (html), you need to assign height:100vh, also remove your overflow settings so you dont get 2 scrollbars appearing (one on body one on html).
Simply change your CSS to:
html,body{
height:100vh;
width:100vw;
margin: 0;
padding: 0;
}
I have a div on page with a fixed width of 1200px. It's this way because I inserted inside a collection of thumbnails to creates a mosaic. I don't want the mosaic to change if the page is resized.
The problem is that I don't want to have horizontal scrollbars on the page. The div is placed just for visual purposes.
How can I avoid the horizontal navigator scrollbars that is automatically created when browser size is smaller than the div size?
Update: The div can't be positioned fixed.
in css:
html,body {
overflow : hidden;
}
or if you want vertical scrollbars, overflow-x: hidden
or a cleaner way:
<div class="wrapper">
<div class="mosaic"></div>
</div>
and put width:100%;overflow:hidden on the wrapper.
You should be able to do this simply by setting your div to fixed positioning.
.hugediv {
background: blue;
width: 1200px;
height: 200px;
position: fixed;
z-index: 1;
}