nicholas/storage-manager
1
0
Fork 0
Code Issues Pull Requests Activity

skinny scollbar on html elem overflow

Browse Source
This commit is contained in:
np.w
2020-12-16 22:34:08 -06:00
parent 25321bb1c1
commit 0a6551169b
4 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/public/index.html
+1 -1
View File
@@ -8,7 +8,7 @@
<title>React App</title> <title>React App</title>
</head> </head>
<body> <body class="scroll-container">
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
</body> </body>
client/src/app.js
+1 -1
View File
@@ -341,7 +341,7 @@ function App() {
{<button className='button' onClick={handleAddBox}>new box</button>} {<button className='button' onClick={handleAddBox}>new box</button>}
</div> </div>
<div className='body-container'> <div className='body-container scroll-container'>
<ul className="list-box"> <ul className="list-box">
{filteredData.map((box, index) => { {filteredData.map((box, index) => {
return ( return (
client/src/box.js
+1 -1
View File
@@ -47,7 +47,7 @@ const Box = ({ boxData, boxHandler, itemHandler }) => {
<span className='menu-more box material-icons' onClick={handleBoxMenuClick}>more_vert</span> <span className='menu-more box material-icons' onClick={handleBoxMenuClick}>more_vert</span>
</div> </div>
<div className='head-divider'></div> <div className='head-divider'></div>
<ul className='list-box-item'> <ul className='list-box-item scroll-container'>
{boxData.item.map(((item, index) => { {boxData.item.map(((item, index) => {
return <Item return <Item
key={index} key={index}
client/src/styles/app.css
+6 -5
View File
@@ -6,7 +6,7 @@
--white_light:#fafafa; --white_light:#fafafa;
--white_darker: #e0e0e0; --white_darker: #e0e0e0;
} }
html, body { html, body, #root {
margin: 0; margin: 0;
} }
@@ -15,7 +15,8 @@ html {
color: var(--black_dark) color: var(--black_dark)
} }
.body-container { .body-container {
margin-left: 2em; margin: 0 2em;
overflow:auto;
} }
form > fieldset > label { form > fieldset > label {
display: flex; display: flex;
@@ -154,13 +155,13 @@ li.box {
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
} }
.list-box-item::-webkit-scrollbar { .scroll-container::-webkit-scrollbar {
width: 5px; width: 5px;
} }
.list-box-item::-webkit-scrollbar-track { .scroll-container::-webkit-scrollbar-track {
background: #ddd; background: #ddd;
} }
.list-box-item::-webkit-scrollbar-thumb { .scroll-container::-webkit-scrollbar-thumb {
background: #666; background: #666;
} }
li.item { li.item {