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 @@
- - - - {{#each headers as |header|}} - - {{/each}} - - - {{#each fieldMapping as |mapped|}} - - {{/each}} - - - - {{#each rows as |row|}} - - {{#each row as |field|}} - +
+
+
{{header}}
- -
{{field}}
+ + + {{#each headers as |header|}} + + {{/each}} + + + {{#each fieldMapping as |mapped|}} + + {{/each}} + + + + {{#each rows as |row|}} + + {{#each row as |field|}} + + {{/each}} + {{/each}} - - {{/each}} - -
{{header}}
+ +
{{field}}
+ + +
+