Replies

• allan Posts: 61,665Questions: 1Answers: 10,096 Site admin

  September 2019

  Hi,

  Thanks for the feedback.

  The default/native styling of DT/DTE looks way better to me than the bootstrap-integrated styling

  Running the following on this page:

      $('#example').on( 'click', 'tbody td', function (e) {
          editor.inline( this );
      } );
  

  looks fairly good to me. Can you give me a link to a page showing the issue please?

  The same weird orange border situation occurs in the Bootstrap-integrated styling

  The orange border will appear when you are doing a "hard edit" (arrow keys will move the I beam in the input element), while a blue border will move the cell focus. This is somewhat similar to how Excel works, although we show it slightly differently.

  The "cellspacing = 0" makes such a HUGE improvement in the visual display as your tab between columns

  It shouldn't be required as the stylesheet includes:

  border-spacing: 0;
  

  for the table. Again, could you give me an example showing that issue as it sounds like something is going wrong here.

  Ought the entire row be selected when a cell is "focused" during an inline edit?

  I'd say no. It does in the little example I gave above, but that's because its not really designed for inline editing - the console line I gave adds it. I recommend this approach when you want to have whole row selection as well as inline editing (i.e. use a checkbox for the row selection).

  If you have Bootstrap on your page, can you fire up DT/DTE instances without them being affected by Bootstrap?

  Yes - don't use the Bootstrap classes for the table and don't load the DataTables / Bootstrap integration and do load DataTables own stylesheet. Note that you can't have multiple DataTables on a page using different styling (i.e. one which is bootstrap styles and one which is DataTabels styled).

  Allan
• rldean1 Posts: 141Questions: 66Answers: 1

  September 2019

  Okay, @allan

  I was able to replicate it for both the default styling, and bootstrap.

  How do I stop the orange and blue borders, and acheive a style closer to what your examples show? Am I doing this right?

  Inline Edit orange and blue borders on focus:

  Default style
  http://live.datatables.net/xomuxuxe/2/edit?html,js,output

  Boostrap integrated style
  http://live.datatables.net/duroceno/1/edit?html,js,output
• allan Posts: 61,665Questions: 1Answers: 10,096 Site admin

  September 2019

  The border (blue / orange) on the cell comes from KeyTable. If you don't want that, then just remove KeyTable.

  If you do want KeyTable (keyboard navigation of the table a la Excel) but don't want the input element to look so different inside the cell, look at this example. Click the CSS tab below the table to see the little bit of CSS that is used to customise the input element.

  Regards,
  Allan
• rldean1 Posts: 141Questions: 66Answers: 1

  September 2019

  Thank you!

  Also, I found that you I can set className to '', and that worked too!?

  (Don't know if that's proper or not)

                              keys: {
                                  columns: ':not(:first-child)',
                                  keys: [9],
                                  editor: w.dteCluster,
                                  editOnFocus: true,
                                  className: ''
                              },
  
  
• allan Posts: 61,665Questions: 1Answers: 10,096 Site admin

  September 2019

  Didn't expect that one really, but yes, it makes sense that it would work since there is no class applied and the bordering is done by class name.

  Allan