Answers

• allan Posts: 63,498Questions: 1Answers: 10,470 Site admin

  August 16

  1) With a little CSS:

  div.alphabet {
    width: 50%;
  }
  

  2) top2: null should do I think. Can you update the example to demonstrate this issue please?

  Thanks,
  Allan
• kthorngren Posts: 21,325Questions: 26Answers: 4,949

  August 16

  How do I set the alphabetSearch bar to be less than 100%.

  I inspected the alphabetSearch div element and it has this CSS:

  div.alphabet {
      font-family: "Roboto Mono", Verdana, "sans-serif";
      font-size: var(--table-font-size);
      line-height: 20px;
      display: table;
      width: 100%;
      margin: 0;
  }
  

  I think you can override the CSS with this in the style section of that page:

  div.alphabet {
      width: 50%;
  }
  

  Let us know if it works.

  How can I prohibit the alphabetSearch bar to not display.

  I'm not sure where your Datatables init code is at but I suspect the problem is you are not overriding the default layout setting. In that particular Datatable you will need to override the full layout option, something like this:

  layout: {
      top1:   'paging',
      bottom: 'info'
  },
  

  Nothing is merged between the default settings and what is in the individual Datatable init code. The Datatable. init options will override the full option in the default settings.

  Kevin
• jdadwilson Posts: 127Questions: 30Answers: 1

  August 16

  It seems that the default and the local do merge. I changed the local to...

  layout: {
      top1:   'paging',
      bottom: 'info'
  },
  

  and the alphabetSearch bar still showed, and with no error.

  I then added...

  top2: null,
  

  to the local. The alphabetSearch bar did not show but the error did.

  Here is the link to the test case.

  jdadwilson
• jdadwilson Posts: 127Questions: 30Answers: 1

  August 16

  Using the following...

  div.alphabet {
      width: 50%;
  }
  

  approach would not work as that would change all of the width of all alphabetSearch bars throughout the site.

  What I need is a js snippet that would only change the width as desired.

  document.getElementById will not work since the div doesn't have an id just the class.

  I've searched for how to change the width value of a class but didn't find anything.

  jdadwilson
• kthorngren Posts: 21,325Questions: 26Answers: 4,949

  August 16

  It seems that the default and the local do merge.

  That maybe the case now. IIRC there was a thread awhile back discussing this and Allan may have changed something.

  The alphabetSearch bar did not show but the error did.

  I might be missing something but how do I see the error? What is the error? Which table are you trying to remove the alphabetSearch bar from?

  approach would not work as that would change all of the width of all alphabetSearch bars throughout the site.

  Inspecting your page the alphabetSearch bar is in the div with the id of table_Links_wrapper. Adjust the selector to find that div first then find the alphabetSearch bar. Maybe this will work:

  div#table_Links_wrapper  div.alphabet {
      width: 50%;
  }
  

  Kevin
• jdadwilson Posts: 127Questions: 30Answers: 1

  August 16

  The table comes from the 'Article Links' button to the right. The table is not displayed because of the local layout...

  layout: {
      top2:   null,
      top1:   'paging',
      bottom: 'info'
  },
  

  The error shows on the inspect -> console panel.

  Uncaught TypeError: Cannot read properties of undefined (reading 'empty')
      at draw (alphabetSearch-2.x.js:141:14)
      at _Api.<anonymous> (alphabetSearch-2.x.js:81:9)
      at _Api.iterator (vendor-datatables-2.0.8.js:6756:15)
      at _Api.<anonymous> (alphabetSearch-2.x.js:80:10)
      at Function.recalc (vendor-datatables-2.0.8.js:6876:17)
      at hide_alphaLetters (_hide_alphaLetters.js:30:32)
      at jQuery.fn.init.initComplete (Grayson-datatables-globals.js:50:29)
      at vendor-datatables-2.0.8.js:6346:16
      at Array.map (<anonymous>)
      at _fnCallbackFire (vendor-datatables-2.0.8.js:6345:50)
  

  I really don't want to remove it, I just want the width to adjust to the width of the table.

  jdadwilson
• kthorngren Posts: 21,325Questions: 26Answers: 4,949

  August 17 edited August 17

  Sorry, I had to clear the browser's cache.

  If you follow the traceback you will see you defaults has this, referred to on line 8 of the traceback:

  initComplete: function() { hide_alphaLetters( this.api() ) },
  

  Which is executing thisApi.alphabetSearch.recalc(); in this code:

      } else {
          thisApi.alphabetSearch.recalc();
          $('#div.alphabet',  thisApi.table().container() ).show();
          $('#div.dt-full',   thisApi.table().container() ).show();
      }
  

  Ultimately getting to line 2:

  function draw(table, alphabet, options) {
      alphabet.empty();
      //alphabet.append('Search: ');
  

  The problem is you don't have alphabetSearch enabled for this Datatable. One suggestion is to override the defaults with an empty initComplete for this Datatable, for example:

      initComplete: function () {}
  

  Or possibly better is to add this if statement in hide_alphaLetters() to see if the container exists:

      } else if ( $('#div.alphabet',  thisApi.table().container() ).length ) {
          thisApi.alphabetSearch.recalc();
          $('#div.alphabet',  thisApi.table().container() ).show();
          $('#div.dt-full',   thisApi.table().container() ).show();
      }
  

  Kevin