Skip to content

Commit

Permalink
fix(ui5-flexible-column-layout): Fix arrow misplacement in IE (#2032)
Browse files Browse the repository at this point in the history
Fixes: #1998
  • Loading branch information
ilhan007 authored Aug 3, 2020
1 parent 7f99be5 commit 57be7c2
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 1 deletion.
2 changes: 1 addition & 1 deletion packages/fiori/src/FlexibleColumnLayout.hbs
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="ui5-fcl-root">
<div class="{{classes.root}}">
<div
role="region"
class="{{classes.columns.start}}"
Expand Down
5 changes: 5 additions & 0 deletions packages/fiori/src/FlexibleColumnLayout.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
import { isIE } from "@ui5/webcomponents-base/dist/Device.js";
import Button from "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents-icons/dist/icons/slim-arrow-left.js";
import "@ui5/webcomponents-icons/dist/icons/slim-arrow-right.js";
Expand Down Expand Up @@ -490,6 +491,10 @@ class FlexibleColumnLayout extends UI5Element {
const hasAnimation = getAnimationMode() !== AnimationMode.None;

return {
root: {
"ui5-fcl-root": true,
"ui5-fcl--ie": isIE(),
},
columns: {
start: {
"ui5-fcl-column": true,
Expand Down
9 changes: 9 additions & 0 deletions packages/fiori/src/themes/FlexibleColumnLayout.css
Original file line number Diff line number Diff line change
Expand Up @@ -100,3 +100,12 @@
.ui5-fcl-arrow:hover:after {
height: 7rem;
}

/*
* IE FIX:
* The column separator, that is also the arrow container, is 1rem,
* whereas the arrow button is 1.5rem and the arrows just doesnt center within the
*/
.ui5-fcl--ie .ui5-fcl-arrow {
margin: 0 -0.75rem;
}

0 comments on commit 57be7c2

Please sign in to comment.