diff --git a/modules/backend/assets/css/october.css b/modules/backend/assets/css/october.css index fb572f7c55..cc50625691 100644 --- a/modules/backend/assets/css/october.css +++ b/modules/backend/assets/css/october.css @@ -115,11 +115,12 @@ .control-simplelist.is-selectable-box li a:hover .image >i {color:rgba(0,0,0,0.45)} .list-preview .control-simplelist.is-selectable ul {margin-bottom:0} .drag-noselect {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} +@media all and (-ms-high-contrast:none) {::-ms-backdrop,.control-scrollbar > .scrollbar-scrollbar .scrollbar-track .scrollbar-thumb{position:absolute !important }} .control-scrollbar {position:relative;overflow:hidden;height:100%;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)} .control-scrollbar >div {-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0)} .control-scrollbar >.scrollbar-scrollbar {position:absolute;z-index:100} .control-scrollbar >.scrollbar-scrollbar .scrollbar-track {background-color:transparent;position:relative;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px} -.control-scrollbar >.scrollbar-scrollbar .scrollbar-track .scrollbar-thumb {background-color:rgba(0,0,0,0.35);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;overflow:hidden;position:absolute} +.control-scrollbar >.scrollbar-scrollbar .scrollbar-track .scrollbar-thumb {background-color:rgba(0,0,0,0.35);-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;cursor:pointer;overflow:hidden;position:sticky} .control-scrollbar >.scrollbar-scrollbar.disabled {display:none !important} .control-scrollbar.vertical >.scrollbar-scrollbar {right:0;margin-right:5px;width:6px} .control-scrollbar.vertical >.scrollbar-scrollbar .scrollbar-track {height:100%;width:6px} diff --git a/modules/backend/assets/less/controls/scrollbar.less b/modules/backend/assets/less/controls/scrollbar.less index 92f6bd4449..9be9518901 100644 --- a/modules/backend/assets/less/controls/scrollbar.less +++ b/modules/backend/assets/less/controls/scrollbar.less @@ -8,6 +8,26 @@ @scrollbar-thumb-size: 6px; +// +// IE11 Hack to bypass position:sticky on line 55 +// +@media all and (-ms-high-contrast:none) { + * { + &::-ms-backdrop { + position: absolute !important; + } + } + .control-scrollbar { + >.scrollbar-scrollbar { + .scrollbar-track { + .scrollbar-thumb { + position: absolute !important; + } + } + } + } +} + .control-scrollbar { position: relative; overflow: hidden; @@ -31,7 +51,8 @@ .border-radius(5px); cursor: pointer; overflow: hidden; - position: absolute; + /* Important use position: sticky - see github issue: https://github.com/octobercms/october/issues/4621 */ + position: sticky; } } diff --git a/modules/backend/widgets/mediamanager/assets/css/mediamanager.css b/modules/backend/widgets/mediamanager/assets/css/mediamanager.css index 74e0a857ab..d38c9b3a2a 100644 --- a/modules/backend/widgets/mediamanager/assets/css/mediamanager.css +++ b/modules/backend/widgets/mediamanager/assets/css/mediamanager.css @@ -126,4 +126,5 @@ body:not(.no-select) div[data-control="media-manager"] .media-list li:hover h4 a @media (max-width:1280px) {div[data-control="media-manager"] .media-list.list li {width:230px }} @media (max-width:1024px) {div[data-control="media-manager"] .media-list.list li {display:block;width:auto }} @media (max-width:768px) {div[data-control="media-manager"] [data-control="preview-sidebar"],div[data-control="media-manager"] [data-command="toggle-sidebar"] {display:none !important }div[data-control="media-manager"] .media-list.list {padding:0 }div[data-control="media-manager"] .media-list.list li {-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin:0;border-right:none;border-left:none;border-bottom:none }} -@media (max-width:480px) {div[data-control="media-manager"] [data-control="left-sidebar"] {display:none !important }} \ No newline at end of file +@media (max-width:480px) {div[data-control="media-manager"] [data-control="left-sidebar"] {display:none !important }} +#right-sidebar-mediamanager.hide {display:table-cell !important;opacity:0;width:0px !important;overflow:hidden} diff --git a/modules/backend/widgets/mediamanager/assets/less/mediamanager.less b/modules/backend/widgets/mediamanager/assets/less/mediamanager.less index 9ff16d3939..69b9aa45f0 100644 --- a/modules/backend/widgets/mediamanager/assets/less/mediamanager.less +++ b/modules/backend/widgets/mediamanager/assets/less/mediamanager.less @@ -698,3 +698,15 @@ body:not(.no-select) { } } } + +// +// Important - The right sidebar panel needs to be displayed and not hidden +// for the scrollbar to work. In this case I have overwritten the hide class +// for display:none and used opacity: 0 see github issue: https://github.com/octobercms/october/issues/4601 +// +#right-sidebar-mediamanager.hide { + display: table-cell !important; + opacity: 0; + width: 0px !important; + overflow: hidden; +} \ No newline at end of file diff --git a/modules/backend/widgets/mediamanager/partials/_body.htm b/modules/backend/widgets/mediamanager/partials/_body.htm index fef45ae219..8363a8ae6e 100644 --- a/modules/backend/widgets/mediamanager/partials/_body.htm +++ b/modules/backend/widgets/mediamanager/partials/_body.htm @@ -46,7 +46,7 @@ -
+