mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 17:28:26 -04:00
Fix IE11 bugs with Table and ToolBar. (#9943)
Backports PR #9928
**Commit 1:**
Fix IE11 bugs with Table and ToolBar.
- Make table-layout use the default, instead of fixed.
- Fix flexbox bug with ToolBar.
- Update ui_framework task to serve on port 8020.
- Add babel-core/polyfill to UI Framework docs site.
* Original sha: 54144129c9
* Authored by CJ Cenizal <cj@cenizal.com> on 2017-01-18T17:19:43Z
This commit is contained in:
jasper
CJ Cenizal
parent
e99670cac1
commit
3ec2ce801c
6 changed files with 81 additions and 26 deletions
|
|
@ -18,7 +18,9 @@ module.exports = function (grunt) {
|
|||
'--config=ui_framework/doc_site/webpack.config.js',
|
||||
'--hot ',
|
||||
'--inline',
|
||||
'--content-base=ui_framework/doc_site/build'
|
||||
'--content-base=ui_framework/doc_site/build',
|
||||
'--host=0.0.0.0',
|
||||
'--port=8020',
|
||||
],
|
||||
opts: { stdio: 'inherit' }
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
## Development
|
||||
|
||||
* Start development server `npm run uiFramework:start`.
|
||||
* View docs on `http://localhost:8080/`.
|
||||
* View docs on `http://localhost:8020/`.
|
||||
|
||||
## What is this?
|
||||
|
||||
|
|
|
|||
|
|
@ -113,29 +113,35 @@ $toolBarItsemSpacing: 10px;
|
|||
* 1. Put 10px of space between each child.
|
||||
* 2. If there is only one child, align it to the right. If you wanted it aligned right, you
|
||||
* wouldn't use the Bar in the first place.
|
||||
* 3. Children in the middle should center their content.
|
||||
* 4. Fix an IE bug which causes the last child to overflow the container.
|
||||
* 5. Fixing this bug means we now need to align the children to the right.
|
||||
*/
|
||||
@mixin barSection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
margin-left: $toolBarSectionSpacing * 0.5;
|
||||
margin-right: $toolBarSectionSpacing * 0.5;
|
||||
|
||||
&:not(:first-child):not(:last-child):not(:only-child) {
|
||||
justify-content: center; /* 3 */
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
flex: 0 1 auto; /* 4 */
|
||||
justify-content: flex-end; /* 5 */
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
margin-left: auto; /* 1 */
|
||||
}
|
||||
|
||||
& > * {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
& > * + * {
|
||||
margin-left: $toolBarItsemSpacing; /* 1 */
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@
|
|||
}
|
||||
|
||||
.kuiTable {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border: $tableBorder;
|
||||
border-collapse: collapse;
|
||||
|
|
|
|||
85
ui_framework/dist/ui_framework.css
vendored
85
ui_framework/dist/ui_framework.css
vendored
|
|
@ -6,6 +6,9 @@
|
|||
* 1. Put 10px of space between each child.
|
||||
* 2. If there is only one child, align it to the right. If you wanted it aligned right, you
|
||||
* wouldn't use the Bar in the first place.
|
||||
* 3. Children in the middle should center their content.
|
||||
* 4. Fix an IE bug which causes the last child to overflow the container.
|
||||
* 5. Fixing this bug means we now need to align the children to the right.
|
||||
*/
|
||||
* {
|
||||
box-sizing: border-box; }
|
||||
|
|
@ -36,20 +39,35 @@ body {
|
|||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
margin-left: 25px;
|
||||
margin-right: 25px; }
|
||||
.kuiBarSection:not(:first-child):not(:last-child):not(:only-child) {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
/* 3 */ }
|
||||
.kuiBarSection:first-child {
|
||||
margin-left: 0; }
|
||||
.kuiBarSection:last-child {
|
||||
margin-right: 0; }
|
||||
margin-right: 0;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
/* 4 */
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
/* 5 */ }
|
||||
.kuiBarSection:only-child {
|
||||
margin-left: auto;
|
||||
/* 1 */ }
|
||||
.kuiBarSection > * {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto; }
|
||||
.kuiBarSection > * + * {
|
||||
margin-left: 10px;
|
||||
/* 1 */ }
|
||||
|
|
@ -835,7 +853,6 @@ body {
|
|||
/* 2 */ }
|
||||
|
||||
.kuiTable {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border: 2px solid #E4E4E4;
|
||||
border-collapse: collapse;
|
||||
|
|
@ -996,20 +1013,35 @@ body {
|
|||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
margin-left: 25px;
|
||||
margin-right: 25px; }
|
||||
.kuiToolBarSection:not(:first-child):not(:last-child):not(:only-child) {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
/* 3 */ }
|
||||
.kuiToolBarSection:first-child {
|
||||
margin-left: 0; }
|
||||
.kuiToolBarSection:last-child {
|
||||
margin-right: 0; }
|
||||
margin-right: 0;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
/* 4 */
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
/* 5 */ }
|
||||
.kuiToolBarSection:only-child {
|
||||
margin-left: auto;
|
||||
/* 1 */ }
|
||||
.kuiToolBarSection > * {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto; }
|
||||
.kuiToolBarSection > * + * {
|
||||
margin-left: 10px;
|
||||
/* 1 */ }
|
||||
|
|
@ -1048,20 +1080,35 @@ body {
|
|||
-webkit-align-items: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
margin-left: 25px;
|
||||
margin-right: 25px; }
|
||||
.kuiToolBarFooterSection:not(:first-child):not(:last-child):not(:only-child) {
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
/* 3 */ }
|
||||
.kuiToolBarFooterSection:first-child {
|
||||
margin-left: 0; }
|
||||
.kuiToolBarFooterSection:last-child {
|
||||
margin-right: 0; }
|
||||
margin-right: 0;
|
||||
-webkit-box-flex: 0;
|
||||
-webkit-flex: 0 1 auto;
|
||||
-ms-flex: 0 1 auto;
|
||||
flex: 0 1 auto;
|
||||
/* 4 */
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
-ms-flex-pack: end;
|
||||
justify-content: flex-end;
|
||||
/* 5 */ }
|
||||
.kuiToolBarFooterSection:only-child {
|
||||
margin-left: auto;
|
||||
/* 1 */ }
|
||||
.kuiToolBarFooterSection > * {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex: 1 0 auto;
|
||||
-ms-flex: 1 0 auto;
|
||||
flex: 1 0 auto; }
|
||||
.kuiToolBarFooterSection > * + * {
|
||||
margin-left: 10px;
|
||||
/* 1 */ }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
require('./main.scss');
|
||||
|
||||
import 'babel-core/polyfill';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Provider } from 'react-redux';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue