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;
}
}
Related
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;
}
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 an image set to 100% width, which is working correctly. However, the image produces a horizontal scroll bar equal to the full width of the image (1366 in this case). I've tried overflow:hidden; but it's doing nothing. How do I kill the extra white space/horizontal scroll bar? Thanks.
.header-image-inner img {
overflow: hidden;
width: 100%;
}
<div class="header-image-inner">
<img width="1366" height="422" alt="banner" src="http://216.227.216.66/~mercantileportag/wp-content/uploads/2015/10/Home_BannerImage1.png">
</div>
The overflow needs to be applied to the container element, not the element itself. For example:
.header-image-inner{
overflow: hidden;
}
.header-image-inner img {
width: 100%;
}
I am working on a page layout with a horizontal scrollbar.
I have some panels with fixed widths in a horizontal order, which should all have the viewport height. I decided to test the vh unit to do that.
.panel { height: 100vh; }
This is working fine, until I get a scrollbar.
The problem is, that vh ignores the height used by the scrollbar and therefore adds a vertical scrollbar.
I would like to subtract the height of the scrollbar from the measurements of vh; is there any way to do this?
You could use a parent element with overflow-y: hidden to ensure that you don't get a vertical scrollbar and then safely use 100vh inside it. This is assuming that you do actually need 100vh for some reason and don't just need to fill the vertical space.
HTML
<div id="main">
<div id="container"></div>
</div>
CSS
#main {
width:200vw;
height:100%;
background: red;
position: absolute;
overflow-y: hidden;
}
#container {
height: 100vh;
width:10px;
background: blue;
}
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;
}