Fixed scroll issues for card details in Chrome

This commit is contained in:
Giulio Cesare Solaroli 2015-07-29 17:31:29 +02:00
parent a182077a1d
commit 0dbd7eb45a
4 changed files with 63 additions and 33 deletions

View File

@ -690,12 +690,6 @@ input[type=text] {
flex: none;
cursor: pointer; }
/* Firefox considers 100% respect to height of the whole window, this is rule is necessary to eliminate the card toolbar offset. */
@-moz-document url-prefix() {
#mainPanel.extra-wide .subpanel.cardContent {
height: calc(100% - 50px); }
#mainPanel.wide .cardContent {
height: calc(100% - 50px); } }
#mainPanel {
left: 0px; }
#mainPanel.extra-wide {
@ -803,7 +797,7 @@ input[type=text] {
.mainPage.narrow #extraFeaturesPanel.fullOpen .extraFeatureIndex {
width: 0px; }
.mainPage.narrow #extraFeaturesPanel .extraFeatureContent .extraFeature {
height: calc(100% - 50px); }
height: calc(100% - $mainCardToolbarHeight); }
#extraFeaturesPanel {
position: fixed;
@ -1319,6 +1313,17 @@ div.dialogBox {
flex: none;
cursor: pointer; }
/* Firefox considers 100% respect to height of the whole window, this is rule is necessary to eliminate the card toolbar offset. */
@-moz-document url-prefix() {
#mainPanel.extra-wide .subpanel.cardContent {
height: calc(100% - 48px); }
#mainPanel.wide .cardContent {
height: calc(100% - 48px); } }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
#mainPanel.extra-wide .subpanel.cardContent {
height: calc(100% - 48px); }
#mainPanel.wide .cardContent {
height: calc(100% - 48px); } }
.tagEditor {
display: -webkit-box;
display: -webkit-flex;

File diff suppressed because one or more lines are too long

View File

@ -91,6 +91,16 @@ http://jonibologna.com/flexbox-cheatsheet/
//
// (Placeholder selectors for each type, for those who rather @extend)
// ------------------------------------------------------------------
//
// F L E X B O X d e b u g g i n g
//
// http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/
// https://github.com/philipwalton/flexbugs
//
// ------------------------------------------------------------------
@mixin flexbox {
display: -webkit-box;
display: -webkit-flex;

View File

@ -94,28 +94,6 @@ input[type=text] {
}
}
/* Firefox considers 100% respect to height of the whole window, this is rule is necessary to eliminate the card toolbar offset. */
@-moz-document url-prefix() {
#mainPanel {
&.extra-wide {
.subpanel {
&.cardContent {
height: calc(100% - 50px);
}
}
}
&.wide {
.cardContent {
height: calc(100% - 50px);
}
}
}
}
#mainPanel {
// background-color: $yellow;
left: 0px;
@ -201,7 +179,7 @@ input[type=text] {
.extraFeatureContent {
.extraFeature {
height: calc(100% - 50px);
height: calc(100% - $mainCardToolbarHeight);
}
}
@ -298,9 +276,8 @@ input[type=text] {
.cardToolbar {
@include flex(none);
}
.cardContent {
}
}
@ -624,3 +601,41 @@ div.dialogBox {
}
}
}
/* Firefox considers 100% respect to height of the whole window, this is rule is necessary to eliminate the card toolbar offset. */
@-moz-document url-prefix() {
#mainPanel {
&.extra-wide {
.subpanel {
&.cardContent {
height: calc(100% - #{$mainCardToolbarHeight});
}
}
}
&.wide {
.cardContent {
height: calc(100% - #{$mainCardToolbarHeight});
}
}
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
#mainPanel {
&.extra-wide {
.subpanel {
&.cardContent {
height: calc(100% - #{$mainCardToolbarHeight});
}
}
}
&.wide {
.cardContent {
height: calc(100% - #{$mainCardToolbarHeight});
}
}
}
}