RetroSearch Browse

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

Showing content from https://github.com/bootstrap-vue/bootstrap-vue/commit/fa977a83cf21dd118e30f81aacf80d1c25b5c484 below:

allow `responsive` and `stacked` props together (#6266) · bootstrap-vue/bootstrap-vue@fa977a8 · GitHub

File tree Expand file treeCollapse file tree 4 files changed

+56

-35

lines changed

Filter options

Expand file treeCollapse file tree 4 files changed

+56

-35

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


 @@ -349,8 +349,8 @@ details.

349 349


 | `no-footer-sorting` | Boolean | When `foot-clone` is true and the table is sortable, disables the sorting icons and click behaviour on the footer heading cells. Refer to the [Sorting](#sorting) section below for more details. |

350 350


 | `no-border-collapse` | Boolean | Disables the default of collapsing of the table borders. Mainly for use with [sticky headers](#sticky-headers) and/or [sticky columns](#sticky-columns). Will cause the appearance of double borders in some situations. |

351 351 352

-
 **Note:** table style options `fixed`, `stacked`, `caption-top`, `no-border-collapse`, sticky

353

-
 headers, sticky columns, and the table sorting feature, all require BootstrapVue's custom CSS.

352

+
 **Note:** The table style options `fixed`, `stacked`, `caption-top`, `no-border-collapse`, sticky

353

+
 headers, sticky columns and the table sorting feature, all require BootstrapVue's custom CSS.

354 354 355 355


 **Example: Basic table styles**

356 356


 @@ -609,8 +609,8 @@ breakpoint values `'sm'`, `'md'`, `'lg'`, or `'xl'`.

609 609


 Column header labels will be rendered to the left of each field value using a CSS `::before` pseudo

610 610


 element, with a width of 40%.

611 611 612

-
 The prop `stacked` takes precedence over the `responsive` prop, [`sticky-header`](#sticky-headers)

613

-
 props, and the [`stickyColumn`](#sticky-columns) field definition property.

612

+
 The `stacked` prop takes precedence over the [`sticky-header`](#sticky-headers) prop and the

613

+
 [`stickyColumn`](#sticky-columns) field definition property.

614 614 615 615


 **Example: Always stacked table**

616 616


 @@ -1402,8 +1402,8 @@ set.

1402 1402


 wrapped inside a horizontally scrollable `<div>`.

1403 1403


 - When you have multiple columns that are set as `stickyColumn`, the columns will stack over each

1404 1404


 other visually, and the left-most sticky columns may "peek" out from under the next sticky column.

1405

-
 To get around this behaviour, make sure your latter stickyColumns are the same width or wider than

1406

-
 previous sticky columns.

1405

+
 To get around this behaviour, make sure your latter sticky columns are the same width or wider

1406

+
 than previous sticky columns.

1407 1407


 - Bootstrap v4 uses the CSS style `border-collapse: collapsed` on table elements. This prevents any

1408 1408


 borders on the sticky columns from "sticking" to the column, and hence those borders will scroll

1409 1409


 when the body scrolls. To get around this issue, set the prop `no-border-collapse` on the table

Original file line number Diff line number Diff line change


 @@ -51,9 +51,8 @@ export const tableRendererMixin = Vue.extend({

51 51


 computed: {

52 52


 // Layout related computed props

53 53


 isResponsive() {

54

-
 let { responsive } = this

55

-
 responsive = responsive === '' ? true : responsive

56

-
 return this.isStacked ? false : responsive

54

+
 const { responsive } = this

55

+
 return responsive === '' ? true : responsive

57 56

},

58 57


 isStickyHeader() {

59 58


 let { stickyHeader } = this

Original file line number Diff line number Diff line change


 @@ -225,9 +225,12 @@ describe('table-lite', () => {

225 225


 expect(wrapper.element.tagName).toBe('DIV')

226 226


 expect(wrapper.classes()).toContain('table-responsive')

227 227


 expect(wrapper.classes().length).toBe(1)

228

-
 expect(wrapper.find('table').classes()).toContain('table')

229

-
 expect(wrapper.find('table').classes()).toContain('b-table')

230

-
 expect(wrapper.find('table').classes().length).toBe(2)

228 + 229

+
 const $table = wrapper.find('table')

230

+
 expect($table.exists()).toBe(true)

231

+
 expect($table.classes()).toContain('table')

232

+
 expect($table.classes()).toContain('b-table')

233

+
 expect($table.classes().length).toBe(2)

231 234 232 235


 wrapper.destroy()

233 236

})


 @@ -245,14 +248,17 @@ describe('table-lite', () => {

245 248


 expect(wrapper.element.tagName).toBe('DIV')

246 249


 expect(wrapper.classes()).toContain('table-responsive-md')

247 250


 expect(wrapper.classes().length).toBe(1)

248

-
 expect(wrapper.find('table').classes()).toContain('table')

249

-
 expect(wrapper.find('table').classes()).toContain('b-table')

250

-
 expect(wrapper.find('table').classes().length).toBe(2)

251 + 252

+
 const $table = wrapper.find('table')

253

+
 expect($table.exists()).toBe(true)

254

+
 expect($table.classes()).toContain('table')

255

+
 expect($table.classes()).toContain('b-table')

256

+
 expect($table.classes().length).toBe(2)

251 257 252 258


 wrapper.destroy()

253 259

})

254 260 255

-
 it('stacked has precedence over responsive', async () => {

261

+
 it('stacked and responsive work together', async () => {

256 262


 const wrapper = mount(BTableLite, {

257 263


 propsData: {

258 264


 items: items1,


 @@ -263,12 +269,16 @@ describe('table-lite', () => {

263 269

})

264 270 265 271


 expect(wrapper).toBeDefined()

266

-
 expect(wrapper.element.tagName).toBe('TABLE')

267

-
 expect(wrapper.classes()).not.toContain('table-responsive')

268

-
 expect(wrapper.classes()).toContain('b-table-stacked')

269

-
 expect(wrapper.classes()).toContain('table')

270

-
 expect(wrapper.classes()).toContain('b-table')

271

-
 expect(wrapper.classes().length).toBe(3)

272

+
 expect(wrapper.element.tagName).toBe('DIV')

273

+
 expect(wrapper.classes()).toContain('table-responsive')

274

+
 expect(wrapper.classes().length).toBe(1)

275 + 276

+
 const $table = wrapper.find('table')

277

+
 expect($table.exists()).toBe(true)

278

+
 expect($table.classes()).toContain('table')

279

+
 expect($table.classes()).toContain('b-table')

280

+
 expect($table.classes()).toContain('b-table-stacked')

281

+
 expect($table.classes().length).toBe(3)

272 282 273 283


 wrapper.destroy()

274 284

})


 @@ -281,6 +291,7 @@ describe('table-lite', () => {

281 291


 stacked: true

282 292

283 293

})

294 + 284 295


 expect(wrapper).toBeDefined()

285 296


 expect(wrapper.findAll('tbody > tr').length).toBe(2)

286 297


 const $trs = wrapper.findAll('tbody > tr').wrappers

Original file line number Diff line number Diff line change


 @@ -286,9 +286,12 @@ describe('table', () => {

286 286


 expect(wrapper.element.tagName).toBe('DIV')

287 287


 expect(wrapper.classes()).toContain('table-responsive')

288 288


 expect(wrapper.classes().length).toBe(1)

289

-
 expect(wrapper.find('table').classes()).toContain('table')

290

-
 expect(wrapper.find('table').classes()).toContain('b-table')

291

-
 expect(wrapper.find('table').classes().length).toBe(2)

289 + 290

+
 const $table = wrapper.find('table')

291

+
 expect($table.exists()).toBe(true)

292

+
 expect($table.classes()).toContain('table')

293

+
 expect($table.classes()).toContain('b-table')

294

+
 expect($table.classes().length).toBe(2)

292 295 293 296


 wrapper.destroy()

294 297

})


 @@ -306,14 +309,17 @@ describe('table', () => {

306 309


 expect(wrapper.element.tagName).toBe('DIV')

307 310


 expect(wrapper.classes()).toContain('table-responsive-md')

308 311


 expect(wrapper.classes().length).toBe(1)

309

-
 expect(wrapper.find('table').classes()).toContain('table')

310

-
 expect(wrapper.find('table').classes()).toContain('b-table')

311

-
 expect(wrapper.find('table').classes().length).toBe(2)

312 + 313

+
 const $table = wrapper.find('table')

314

+
 expect($table.exists()).toBe(true)

315

+
 expect($table.classes()).toContain('table')

316

+
 expect($table.classes()).toContain('b-table')

317

+
 expect($table.classes().length).toBe(2)

312 318 313 319


 wrapper.destroy()

314 320

})

315 321 316

-
 it('stacked has precedence over responsive', async () => {

322

+
 it('stacked and responsive work together', async () => {

317 323


 const wrapper = mount(BTable, {

318 324


 propsData: {

319 325


 items: items1,


 @@ -324,12 +330,16 @@ describe('table', () => {

324 330

})

325 331 326 332


 expect(wrapper).toBeDefined()

327

-
 expect(wrapper.element.tagName).toBe('TABLE')

328

-
 expect(wrapper.classes()).not.toContain('table-responsive')

329

-
 expect(wrapper.classes()).toContain('b-table-stacked')

330

-
 expect(wrapper.classes()).toContain('table')

331

-
 expect(wrapper.classes()).toContain('b-table')

332

-
 expect(wrapper.classes().length).toBe(3)

333

+
 expect(wrapper.element.tagName).toBe('DIV')

334

+
 expect(wrapper.classes()).toContain('table-responsive')

335

+
 expect(wrapper.classes().length).toBe(1)

336 + 337

+
 const $table = wrapper.find('table')

338

+
 expect($table.exists()).toBe(true)

339

+
 expect($table.classes()).toContain('table')

340

+
 expect($table.classes()).toContain('b-table')

341

+
 expect($table.classes()).toContain('b-table-stacked')

342

+
 expect($table.classes().length).toBe(3)

333 343 334 344


 wrapper.destroy()

335 345

})


 @@ -342,6 +352,7 @@ describe('table', () => {

342 352


 stacked: true

343 353

344 354

})

355 + 345 356


 expect(wrapper).toBeDefined()

346 357


 expect(wrapper.findAll('tbody > tr').length).toBe(2)

347 358


 const $trs = wrapper.findAll('tbody > tr').wrappers

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