Dashboards & Visualizations
×

Are you a member of the Splunk Community?

Sign in or Register with your Splunk account to get your questions answered, access valuable resources and connect with experts!
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Show  only  | Search instead for 
Did you mean: 
Ask a Question
Solved! Jump to solution

CSS to align customized inputs with Splunk default inputs horizontally

nagar57
Communicator
‎06-23-2020 01:21 AM

I have implemented a customized date input but this is not getting aligned with my other inputs in the same row. I am attaching the screenshot to show how it is getting aligned currently. I want all the inputs in one row horizontally. Here's what I tried:

 
<panel>
   <html>
      <style>.dateContainer{
      display:flex;
      margin-top: 0px !important;
      margin-right: 10px !important;
      margin-bottom: 0px !important;
      margin-left: 0px !important;
      }
      .dateInput{
      padding-right:15px !important;
      }
      .#test1{
      display:flex;
      margin-top: 0px !important;
      margin-right: 10px !important;
      margin-bottom: 0px !important;
      margin-left: 10px !important;
      }
      .#test2{
      display:flex;
      margin-top: 0px !important;
      margin-right: 10px !important;
      margin-bottom: 0px !important;
      margin-left: 20px !important;
      }</style>
      <div class="dateContainer">
         <div class="dateInput">
            <div>From Date:</div>
            <input id="from_default1" type="date" name="fromDate" value="$from_default1$" />
         </div>
         <div class="dateInput">
            <div>To Date:</div>
            <input id="to_default1" type="date" name="toDate" value="$to_default1$" />
         </div>
      </div>
   </html>
   <input type="dropdown" token="field1" id="test1">
      <label>test</label>
   </input>
   <input type="dropdown" token="field2" id="test2">
      <label>Test</label>
   </input>
</panel>
Labels (1)
Labels
Preview file
65 KB
0 Karma
Reply
1 Solution
Solved! Jump to solution
Solution

nagar57
Communicator
‎06-25-2020 10:47 PM

This is what I tried and did the trick.

Created a separate row for inputs and 2 panels inside it. 1st one for Date inputs and Second one for other inputs and with custom css I merged the 2 panels and adjusted the position.

<row id="earn_input_panel">
<panel id="earn_date_input">
<html>
<style>
.dateContainer{
display:flex;
}
.dateInput{
padding-right:25px;
}
#earn_input_panel .dashboard-panel{
margin-right: 0px !important;
}
#earn_date_input{
width:30% !important;
}
#earn_other_input{
width:70% !important;
}
#earn_campaign_input{
margin-top: 30px !important;
}
#earn_market_input{
margin-top: 30px !important;
}
</style>
<div class="dateContainer">
<div class="dateInput">
<div>From Date:</div>
<input id="earn_from" type="date" name="fromDate" value="$earn_from$"/>
</div>
<div class="dateInput">
<div>To Date:</div>
<input id="earn_to" type="date" name="toDate" value="$earn_to$"/>
</div>
</div>
</html>
</panel>
<panel id="earn_other_input">
<input id="earn_market_input" type="dropdown" token="earnMarket">
<label>Country</label>
<choice value="*">All</choice>
<default>*</default>
<fieldForLabel>market</fieldForLabel>
<fieldForValue>market</fieldForValue>
<search>
<query><Search query></query>
</search>
</input>
<input id="earn_campaign_input" type="text" token="earnCampaign">
<label>Campaign</label>
<default>*</default>
</input>
</panel>
</row>

View solution in original post

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎06-23-2020 11:32 AM

@nagar57 add id to the panel with inputs i.e. id="panel_input" and then add the following CSS

 

 

    <panel id="panel_input">
       <html>
          <style>
          #panel_input .dashboard-panel{
            display: flex !important;
          }

 

 

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Solved! Jump to solution

nagar57
Communicator
‎06-25-2020 12:17 AM

@niketn This CSS is bringing the entire panel content in one line including the table (if I have in the panel). Also, The date inputs I want in the starting. By using this CSS it is getting placed at the end. Could you please help with the alignment issue. TIA!!

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎06-25-2020 10:50 AM

That is because you did not have table in your snippet 😛

Move the table to second row. Keep inputs in single row single panel and my solution will work. That is exactly the code that was shared in the question. 

Other option would be to create two panels in one row as input panels one with Splunk input, other with html input and format as per need using CSS.

If not you might have to share the screenshot of issue with code and anonymize any sensitive information in both.

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Solved! Jump to solution
Solution

nagar57
Communicator
‎06-25-2020 10:47 PM

This is what I tried and did the trick.

Created a separate row for inputs and 2 panels inside it. 1st one for Date inputs and Second one for other inputs and with custom css I merged the 2 panels and adjusted the position.

<row id="earn_input_panel">
<panel id="earn_date_input">
<html>
<style>
.dateContainer{
display:flex;
}
.dateInput{
padding-right:25px;
}
#earn_input_panel .dashboard-panel{
margin-right: 0px !important;
}
#earn_date_input{
width:30% !important;
}
#earn_other_input{
width:70% !important;
}
#earn_campaign_input{
margin-top: 30px !important;
}
#earn_market_input{
margin-top: 30px !important;
}
</style>
<div class="dateContainer">
<div class="dateInput">
<div>From Date:</div>
<input id="earn_from" type="date" name="fromDate" value="$earn_from$"/>
</div>
<div class="dateInput">
<div>To Date:</div>
<input id="earn_to" type="date" name="toDate" value="$earn_to$"/>
</div>
</div>
</html>
</panel>
<panel id="earn_other_input">
<input id="earn_market_input" type="dropdown" token="earnMarket">
<label>Country</label>
<choice value="*">All</choice>
<default>*</default>
<fieldForLabel>market</fieldForLabel>
<fieldForValue>market</fieldForValue>
<search>
<query><Search query></query>
</search>
</input>
<input id="earn_campaign_input" type="text" token="earnCampaign">
<label>Campaign</label>
<default>*</default>
</input>
</panel>
</row>

0 Karma
Reply
Solved! Jump to solution

niketn
Legend
‎06-26-2020 06:15 AM

Glad you got it working, do upvote the answers if they helped!

____________________________________________
| makeresults | eval message= "Happy Splunking!!!"
0 Karma
Reply
Career Survey
First 500 qualified respondents will receive a $20 gift card! Tell us about your professional Splunk journey.
Take the Survey

Can’t make it to .conf25? Join us online!

Watch Global Broadcast
Get Updates on the Splunk Community!

Can’t Make It to Boston? Stream .conf25 and Learn with Haya Husain

Boston may be buzzing this September with Splunk University and .conf25, but you don’t have to pack a bag to ...

Splunk Lantern’s Guide to The Most Popular .conf25 Sessions

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

Unlock What’s Next: The Splunk Cloud Platform at .conf25

In just a few days, Boston will be buzzing as the Splunk team and thousands of community members come together ...