Add a select input besides editor buttons

Add a select input besides editor buttons

klinglerklingler Posts: 90Questions: 42Answers: 2
edited June 2022 in Editor

Good morning

Is there a way to add a custom select input element to the right side of the existing editor buttons on top of the table?
Would like to add a select input so a user can choose which year the displayed table should show.

Works with the buttons: [] options but always renders it as a button around as class dt-button is added.

Best would be if I could use the returned "options" in my JSON to populate the select input ;-)

thanks in advance
richard

This question has an accepted answers - jump to answer

Answers

  • klinglerklingler Posts: 90Questions: 42Answers: 2

    Ah found an example here....but when I use this to insert the select element:

    dom: 'B<"toolbar">frtip',
    

    so that the select element comes right after the buttons...the filter input is pushed down and not aligned to the buttons anymore.

  • klinglerklingler Posts: 90Questions: 42Answers: 2

    Well....have to play with different CSS settings...but at least populating the selct options from the returned JSON works (o;

    I use "years" in the JSON for each order year and then use the initComplete to populate the options fields in the empty select input element:

            initComplete: function() {
                var x = document.getElementById("year");
                var json = table.ajax.json();
                json.years.forEach(function(year){
                  console.log(year);
                  var option = document.createElement("option");
                  option.value = year;
                  option.text = year;
                  x.add(option);
                });
            },
    dom: 'B<"toolbar">frtip',
    
    
    $('div.toolbar').html('<select onchange="javascript:change_year();" name="year" id="year"></select>');
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Yep, that looks good, thank for posting back,

    Colin

  • klinglerklingler Posts: 90Questions: 42Answers: 2

    Well I'm satisfied with this...except that the search field is moved down....

    This is the CSS for the select element:

    .toolbar select {
      outline: none;
      margin-left: 15px;
      width: 100px;
      padding: 5px 35px 4px 30px;
      font-size: 14px;
      border: 1px solid #CCC;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border-radius: 3px;
      background: linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
      font-family: 'wedernoch', sans-serif;
    }
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Styling is always a stinker to debug without seeing it - please can you create a test case or link to your page. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • klinglerklingler Posts: 90Questions: 42Answers: 2
    Answer ✓

    Morning Colin

    Got it now (o;

    Class toolbar just needs:

    .toolbar {
      float: left;
    }
    

    Looks much better now ;-)

Sign In or Register to comment.