when using uitheme the column widths are all the same

[JohnSmall]

Problem. I have a table with different column widths, I set the widths as percentages in the tags. if I don't use the uitheme then it works fine. If I do use the uithem (in this case bootstrap_3) then the columns are forced to be all the same width.

If I set the theme to bootstrap, e.g.

  $.tablesorter.themes.bootstrap = {
      etc, etc
       iconSortAsc  : 'glyphicon glyphicon-chevron-up',
       iconSortDesc : 'glyphicon glyphicon-chevron-down', 
      }
   tablesorter(
    {
      theme : "bootstrap",
      headerTemplate : '{content} {icon}',
    widgets: ['uitheme', 'stickyHeaders', 'filter', 'zebra'],
   etc

then the column headers get up and down glyphicons but the columns are all the same size

If I set the theme to bootstrap but don't set 'uitheme'

 tablesorter(
    {
      theme : "bootstrap",
      headerTemplate : '{content} {icon}',
    widgets: ['stickyHeaders', 'filter', 'zebra'],
   etc

then the column widths are as they should be, and I get some styling, it adds .tablesorter-bootstrap to the table, but I don't get the up and down glyphicons. I.e. it doesn't add those classes to the icon tag.

If I force the width of the columns by adding some css to force a fixed width to the filter inputs, then the columns do start wider. But only for a fraction of a second, then the 'uitheme' code takes over and forces the columns to be all equal sized.

[Mottie]

Hi @JohnSmall!

I'm not seeing the same issue. I set up this demo using Bootstrap v3, and when I adjust the result panel, the first two columns resize as expected.

If you're using Bootstrap v4, you won't need the "uitheme" widget - here's a demo. Make sure to use the theme.bootstrap_4.css file along with Bootstrap's css. Also, check out the main Bootstrap v4 demo.

[JohnSmall]

Is that because it's sizing the columns according to the maximum size of the text? For me that's no good because my widest field has text that breaks and wraps on spaces. I that case the width calculation sets the width to the longest word.

To get the fields to fit the sizes I want them to I set the column widths with the usual width=x% and it works when not using uitheme but gets ignored if and only if I'm using uitheme.

I got a workaround running so I'm not too much concerned about this now.

Without uitheme the up and down arrows for sorting aren't added, but it does set the classes to indicate the sort direction. So I just created some css classes with glyphicons to match the classes for the sort directions and it's OK now.

[Mottie]

sizing the columns according to the maximum size of the text

Yes, this is true, but you could set a max-width on the column to prevent that. You might also need to set the text to wrap inside the cell using css word-break, overflow-wrap and/or white-space settings.