How can I change the layout of JS submit buttons

[mwdbhyat]

Hi there,

I have 2 buttons next to each other in a dash ( JS created) .. how can I set the spacing between them ? Right now they are kinda on top of each other and right next to the "hide filters" tab.

Right now the button is just simply button id="mysubmit" class="btn btn-primary">Submit button

Any thoughts ?

Thanks!

[splunkian · Accepted solution]

In your JavaScript file I assume you have something like:

require(['jquery'], function($) {

    const fieldset = $('.fieldset'); // Container for Splunk's input forms on dashboard.
    const submit_button = `<button id="mysubmit" class="btn btn-primary my-btn">Submit button</button>`;
    const another_button = `<button id="mysubmit" class="btn btn-primary my-btn">Another button</button>`;

    // Append the buttons to the end of the fieldset container
    fieldset.append(submit_button);
    fieldset.append(another_button);

});

On the buttons, you can just add a custom class (for example .my-btn above), and then just add horizontal margin spacing around the button in a CSS file:

.my-btn {
    margin: 0 5px;
}

For me that works fine. If for some reason your buttons are still stacking you could try to force them to be inline by doing something like this:

.my-btn {
    margin: 0 5px;
    display: inline-block;
}

You just want to make sure you also include the stylesheet in your dashboard e.g.

<form script="buttons.js" stylesheet="buttons.css">
  <label>Test</label>
  ... 
</form>

Hope that helps.

[mwdbhyat]

Perfect.. Thanks!