topic Re: How to adjust the click width of a JS button? in Dashboards & Visualizations

How to adjust the click width of a JS button?

nick405060 — Thu, 18 Jul 2019 17:32:11 GMT

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>

Re: How to adjust the click width of a JS button?

niketn — Fri, 19 Jul 2019 02:27:57 GMT

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

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>

Re: How to adjust the click width of a JS button?

vnravikumar — Fri, 19 Jul 2019 04:25:14 GMT

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");
     });

});

Re: How to adjust the click width of a JS button?

nick405060 — Fri, 19 Jul 2019 16:46:45 GMT

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

Re: How to adjust the click width of a JS button?

vnravikumar — Fri, 19 Jul 2019 17:12:04 GMT

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");
     });

});

Re: How to adjust the click width of a JS button?

vnravikumar — Fri, 19 Jul 2019 17:13:19 GMT

I checked in 7.3.0 its working fine.

Re: How to adjust the click width of a JS button?

nick405060 — Fri, 19 Jul 2019 17:22:29 GMT

it worked with this style! thanks a bunch!