Datatables and Semantic wide previous and show controls

adviner

I went to https://datatables.net/download/index and download the libs using the following options:

Styling Framework: Semantic UI
Select Packages: DataTables
Extensions: AutoFill, Buttons, ColReorder, FixedColumns, FixedHeaders, KeyTable, Responsive, RowGroup, Scroller, Select.

Added the following recomended style and script

<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>

The table shows up but the "Previous" button and "Show" drop down are too wide:

Here is how I initialize the code:

var gridAccounts = $('#gridAccounts').DataTable({
  select: true,
  ordering: true,
  paging: true,
  searching: false,
  bFilter: false,
  responsive: true,
  bInfo: false,
  data: [],
  rowId: 'id',
  columns: [
    { data: 'id', title: 'ID' },
    { data: 'first_name', title: 'First Name' },
    { data: 'last_name', title: 'Last Name' },
    //{ data: 'email', title: 'Email' },
    { data: 'type', title: 'Security Type' },
    { data: 'account', title: 'Account'},
    { data: 'status', title: 'Status'}
  ],
  columnDefs:[
    { targets: [0], visible: false }
  ]
});

allan

It appears to work okay here.

Could you give me a link to your page so I can check it out please?

Thanks,
Allan

adviner

Ive seen that and tried followed the sample there. Unfortunately its only in development right now and is not available outside of my laptop right now.

Thanks for offering to help

adviner

Is there a css to control those fields style? That way I can investigate on my end

allan

Not as far as I am aware. What version of Semantic UI are you using?

Allan

adviner

Its version
"version": "2.2.13"
which is part of my Vue project

allan

I've just tried building a simple example: http://live.datatables.net/cudetita/1/edit .

That also appears to work no problem.

I'd need a link to a test case showing the issue to be able to offer any help. My guess is that there is some other stylesheet which is adding styles causing the issue, but without a test case it is impossible to say.

Allan

adviner

Thank you. That is what I was thinking also. I will do some checking on the styles I have to see

adviner

I'm using chrome to analyze the css and wondering why the show control has class "eight wide" columns? Seems a bit wide. If I change it to something smaller like four it looks a lot better.

Tester2017

I think your problem is here:
[..]
Added the following recomended style and script
<link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>
[..]

Because the styles are also generated by the builder and if you change something in the order of the style sheets you will get unpredictable results.

So if you use the builder you have to copy not only the js part, but also the css part.

In your case you needed to use:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/se/dt-1.10.16/af-2.2.2/b-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/kt-2.3.2/r-2.2.0/rg-1.0.2/sc-1.4.3/sl-1.2.3/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/se/dt-1.10.16/af-2.2.2/b-1.4.2/cr-1.4.1/fc-3.2.3/fh-3.1.3/kt-2.3.2/r-2.2.0/rg-1.0.2/sc-1.4.3/sl-1.2.3/datatables.min.js"></script>

But if I am wrong, sorry for that, but I based my response on the information you were giving.

adviner

Sorry I didnt put that information. Yes I do have the js files.

<link rel="stylesheet" type="text/css" href="./static/libs/semantic-ui/dist/semantic.min.css">
<link rel="stylesheet" type="text/css" href="./static/libs/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="./static/libs/toastr/build/toastr.css">
<link rel="stylesheet" type="text/css" href="./static/css/flexboxgrid2.css">
<link rel="stylesheet" type="text/css" href="./static/libs/DataTables/datatables.min.css"/>


...
..

<script type="text/javascript" src="./static/libs/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="./static/libs/semantic-ui/dist/semantic.min.js"></script>
<script type="text/javascript" src="./static/libs/DataTables/datatables.min.js"></script>
<script type="text/javascript" src="./static/libs/toastr/build/toastr.min.js"></script>

allan

wondering why the show control has class "eight wide" columns? Seems a bit wide. If I change it to something smaller like four it looks a lot better.

Its just to split the area above the table in half - half to the left, half to the right. It isn't required, but it shouldn't make any difference.

Allan

adviner

In chrome if I change that class to "four" it makes the width smaller

allan

It will make the container smaller certainly - which might result in the other styles being effected. However, given that the two demos I've put together don't appear to demonstrate this issue and I've not otherwise been able to see the problem to debug it, I'm not yet sure what is causing it, nor how to resolve it properly.

Allan

adviner

Thanks Allan. I will look at my end to see what is causing that

adviner

I just want to give an update. If I use DataTables styling framework and not the Semantic-UI styling framework everything looks correct. So for the meantime I will just the DataTables framework

allan

Fair enough - thanks for posting back. If you ever go back to it let me know if you are able to get a test case up showing the issue.

Allan