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

nick405060 · ‎07-18-2019

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>

vnravikumar · ‎07-18-2019

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

vnravikumar · ‎07-18-2019

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

});

nick405060 · ‎07-19-2019

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

vnravikumar · ‎07-19-2019

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

});

vnravikumar · ‎07-19-2019

I checked in 7.3.0 its working fine.

nick405060 · ‎07-19-2019

it worked with this style! thanks a bunch!

niketn · ‎07-18-2019

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

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"

How to adjust the click width of a JS button?

Welcome to the Splunk Community!

Tech Talk | Elevating Digital Service Excellence: The Synergy of Splunk RUM & APM

Adoption of RUM and APM at Splunk