Dashboards & Visualizations

How to adjust the click width of a JS button?

nick405060
Motivator

Hi guys,

I have implemented a JS button per

https://answers.splunk.com/answers/758599/is-it-possible-to-add-a-button-in-line-with-inputs.html

However, I am only able to adjust the visual width, not the click width. That is, after the visual width is adjusted and made smaller, you can click on the gray space to the right of the button and it will still submit. How do I fix this?

If there is no direct fix here - and hopefully there is - I am open to other JS button choices besides link only if they are also an <input> (I need the button to be in line with other inputs per 758599).

Button:

  <input type="link" id="submit_button">
    <label></label>
    <choice value="submit">Submit</choice>
  </input>

Style:

    <style>
    #submit_button div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]
    {
      width:35% !important;
    }
    #submit_button  button  {
      padding: 6px 15px !important;
      border-radius: 3px !important;
      font-weight: 500 !important;
      background-color: #5cc05c !important;
      border: transparent !important;
      color: #fff !important;
    }
    #submit_button  button:hover{
      background-color: #40a540 !important;
      border-color: transparent !important;
    }
    </style>
0 Karma
1 Solution

vnravikumar
Champion

Hi

One way you can solve this issue by having the onclick method like below

require([
    'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function($, mvc){
    $("#submit_button button").click(function(){
         alert("test");
     });

});

View solution in original post

0 Karma

vnravikumar
Champion

Hi

One way you can solve this issue by having the onclick method like below

require([
    'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function($, mvc){
    $("#submit_button button").click(function(){
         alert("test");
     });

});
0 Karma

nick405060
Motivator

I tried this, but it doesn't fix the issue. You can still click to the right of the button and have it submit, and if you place another input next to the button it is offset by a fair amount. The visual width is being adjusted but not the width behind the scenes

0 Karma

vnravikumar
Champion

Hi

Try this

<form script="test.js">
  <label>button</label>
  <fieldset submitButton="false" autoRun="false"></fieldset>
  <row>
    <panel>
      <html depends="$hide$">
       <style>

        #submit_button{
          width:80px !important;
         }

         #submit_button div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
          width:80px !important;
          }

        #submit_button  button{
          padding: 6px 15px !important;
          border-radius: 3px !important;
          font-weight: 500 !important;
          background-color: #5cc05c !important;
          border: transparent !important;
          color: #fff !important;
        }

        #submit_button  button:hover{
          background-color: #40a540 !important;
          border-color: transparent !important;
        }
        </style>
    </html>
    </panel>
  </row>
  <row>
    <panel>
      <input type="text" token="networkIdOnChange" searchWhenChanged="false">
        <label>NetworkID:</label>
        <default></default>
      </input>
      <input type="text" token="networkid" depends="$justHideMe$" searchWhenChanged="false">
        <default>$networkIdOnChange$</default>
      </input>
      <input type="link" id="submit_button">
        <label></label>
        <choice value="submit">Submit</choice>
      </input>
      <input type="text" token="networkIdOnChange1" searchWhenChanged="false">
        <label>NetworkID1:</label>
        <default></default>
      </input>
    </panel>
  </row>
</form>

js: please have onclick method as $("#submit_button button").click(function(){

require([
    'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function($, mvc){
    var button = mvc.Components.get("submit_button");
    $("#submit_button button").click(function(){
         alert("test");
     });

});

alt text

0 Karma

vnravikumar
Champion

I checked in 7.3.0 its working fine.

0 Karma

nick405060
Motivator

it worked with this style! thanks a bunch!

0 Karma

niketn
Legend

@nick405060 how about the following approach with a separate panel next to Splunk Input and with a html button?
You would need to code html button using Simple XML JS extension.

alt text
Following is the Simple XML code example

<form>
  <label>HTML Button on right aligned with Splunk inputs on left</label>
  <fieldset submitButton="false">
  </fieldset>
  <row>
   <panel id="panelInputs">
     <input type="text" token="networkIdOnChange" searchWhenChanged="false">
       <label>NetworkID:</label>
       <default></default>
     </input>
     <input type="text" token="networkid" depends="$justHideMe$" searchWhenChanged="false">
       <default>$networkIdOnChange$</default>
     </input>
   </panel>
   <panel id="panelSubmit">
     <html>
       <style>
         #panelInputs .dashboard-panel{
            margin-right: 0px !important;
         }
         #htmlSubmitButton{
            padding:6px 15px;
            margin-right: 20px;
            border-radius:3px;
            font-weight: 500;
            background-color: #5cc05c;
            border: transparent;
            color: #fff;
            float:right;
         }
         #htmlSubmitButton:hover{
           background-color: #40a540 !important;
           border-color: transparent !important;
         }
       </style>
      <div style="padding-top: 20px;">
        <input id="htmlSubmitButton" type="submit" name="Submit"></input>
      </div>
     </html>
   </panel>
  </row>
</form>
____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Get Updates on the Splunk Community!

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 ...

What’s New in Splunk Security Essentials 3.8.0?

Splunk Security Essentials (SSE) is an app that can amplify the power of your existing Splunk Cloud Platform, ...

Let’s Get You Certified – Vegas-Style at .conf24

Are you ready to level up your Splunk game? Then, let’s get you certified live at .conf24 – our annual user ...