topic Re: Is it possible to add a button in line with inputs? in Dashboards & Visualizations

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

nick405060 — Mon, 15 Jul 2019 22:17:03 GMT

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>

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

nick405060 — Mon, 15 Jul 2019 23:33:53 GMT

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

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

harshpatel — Tue, 16 Jul 2019 05:55:21 GMT

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

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

vnravikumar — Tue, 16 Jul 2019 06:13:43 GMT

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>

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

nick405060 — Tue, 16 Jul 2019 16:03:45 GMT

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

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

vnravikumar — Tue, 16 Jul 2019 16:24:26 GMT

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>

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

nick405060 — Tue, 16 Jul 2019 17:22:48 GMT

works with this style!!! thank you!

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

nick405060 — Tue, 16 Jul 2019 17:25:25 GMT

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.

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

nick405060 — Tue, 16 Jul 2019 17:48:09 GMT

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

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

vnravikumar — Wed, 17 Jul 2019 04:21:42 GMT

No, it won't I had checked.

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

nick405060 — Wed, 17 Jul 2019 17:45:30 GMT

that behavior is existing for me. not sure why.

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

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

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