RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/vuematerial/vue-material/commit/b14aac3 below:

make fixed header follow the horizontal scroll (#1575) · vuematerial/vue-material@b14aac3 · GitHub

File tree Expand file treeCollapse file tree 2 files changed

+59

-5

lines changed

Filter options

Expand file treeCollapse file tree 2 files changed

+59

-5

lines changed Original file line number Diff line number Diff line change


 @@ -9,13 +9,15 @@

9 9


 </keep-alive>

10 10 11 11


 <div class="md-table-fixed-header" :class="headerClasses" :style="headerStyles" v-if="mdFixedHeader">

12

-
 <table>

13

-
 <md-table-thead />

14

-
 </table>

12

+
 <div class="md-table-fixed-header-container" ref="fixedHeaderContainer" @scroll="setHeaderScroll">

13

+
 <table :style="fixedHeaderTableStyles">

14

+
 <md-table-thead />

15

+
 </table>

16

+
 </div>

15 17


 </div>

16 18 17 19


 <md-content class="md-table-content md-scrollbar" :class="contentClasses" :style="contentStyles" @scroll="setScroll">

18

-
 <table>

20

+
 <table ref="contentTable">

19 21


 <md-table-thead :class="headerClasses" v-if="!mdFixedHeader && $scopedSlots['md-table-row']" />

20 22 21 23


 <tbody v-if="!$scopedSlots['md-table-row']">


 @@ -60,6 +62,7 @@

60 62


  import MdTableRow from './MdTableRow'

61 63


  import MdTableRowGhost from './MdTableRowGhost'

62 64


  import MdTableCellSelection from './MdTableCellSelection'

65

+
  import MdResizeObserver from 'core/utils/MdResizeObserver'

63 66 64 67


  const getObjectAttribute = (object, key) => {

65 68


  let value = object


 @@ -127,6 +130,8 @@

127 130

},

128 131


  data () {

129 132


  return {

133

+
  windowResizeObserver: null,

134

+
  fixedHeaderTableWidth: 0,

130 135


  fixedHeaderPadding: 0,

131 136


  hasContentScroll: false,

132 137


  MdTable: {


 @@ -190,6 +195,11 @@

190 195


  if (this.mdFixedHeader && this.value.length === 0) {

191 196


  return `md-table-empty`

192 197

198

+
  },

199

+
  fixedHeaderTableStyles () {

200

+
  return {

201

+
  width: this.fixedHeaderTableWidth + 'px'

202

+
  }

193 203

194 204

},

195 205


  provide () {


 @@ -262,9 +272,18 @@

262 272

},

263 273


  setScroll ($event) {

264 274


  raf(() => {

275

+
  if (this.mdFixedHeader) {

276

+
  this.$refs.fixedHeaderContainer.scrollLeft = $event.target.scrollLeft

277

+
  }

278 + 265 279


  this.hasContentScroll = $event.target.scrollTop > 0

266 280

})

267 281

},

282

+
  setHeaderScroll ($event) {

283

+
  raf(() => {

284

+
  this.MdTable.contentEl.scrollLeft = $event.target.scrollLeft

285

+
  })

286

+
  },

268 287


  getContentEl () {

269 288


  return this.$el.querySelector('.md-table-content')

270 289

},


 @@ -307,6 +326,11 @@

307 326


  } else if (this.MdTable.selectingMode === 'multiple') {

308 327


  this.MdTable.selectedItems = this.mdSelectedValue || []

309 328

329

+
  },

330

+
  setWidth () {

331

+
  if (this.mdFixedHeader) {

332

+
  this.fixedHeaderTableWidth = this.$refs.contentTable.offsetWidth

333

+
  }

310 334

311 335

},

312 336


  created () {


 @@ -316,9 +340,16 @@

316 340

},

317 341


  mounted () {

318 342


  this.setContentEl()

343

+
  this.$nextTick().then(this.setWidth)

319 344 320 345


  if (this.mdFixedHeader) {

321 346


  this.setHeaderPadding()

347

+
  this.windowResizeObserver = new MdResizeObserver(window, this.setWidth)

348

+
  }

349

+
  },

350

+
  beforeDestroy () {

351

+
  if (this.windowResizeObserver) {

352

+
  this.windowResizeObserver.destroy()

322 353

323 354

324 355


 @@ -334,6 +365,18 @@

334 365 335 366


  .md-table-fixed-header {

336 367


  position: relative;

368 + 369

+
  .md-table-fixed-header-container {

370

+
  -webkit-box-flex: 1;

371

+
  flex: 1;

372

+
  overflow-x: auto;

373 + 374

+
  &::-webkit-scrollbar,

375

+
  &::-webkit-scrollbar-thumb,

376

+
  &::-webkit-scrollbar-button {

377

+
  display: none;

378

+
  }

379

+
  }

337 380

338 381 339 382


  .md-table-fixed-header-active {

Original file line number Diff line number Diff line change


 @@ -20,6 +20,7 @@

20 20 21 21


 <script>

22 22


  import MdUpwardIcon from 'core/icons/MdUpwardIcon'

23

+
  import MdResizeObserver from 'core/utils/MdResizeObserver'

23 24 24 25


  export default {

25 26


  name: 'MdTableHead',


 @@ -35,7 +36,8 @@

35 36

},

36 37


  inject: ['MdTable'],

37 38


  data: () => ({

38

-
  width: null

39

+
  width: null,

40

+
  windowResizeObserver: null

39 41

}),

40 42


  computed: {

41 43


  hasSort () {


 @@ -104,6 +106,15 @@

104 106

},

105 107


  mounted () {

106 108


  this.$nextTick().then(this.setWidth)

109 + 110

+
  if (this.MdTable.fixedHeader) {

111

+
  this.windowResizeObserver = new MdResizeObserver(window, this.setWidth)

112

+
  }

113

+
  },

114

+
  beforeDestroy () {

115

+
  if (this.windowResizeObserver) {

116

+
  this.windowResizeObserver.destroy()

117

+
  }

107 118

108 119

109 120


 </script>

You can’t perform that action at this time.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4