diff --git a/frontend/src/metabase/components/EditBar.jsx b/frontend/src/metabase/components/EditBar.jsx
index 9f18730d62548d02446ed26b5456dcd0dd36c0ff..1f537102d4239a5d357b47a2759d3a378e88be7f 100644
--- a/frontend/src/metabase/components/EditBar.jsx
+++ b/frontend/src/metabase/components/EditBar.jsx
@@ -33,7 +33,7 @@ class EditBar extends Component {
{subtitle}
</span>
)}
- <span className="flex-align-right">
+ <span className="flex-align-right flex">
{buttons}
</span>
</div>
diff --git a/frontend/src/metabase/components/HistoryModal.jsx b/frontend/src/metabase/components/HistoryModal.jsx
index 3b545724611c3afbb110586d732256c215b38da5..8d7e02799e021b412d0790dbc7402119aa69fc25 100644
--- a/frontend/src/metabase/components/HistoryModal.jsx
+++ b/frontend/src/metabase/components/HistoryModal.jsx
@@ -76,7 +76,7 @@ export default class HistoryModal extends Component {
title="Revision history"
onClose={() => this.props.onClose()}
>
- <LoadingAndErrorWrapper loading={!revisions} error={this.state.error}>
+ <LoadingAndErrorWrapper className="flex flex-full flex-basis-auto" loading={!revisions} error={this.state.error}>
{() =>
<div className="pb4 flex-full">
<div className="border-bottom flex px4 py1 text-uppercase text-grey-3 text-bold h5">
diff --git a/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx b/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx
index a0fc95eae3c38bc1107a25b7cd74f5569dfd811c..c5fd86d101bbcf8736044228f4230f1de6ce0212 100644
--- a/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx
+++ b/frontend/src/metabase/components/LoadingAndErrorWrapper.jsx
@@ -60,7 +60,7 @@ export default class LoadingAndErrorWrapper extends Component {
<div className={this.props.className} style={this.props.style}>
{ error ?
<div className={contentClassName}>
- <h2 className="text-normal text-grey-2">{this.getErrorMessage()}</h2>
+ <h2 className="text-normal text-grey-2 ie-wrap-content-fix">{this.getErrorMessage()}</h2>
</div>
: loading ?
<div className={contentClassName}>
diff --git a/frontend/src/metabase/components/Modal.jsx b/frontend/src/metabase/components/Modal.jsx
index 04d97740acfd632b116169f0f7c4626b492199f8..69a77183c8770429d4288d2cea154f4f064aa922 100644
--- a/frontend/src/metabase/components/Modal.jsx
+++ b/frontend/src/metabase/components/Modal.jsx
@@ -143,8 +143,12 @@ export class FullPageModal extends Component {
this._renderModal(false);
// restore scroll position and scrolling
- window.scrollTo(this._scrollX, this._scrollY);
- document.body.style.overflow = "unset";
+ document.body.style.overflow = "";
+
+ // On IE11 a timeout is required for the scroll to happen after the change of overflow setting
+ setTimeout(() => {
+ window.scrollTo(this._scrollX, this._scrollY);
+ }, 0)
// wait for animations to complete before unmounting
setTimeout(() => {
diff --git a/frontend/src/metabase/components/ModalContent.jsx b/frontend/src/metabase/components/ModalContent.jsx
index 51909fcdea445bb91926073cd2fb473f8aa564d8..b26737a2285d810561a7d42287663ebcf63cf0a8 100644
--- a/frontend/src/metabase/components/ModalContent.jsx
+++ b/frontend/src/metabase/components/ModalContent.jsx
@@ -66,7 +66,7 @@ ModalHeader.contextTypes = MODAL_CHILD_CONTEXT_TYPES;
export const ModalBody = ({ children }, { fullPageModal, formModal }) =>
<div
- className={cx("ModalBody", { "px4": formModal, "flex flex-full": !formModal })}
+ className={cx("ModalBody", { "px4": formModal, "flex flex-full flex-basis-auto": !formModal })}
>
<div
className="flex-full ml-auto mr-auto flex flex-column"
diff --git a/frontend/src/metabase/css/components/modal.css b/frontend/src/metabase/css/components/modal.css
index 1cc813e3dfbe8d8763cb6274f176acd245d917a7..7ee88dad85188886bf0f5eb4b444e3b4a7c3c648 100644
--- a/frontend/src/metabase/css/components/modal.css
+++ b/frontend/src/metabase/css/components/modal.css
@@ -10,6 +10,14 @@
overflow-y: auto;
}
+/* On IE11, single flex item with `margin: auto` gets shifted to flex end
+ * https://github.com/philipwalton/flexbugs/issues/157
+ * Set margin to zero when using Flexbox in `WindowModal` component
+ */
+.Modal-backdrop > .Modal, .Modal-backdrop--dark > .Modal {
+ margin: 0;
+}
+
.Modal.Modal--small { width: 480px; } /* TODO - why is this one px? */
.Modal.Modal--medium { width: 65%; }
.Modal.Modal--wide { width: 85%; }
@@ -32,7 +40,7 @@
background-color: rgba(255, 255, 255, 0.6);
}
-.Modal-backdrop-dark {
+.Modal-backdrop--dark {
background-color: rgba(75, 75, 75, 0.7);
}
diff --git a/frontend/src/metabase/css/core/base.css b/frontend/src/metabase/css/core/base.css
index e1bb63e39e50519046762bc44969bc28902b577d..6ed9b2935a3893690157e4e8a137c034fb17492f 100644
--- a/frontend/src/metabase/css/core/base.css
+++ b/frontend/src/metabase/css/core/base.css
@@ -6,6 +6,7 @@
html {
height: 100%; /* ensure the entire page will fill the window */
+ width: 100%;
}
body {
diff --git a/frontend/src/metabase/css/core/flex.css b/frontend/src/metabase/css/core/flex.css
index 37fcc4401eb7e4cca69d405fcaf51d39afe3ebf0..600321610734f0805c3244d8fa0544178565edd9 100644
--- a/frontend/src/metabase/css/core/flex.css
+++ b/frontend/src/metabase/css/core/flex.css
@@ -16,7 +16,22 @@
flex-shrink: 0;
}
-.flex-retain-width {
+/* The behavior of how `flex: <flex-grow>` sets flex-basis is inconsistent across
+ * browsers. Specifically:
+ * - On Chrome and FF it's set to `flex-basis: 0%`. That behaves equally as `height: 0%`.
+ * It means that if the containing block has no explicit height, then `height: 0%` is computed as `height: auto`,
+ * and element grows as its content grows. That is the most common scenario in Metabase codebase.
+ * - On older IEs it's set to `flex-basis: 0` which means that the initial main size of flex item is zero.
+ * It is also notable that `flex-basis: 0%` doesn't work correctly on IE.
+ *
+ * As a solution, `flex-basis-auto` should always be used in conjunction with `flex-full` when it is
+ * a desired behavior that the element grows with its contents.
+*/
+.flex-basis-auto {
+ flex-basis: auto;
+}
+
+.shrink-below-content-size {
/* W3C spec says:
* By default, flex items won’t shrink below their minimum content size (the length of the longest word or
* fixed-size element). To change this, set the min-width or min-height property.
@@ -135,9 +150,16 @@
}
.no-flex {
- flex: 0;
+ flex: 0 1 0%;
}
@media screen and (--breakpoint-min-md) {
.md-no-flex { flex: 0 !important; }
}
+
+/* Contents of elements inside flex items might not be wrapped correctly on IE11,
+ set max-width manually to enforce wrapping
+*/
+.ie-wrap-content-fix {
+ max-width: 100%;
+}
\ No newline at end of file
diff --git a/frontend/src/metabase/css/core/inputs.css b/frontend/src/metabase/css/core/inputs.css
index d727a683237d9cb7c91f75c047cf87ae3baef15c..78240bd472d4ca71df4e3835e365cba313c9db78 100644
--- a/frontend/src/metabase/css/core/inputs.css
+++ b/frontend/src/metabase/css/core/inputs.css
@@ -13,6 +13,13 @@
transition: border .3s linear;
}
+/* React doesn't receive events from IE11:s input clear button so don't show it */
+.input::-ms-clear {
+ display: none;
+ width: 0;
+ height: 0;
+}
+
.input--small {
padding: 0.3rem 0.4rem;
}
diff --git a/frontend/src/metabase/dashboards/components/DashboardList.jsx b/frontend/src/metabase/dashboards/components/DashboardList.jsx
index f09d617e3b166b930e1537ea9c1575e94741061a..50ed2de2e26163931b5e601628ceeb1f12ab6dde 100644
--- a/frontend/src/metabase/dashboards/components/DashboardList.jsx
+++ b/frontend/src/metabase/dashboards/components/DashboardList.jsx
@@ -21,7 +21,7 @@ type DashboardListItemType = {
const enhance = withState('hover', 'setHover', false)
const DashboardListItem = enhance(({dashboard, hover, setHover}: DashboardListItemType) =>
- <li className="Grid-cell flex-retain-width" style={{maxWidth: "550px"}}>
+ <li className="Grid-cell shrink-below-content-size" style={{maxWidth: "550px"}}>
<Link to={Urls.dashboard(dashboard.id)}
data-metabase-event={"Navbar;Dashboards;Open Dashboard;" + dashboard.id}
className={cx(
@@ -38,7 +38,7 @@ const DashboardListItem = enhance(({dashboard, hover, setHover}: DashboardListIt
onMouseLeave={() => setHover(false)}>
<Icon name="dashboard"
className={cx("pr2", {"text-grey-1": !hover}, {"text-brand-darken": hover})} size={32}/>
- <div className={cx("flex-full flex-retain-width")}>
+ <div className={cx("flex-full shrink-below-content-size")}>
<h4 className={cx("text-ellipsis text-nowrap overflow-hidden text-brand", {"text-white": hover})}
style={{marginBottom: "0.2em"}}>
<Ellipsified>{dashboard.name}</Ellipsified>
@@ -67,4 +67,4 @@ export default class DashboardList extends Component {
</ol>
);
}
-}
\ No newline at end of file
+}
diff --git a/frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx b/frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx
index e46b9fb677fc6188dca638e23fd76bf77498dd4d..916a529a7f236dc9fa8d793c5ee962d572d6f3aa 100644
--- a/frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx
+++ b/frontend/src/metabase/public/components/widgets/EmbedModalContent.jsx
@@ -163,42 +163,50 @@ export default class EmbedModalContent extends Component<*, Props, State> {
}}
/>
</div>
- <div className="flex flex-full">
- { embedType == null ?
- <div className="flex-full ml-auto mr-auto" style={{ maxWidth: 1040 }}>
+ { embedType == null ?
+ <div className="flex-full">
+ {/* Center only using margins because */}
+ <div className="ml-auto mr-auto" style={{maxWidth: 1040}}>
<SharingPane
{...this.props}
publicUrl={getUnsignedPreviewUrl(siteUrl, resourceType, resource.public_uuid, displayOptions)}
iframeUrl={getUnsignedPreviewUrl(siteUrl, resourceType, resource.public_uuid, displayOptions)}
- onChangeEmbedType={(embedType) => this.setState({ embedType })}
+ onChangeEmbedType={(embedType) => this.setState({embedType})}
/>
</div>
+ </div>
: embedType === "application" ?
- <AdvancedEmbedPane
- pane={pane}
- resource={resource}
- resourceType={resourceType}
- embedType={embedType}
- token={getSignedToken(resourceType, resource.id, params, secretKey, embeddingParams)}
- iframeUrl={getSignedPreviewUrl(siteUrl, resourceType, resource.id, params, displayOptions, secretKey, embeddingParams)}
- siteUrl={siteUrl}
- secretKey={secretKey}
- params={params}
- displayOptions={displayOptions}
- previewParameters={previewParameters}
- parameterValues={parameterValues}
- resourceParameters={resourceParameters}
- embeddingParams={embeddingParams}
- onChangeDisplayOptions={(displayOptions) => this.setState({ displayOptions })}
- onChangeEmbeddingParameters={(embeddingParams) => this.setState({ embeddingParams })}
- onChangeParameterValue={(id, value) => this.setState({ parameterValues: { ...parameterValues, [id]: value }})}
- onChangePane={(pane) => this.setState({ pane })}
- onSave={this.handleSave}
- onUnpublish={this.handleUnpublish}
- onDiscard={this.handleDiscard}
- />
- : null }
- </div>
+ <div className="flex flex-full">
+ <AdvancedEmbedPane
+ pane={pane}
+ resource={resource}
+ resourceType={resourceType}
+ embedType={embedType}
+ token={getSignedToken(resourceType, resource.id, params, secretKey, embeddingParams)}
+ iframeUrl={getSignedPreviewUrl(siteUrl, resourceType, resource.id, params, displayOptions, secretKey, embeddingParams)}
+ siteUrl={siteUrl}
+ secretKey={secretKey}
+ params={params}
+ displayOptions={displayOptions}
+ previewParameters={previewParameters}
+ parameterValues={parameterValues}
+ resourceParameters={resourceParameters}
+ embeddingParams={embeddingParams}
+ onChangeDisplayOptions={(displayOptions) => this.setState({displayOptions})}
+ onChangeEmbeddingParameters={(embeddingParams) => this.setState({embeddingParams})}
+ onChangeParameterValue={(id, value) => this.setState({
+ parameterValues: {
+ ...parameterValues,
+ [id]: value
+ }
+ })}
+ onChangePane={(pane) => this.setState({pane})}
+ onSave={this.handleSave}
+ onUnpublish={this.handleUnpublish}
+ onDiscard={this.handleDiscard}
+ />
+ </div>
+ : null }
</div>
);
}
diff --git a/frontend/src/metabase/tutorial/PageFlag.css b/frontend/src/metabase/tutorial/PageFlag.css
index 17819bb7d176192d0dd9516185a7146d93d54e94..42cfe58787659cec6ee4da31d91ff017ffea7346 100644
--- a/frontend/src/metabase/tutorial/PageFlag.css
+++ b/frontend/src/metabase/tutorial/PageFlag.css
@@ -19,6 +19,8 @@
line-height: 24px;
transition: left 0.5s ease-in-out, top 0.5s ease-in-out;
+
+ z-index: 5;
}
.PageFlag:before,