lunarised/ReactLearning
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Made CSS Scroll correctly

Browse Source
This commit is contained in:
James McKenzie 2021-04-29 09:02:36 +12:00
parent f705127ce6
commit 218c3a0fdc
1 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
ReactLearning/kanban-board/src/App.css
View File

@ -33,7 +33,7 @@ html {
flex-grow: inherit; flex-grow: inherit;
border-color: #ddd; border-color: #ddd;
border-width: 2px; border-width: 2px;
min-width: 200px; min-width: 300px;
min-height: 200px; min-height: 200px;
max-width: 25%; max-width: 25%;
border-style: solid; border-style: solid;
@ -42,11 +42,7 @@ html {
padding: 5px; padding: 5px;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.panel {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.taskWrapper { .taskWrapper {
display: flex; display: flex;
@ -68,21 +64,28 @@ html {
} }
.panel { .panel {
display: flex;
flex: 1;
flex-direction: row;
flex-wrap: nowrap;
width: 100%; width: 100%;
overflow-x:auto;
overflow-y: hidden;
height: 100%;
align-items: stretch;
background-color: lavender;
} }
.modal {
z-index: 10;
}
.modal { .modal {
position: fixed; position: fixed;
z-index: 20;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
color: black; color: black;
background: rgba(0, 0, 0, 0.5); background: rgba(0, 0, 0, 0.6);
} }
.modal-main label { .modal-main label {
@ -104,7 +107,6 @@ html {
.modal-main button { .modal-main button {
display: block; display: block;
text-align: center; text-align: center;
background-color: green; background-color: green;
} }
@ -118,7 +120,7 @@ html {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
z-index: 999; z-index: 10;
} }
.display-block { .display-block {
@ -128,3 +130,4 @@ html {
.display-none { .display-none {
display: none; display: none;
} }