Adjust top margin on a panel with different inputs using CSS

D2SI — Mon, 07 Sep 2020 10:15:53 GMT

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:

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

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

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

margin-top: 0vw !important;

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?

Re: Adjust top margin on a panel with different inputs using CSS

ITWhisperer — Mon, 07 Sep 2020 11:34:41 GMT

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

Re: Adjust top margin on a panel with different inputs using CSS

D2SI — Mon, 07 Sep 2020 13:14:52 GMT

Did not realized that! Thanks a lot!

topic Re: Adjust top margin on a panel with different inputs using CSS in Dashboards & Visualizations

Adjust top margin on a panel with different inputs using CSS

Re: Adjust top margin on a panel with different inputs using CSS

Re: Adjust top margin on a panel with different inputs using CSS