Solved: Adjust top margin on a panel with different inputs...

D2SI · ‎09-07-2020

Hello there!

I am struggling to reduce the top margin on a panel with a text input and a link input using CSS.

I want to reduce top-margin and still have both elements aligned horizontally:

What I wish:

screen6.png

If I use 'display: flex', the top margin applies but the button moves under the textbox:

display : flex;
margin-top: 0vw !important;

screen5.png

Without 'display: flex' elements remain aligned but the top margin just does not apply:

margin-top: 0vw !important;

screen7.png

I have tried several display / flex options without luck so far.

My test dashboard:

<form>
  <label>Panel Height</label>
  <fieldset submitButton="false"></fieldset>
  <row>
    <panel>
      <input id="textbox_1" type="text" token="text_1_tok">
        <label></label>
        <default>Test1</default>
      </input>
      <input id="link_button_1" type="link" token="link_1_tok">
        <label></label>
        <choice value="true">A</choice>
      </input>
    </panel>
  </row>
  <row>
    <panel>
      <html>
        <style>
          #link_button_1 div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"], #link_button_2 div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
            width: 23% !important;
          }
          #link_button_1 button, #link_button_2 button{
            margin-right: 10px;
          }
          #textbox_1, #textbox_2{
            margin-left: 8vw;
          }
          #link_button_1, #link_button_2, #textbox_1, #textbox_2{
            margin-top: 0vw !important;
          }
        </style>
      </html>
    </panel>
  </row>
</form>

Anyone has a clue?

ITWhisperer · ‎09-07-2020

Even though your labels appear to be empty, they are   so they occupy some space. Try adding

          #link_button_1 label, #link_button_2 label, #textbox_1 label, #textbox_2 label{
            display: none;
          }

View solution in original post

ITWhisperer · ‎09-07-2020

Even though your labels appear to be empty, they are   so they occupy some space. Try adding

          #link_button_1 label, #link_button_2 label, #textbox_1 label, #textbox_2 label{
            display: none;
          }

D2SI · ‎09-07-2020

Did not realized that! Thanks a lot!

Adjust top margin on a panel with different inputs using CSS

CSS

form

simple XML

Join the Splunk Community Slack to learn, troubleshoot, and make connections with fellow Splunk practitioners in real time!

Join Splunk User Groups to connect and learn in-person by region or remotely by topic or industry.

Developer Spotlight with Denis Gladkikh

Governing Enterprise AI, Bringing Cisco Telemetry Home, and More from Splunk Lantern

Agentic SOC Triage: Investigating Splunk ES Notables with MCP Server and a Local LLM

Join the Conversation