diff --git a/app/scripts/framework/views/scrollable.js b/app/scripts/framework/views/scrollable.js
index 283eab0e..d7588071 100644
--- a/app/scripts/framework/views/scrollable.js
+++ b/app/scripts/framework/views/scrollable.js
@@ -43,8 +43,8 @@ const Scrollable = {
requestAnimationFrame(() => {
if (this.scroll) {
this.scroll.update();
- const barHeight = this.scrollerBar.height();
- const wrapperHeight = this.scrollerBarWrapper.height();
+ const barHeight = Math.round(this.scrollerBar.height());
+ const wrapperHeight = Math.round(this.scrollerBarWrapper.height());
this.scrollerBarWrapper.toggleClass('invisible', barHeight >= wrapperHeight);
}
});
diff --git a/app/scripts/views/import-csv-view.js b/app/scripts/views/import-csv-view.js
index 6a97b44b..c46209c1 100644
--- a/app/scripts/views/import-csv-view.js
+++ b/app/scripts/views/import-csv-view.js
@@ -33,9 +33,9 @@ class ImportCsvView extends View {
super(model, options);
this.appModel = options.appModel;
this.fileName = options.fileName;
- this.initScroll();
this.guessFieldMapping();
this.fillGroups();
+ this.initScroll();
}
render() {
@@ -47,10 +47,19 @@ class ImportCsvView extends View {
});
this.createScroll({
root: this.$el.find('.import-csv__body')[0],
- scroller: this.$el.find('.scroller')[0],
- bar: this.$el.find('.scroller__bar')[0]
+ scroller: this.$el.find('.import-csv__body > .scroller')[0],
+ bar: this.$el.find('.import-csv__body > .scroller__bar-wrapper > .scroller__bar')[0]
});
this.pageResized();
+ if (!this.scroll._update) {
+ this.scroll._update = this.scroll.update;
+ this.scroll.update = this.scrollUpdate.bind(this);
+ }
+ }
+
+ scrollUpdate() {
+ this.scroller.css({ width: 'auto', minWidth: 'auto', maxWidth: 'auto' });
+ this.scroll._update();
}
returnToApp() {
diff --git a/app/styles/areas/_import-csv.scss b/app/styles/areas/_import-csv.scss
index 4d1aa538..d30c86d9 100644
--- a/app/styles/areas/_import-csv.scss
+++ b/app/styles/areas/_import-csv.scss
@@ -20,11 +20,15 @@
}
}
+ &__table-wrap {
+ overflow-x: auto;
+ width: calc(100vw - #{$base-padding-h * 3});
+ max-width: calc(100vw - #{$base-padding-h * 3});
+ @include scrollbar-on-hover;
+ }
+
&__table {
border-collapse: collapse;
- width: calc(100vw - #{$base-padding-h * 2});
- max-width: calc(100vw - #{$base-padding-h * 2});
- overflow: hidden;
td, th {
text-align: left;
padding: $base-padding;
diff --git a/app/templates/import-csv.hbs b/app/templates/import-csv.hbs
index ee837da5..006c0c43 100644
--- a/app/templates/import-csv.hbs
+++ b/app/templates/import-csv.hbs
@@ -7,41 +7,45 @@