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!
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.
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.
Perfect.. Thanks!