Dashboards & Visualizations

How can I change the layout of JS submit buttons

mwdbhyat
Builder

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!

0 Karma
1 Solution

splunkian
Path Finder

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.

View solution in original post

0 Karma

splunkian
Path Finder

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.

0 Karma

mwdbhyat
Builder

Perfect.. Thanks!

0 Karma
Get Updates on the Splunk Community!

What’s New in Splunk App for PCI Compliance 5.3.1?

The Splunk App for PCI Compliance allows customers to extend the power of their existing Splunk solution with ...

Extending Observability Content to Splunk Cloud

Register to join us !   In this Extending Observability Content to Splunk Cloud Tech Talk, you'll see how to ...

What's new in Splunk Cloud Platform 9.1.2312?

Hi Splunky people! We are excited to share the newest updates in Splunk Cloud Platform 9.1.2312! Analysts can ...