Solved: Is it possible to add a button in line with inputs...

nick405060 · ‎07-15-2019

Hi guys,

I am looking for a way to include a js button in line with my input selection. Basically I'd like it to look like how the submit button looks like with its inputs:

[TIMEPICKER] [TEXTBOX] [SUBMITBUTTON]

I've been able to do it using "link", but am looking for other solutions that look better, since link is gray and the style template isn't being applied correctly.

<panel>  
  <html depends="$alwaysHideCSSPanel$">
     <style>
       #submit_button .btn-pill{
           background-repeat: repeat-x;
           background-color: #61a637;
           color: #ffa;
           text-shadow: none;
           text-decoration: none;
           border-radius: 4px;
       }
       #submit_button .btn-pill.active{
           background-color: rgba(100,255,100,.05)  !important;
           text-decoration: none  !important;
           color: #500  !important;
           border-radius: 4px  !important;              
       }
     </style>
  </html>
  <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" searchWhenChanged="true">
    <label></label>
    <choice value="submit">Submit</choice>
  </input>
</panel>

vnravikumar · ‎07-15-2019

Hi

Try this. I had modified CSS

[updated]

<form>
  <label>button</label>
  <fieldset submitButton="false" autoRun="false"></fieldset>
  <row>
    <panel>
      <html depends="$hide$">
      <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>
    </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" searchWhenChanged="true">
        <label></label>
        <choice value="submit">Submit</choice>
      </input>
    </panel>
  </row>
</form>

View solution in original post

vnravikumar · ‎07-15-2019

Hi

Try this. I had modified CSS

[updated]

<form>
  <label>button</label>
  <fieldset submitButton="false" autoRun="false"></fieldset>
  <row>
    <panel>
      <html depends="$hide$">
      <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>
    </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" searchWhenChanged="true">
        <label></label>
        <choice value="submit">Submit</choice>
      </input>
    </panel>
  </row>
</form>

nick405060 · ‎07-16-2019

I copied and pasted this exactly in 7.2.0 and there were no style changes to the link.

vnravikumar · ‎07-16-2019

Hi
[updated]:
Use the below 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>

nick405060 · ‎07-16-2019

works with this style!!! thank you!

nick405060 · ‎07-16-2019

the only issue with this is that it seems the button is invisibly bigger than it is. e.g., if you click to the RIGHT of the button, for another like inch, it also treats it as a button click? @vnravikumar

vnravikumar · ‎07-16-2019

No, it won't I had checked.

nick405060 · ‎07-17-2019

that behavior is existing for me. not sure why.

nick405060 · ‎07-18-2019

as mentioned here this style only adjusts the visual width, not the click width. for anyone who is trying to implement this style and also fix the clicking issue, I have posted a separate question here:

https://answers.splunk.com/answers/758977/how-to-adjust-the-click-width-of-a-js-button.html

harshpatel · ‎07-15-2019

Hi @nick405060,

I encoutered something similar to this. If you inspect the HTML generated by your XML you will realise where the problem lies.

To solve I assigned an id to panel and then through javascript I added the button as follows:

XML:

<panel id="mypanel">  
   <html depends="$alwaysHideCSSPanel$">
      <style>
        #submit_button .btn-pill{
            background-repeat: repeat-x;
            background-color: #61a637;
            color: #ffa;
            text-shadow: none;
            text-decoration: none;
            border-radius: 4px;
        }
        #submit_button .btn-pill.active{
            background-color: rgba(100,255,100,.05)  !important;
            text-decoration: none  !important;
            color: #500  !important;
            border-radius: 4px  !important;              
        }
      </style>
   </html>
   <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>

JavaScript:

require([
    "jquery",
    "splunkjs/mvc/simplexml/ready!"
], function ($,mvc) {

    $("#mypanel > div > div").append('<div class="input"><label> </label><div class="splunk-view"><button class="btn" id="submit_button">Submit</button></div></div>')
});

Hope this helps,
Harsh

nick405060 · ‎07-16-2019

This did not work for me in 7.2.0 using

 require([
     'jquery',
     'splunkjs/mvc',
     'splunkjs/mvc/simplexml/ready!'
 ], function($,mvc){
     var defaultTokens = mvc.Components.get("default");
     var submittedTokens = mvc.Components.get("submitted");
     $('#submit_button').on("click",function(){
         submittedTokens.set("submit_trigger", ""+Math.random());
         defaultTokens.set("submit_trigger", ""+Math.random());
     });
     $("#mypanel > div > div").append('<div class="input"><label> </label><div class="splunk-view"><button class="btn" id="submit_button">Submit</button></div></div>');
 });

and

<form>
   <label>button</label>
   <fieldset submitButton="false" autoRun="false"></fieldset>
   <row>
     <panel id="mypanel">
       <html depends="$hide$">
      <style>
         #submit_button .btn-pill{
             background-repeat: repeat-x;
             background-color: #61a637;
             color: #ffa;
             text-shadow: none;
             text-decoration: none;
             border-radius: 4px;
         }
         #submit_button .btn-pill.active{
             background-color: rgba(100,255,100,.05)  !important;
             text-decoration: none  !important;
             color: #500  !important;
             border-radius: 4px  !important;              
         }
       </style>
     </html>
       <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" searchWhenChanged="true">
         <label></label>
         <choice value="submit">Submit</choice>
       </input>
     </panel>
   </row>
 </form>

However my question has been answered in the other answer.

nick405060 · ‎07-15-2019

Same question as https://answers.splunk.com/answers/696876/how-to-make-html-button-inline-with-simple-xml-sub.html. No answer.

Is it possible to add a button in line with inputs?

Welcome to the Splunk Community!

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

Adoption of RUM and APM at Splunk