Semantic UI: Style not applying to the Length Change Menu

daytonoutar

I have used Semantic UI styling with NPM before and it works well with DataTables.

However, for another project I decided to take the "Download" approach and bundle the features that I want.

When executing the necessary scripts, I found that the length change menu is not getting the Semantic UI styles applied to it. The wrapping div is not present. I went back and downloaded the bundle a second time and still presented with the same problem.

See screenshot below.

allan

Do you have the Semantic UI Javascript file being loaded? If you already do and it isn't working, can you link to a test case showing the issue please?

Allan

daytonoutar

Please find the JS file here,

http://162.245.96.92/js/datatables.min.js

Please find the CSS file here,

http://162.245.96.92/css/datatables.min.css

kthorngren

The above doesn't answer Allan's questions. Are you loading the JS and CSS files being loaded in this example?
https://datatables.net/examples/styling/semanticui.html

If you have the same include files can you provide a link to your code with the issue?

Kevin

daytonoutar

Please see the above files that are being loaded to bring the results shown in the screenshots.

These files have been downloaded from,
https://datatables.net/download/index

Using the "Download" tab option.

daytonoutar

Given that the downloaded files datatables.min.css and datatables.min.js (with the bundled options) have been loaded, the following can be done,

Use the following HTML,
<table id="paymentHistory" class="ui table"><thead><tr><th>Column 1</th></tr></thead><tbody></tbody></table>

With the following JS inside a script tag,
$('#paymentHistory').DataTable();

This will show up the problem.

kthorngren

If those are the only two Datatables files you are loading then you are missing some needed Datatables Semantic UI specific files for the styling. The example I linked to shows the following:

JS:

//code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.16/js/dataTables.semanticui.min.js
//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js

CSS:

//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css
https://cdn.datatables.net/1.10.16/css/dataTables.semanticui.min.css

The easiest way to get the needed files is to use the download builder:
https://datatables.net/download/index

Kevin

daytonoutar

I preferred the bundle (concatenate) but since you are insisting on this approach, I will try it.

allan

You can use those bundled files. However they do not include Semantic UI. You'd need to click the option to actually include Semantic UI in the bundle on the download page. When you click the Semantic UI option there will be another option shown allowing you to select to include Semantic UI itself (otherwise it will just include the DataTables integration files for Semantic UI).

My guess, although I can't say for sure without a test case, is that you have Semantic UI CSS included on your page with a <link>`, but not the Semantic UI JS file (fourth line of the JS includes Kevin shows).

So you have two options:

1. Include the Semantic UI JS in a similar way to how you are currently doing the CSS
2. Instruct the DataTables download builder to include all of Semantic UI and remove the current CSS include of Semantic UI on your page. No point in including it twice!

Allan

daytonoutar

I tried your suggestion. I will give it another try. See if something is overwriting the script to wrap the lengthMenu.

Here's what I have found.

After including the datatables.semanticui.min.css file,

And then including the following JS files (Given that jquery is loaded),

I got back the same result,

When commenting the line that loads the dataTables.semanticui.min.js file, only the info and paging responded (vice versa).

Compare that with the screenshot below when the dataTables.semanticui.min.js file is loaded back again,

Why would the the info and paging respond and the lengthMenu not respond when the dataTables.semanticui.min.js script is loaded?

kthorngren

I'm a bit confused about what you are looking for. The length menu input you have looks similar to what is shown at the Semantic UI page:
https://semantic-ui.com/elements/input.html

It also looks like the Semantic UI styling example:
https://datatables.net/examples/styling/semanticui.html

Can you post an image showing what you want it look like?

Kevin

daytonoutar

In another application of mine (where I used NPM). It looks like this,

When using the DOM inspector, you can see a wrapper,

In this application using the download method, it looks like this,

The wrapper cannot be found in this installation as shown in the DOM inspector below,

If that is the intended look and feel, then I will work with it.

allan

I think we'd need a link to the page to be able to debug it directly in this case. This example shows DataTables with the Semantic UI integration and the drop down uses the Semantic UI widget.

Allan

daytonoutar

[I was on a month vacation]
So, getting back to this project. I decided to remove jQuery 1.10.2, which caused the dataTables to restrict calls to Semantic-UI dropdown() function call.

Anyway, after downloading and referencing jQuery 1.12.4 based on the example, the dataTable was now able to make the function call to the dropdown function call and render aaccordingly.

Thanks for the support.