Bootstrap-table: Bootstrap-table.css v13.4 is not loading in ASP.NET 4.6

Created on 15 Feb 2019  路  4Comments  路  Source: wenzhixin/bootstrap-table

I updated from 1.13.2 to 1.13.4 and now with version 1.13.4 the table header row shows only column names - no styling or icons.

The first thing I noticed was styling was gone for the table, and no longer shows sort icons.
From what I can see in IE or Chrome, the bootstrap-table.css version 1.13.4 does not load in a VS2017/ASP.NET 4.6 .aspx web page.

Reproduce:
Viewing the web-page in VS 2017, with versions 1.13.2:
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.2/bootstrap-table.min.js

  1. Load page
  2. The table shows with selected styling - showing the bootstrap-table sort icons.
  3. In the IE Debugger DOM Explorer, Pick a column Header - it will show as this for example:
    <div class="th-inner sortable both">Id</div>
  4. Viewing in the right-pane with Styles tab selected, it will show the respective classes that apply:
    .fixed-table-container thead th .both and other bootstrap-table css styles are shown.

Changing the bootstrap-table versions to 1.13.4 for CSS and JS:
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.4/bootstrap-table.css
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.4/bootstrap-table.min.js
Repeat after changing the versions to 1.13.4

  1. Reloading the page, Styling and sort icons are missing.
  2. Selecting a table column in the DOM Explorer
  3. Viewing the Styles tab - there are NO entries for bootstrap-table anywhere on styles tab for column names or anywhere on the page.

I created a VS2017 to test the respective versioned pages - but it was too big to upload here.
I did upload the .aspx pages: Create an empty ASP.NET Forms website in Visual Studio*, and add the attached pages to it. Right-click on one page, and set as default startup and run site.
*(Visual Studio Community edition is a free download at https://visualstudio.microsoft.com/downloads/)
These Test pages Test1_13_2.aspx and Test1_13_4.aspx are code identical except for the version of bootstrap-table referenced as above, and clearly show the Test1_13_4.aspx page does not load the bootstrap-table.css file.
SampleASP.NETTestPages.zip

Update - I created and uploaded the project to my repository so you can run it provided you have VS2017 or newer... (might load on older, not sure - but as mentioned above, VS2017 Community version is free) - and I deleted a MS package component, too big to upload - use package manager to re-install it...
https://github.com/mnswiftone/BootstrapTableVersionTest

Thanks!
Todd

help-wanted

Most helpful comment

In the example provided data-classes does not include .table which is why the table isn't rendering correctly. Previous to 1.13.4 it looks like everything still rendered correctly without .table.

1.13.2

.fixed-table-container thead th .both {
    background-image: url(...);
}

1.13.4

.bootstrap-table .fixed-table-container .table thead th .both {
    background-image: url(...);
}

The solution is to include .table in your data-classes

<table id="table" style="width:80%;"
                    data-toggle="table" 
                    data-search="true"
                    data-classes="table table-sm table-bordered table-striped table-hover"
                    data-thead-classes="thead-light"
                    data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
                    data-query-params="queryParams"
                    data-side-pagination="server"
                    data-pagination="true"
                    data-page-size="20"
                    data-page-list="[20, 50, 100, 200, 500]"
                    data-height="555">

All 4 comments

Sorry, I am not familiar with ASP.NET, can you provide a jsFiddle to show your problem?

In the example provided data-classes does not include .table which is why the table isn't rendering correctly. Previous to 1.13.4 it looks like everything still rendered correctly without .table.

1.13.2

.fixed-table-container thead th .both {
    background-image: url(...);
}

1.13.4

.bootstrap-table .fixed-table-container .table thead th .both {
    background-image: url(...);
}

The solution is to include .table in your data-classes

<table id="table" style="width:80%;"
                    data-toggle="table" 
                    data-search="true"
                    data-classes="table table-sm table-bordered table-striped table-hover"
                    data-thead-classes="thead-light"
                    data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
                    data-query-params="queryParams"
                    data-side-pagination="server"
                    data-pagination="true"
                    data-page-size="20"
                    data-page-list="[20, 50, 100, 200, 500]"
                    data-height="555">

Thanks Greg,

For like a year now I've been coding tables as

Glad to see wenzhixin added table then, so it better matches bootstrap's design.
Sorry about the confusion - just never hit me it was that simple... and well, it did work in 1.13.2... LOL

Great @mnswiftone.
If you like Bootstrap Table, give us a star! 猸愶笍猸愶笍猸愶笍 Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

thibaultvanc picture thibaultvanc  路  20Comments

thongkekienthuc12 picture thongkekienthuc12  路  16Comments

marccollin picture marccollin  路  15Comments

marcelod picture marcelod  路  16Comments

typo3ua picture typo3ua  路  23Comments