Semantic UI and Editor seem to be not a good couple together

minifiredragon

I do not know how to give a live example as the Editor is not available via CDN to link to the live editor. However, I am having a problem controlling the inline field width when a cell is edited.

The best way to describe it is, if the table's column header is 2 letters:

<table>
     <thead>
          <tr>
               <th>CT</th>
          <tr>
     </thead>
</table>

When you click in the cell to edit it, nothing is shown. I can add a few more letters to the name, and it will then start to show data. I have tried a bunch of semantic css as well as:

{
targets:[0],
width: "50%"
},

But nothing seems to fix it until I remove the "form" class from the cell, which at that point it turns it into datatables input field.

colin

I just tried it here, and it seems to work OK - I changed "Age" to be "Ag". Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

minifiredragon

That is not right. The datatables CSS is taking over vs Semantic UI, so the input fields are not created by Semantic UI.

I tried to make it work with:
http://live.datatables.net/haxiseyu/1/edit
But now the editor is broken, not sure what I messed up (could be the editor I left has the semantic UI in with it)

However, I did find a method to fix the issue, but I am not sure it is something that should be fixed in the editor for really small columns. The fix I used was:

div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type="text"]
{
    min-width: 50px !important;
}

If the semantic ui can be fixed in the above link, you should easily see what I am talking about with the input field.

minifiredragon

The link above did not save to the correct place, here is the correct one:

http://live.datatables.net/vawirizo/1/edit

allan

Try this one: http://live.datatables.net/xebagasi/2/edit

Its the same as Colin's, but with the editor.semanticui.min.js file included, which was accidentally forgotten (it includes the class overrides needed to make use of Semantic UI styling in Editor).

Allan

minifiredragon

That works. To make the effect I am running into spread the html view just enough so that columns are formed (not sure if the view I see is saved). At that point click in the Ag column and you will see the effect I am talking about.

http://live.datatables.net/xebagasi/4/

I see it is not as noticeable when the table is already small and fits on the screen, but when you have a large column table that keeps the column width as small as possible, that is where the issue really shines.

If you are looking at the autoWidth: false, setting I put in the table, I have already tried not having that on a larger table and it makes no difference. I put it in here to make it easier to get the same effect on a small table.