Dashboards & Visualizations

CSS for link list button align button horizontaly

jhuysing
Explorer

Is there a css element that can help  move the "really bad" button so it on the same line as the rest?

jhuysing_0-1718926513888.png

 

Labels (2)
0 Karma
1 Solution

bowesmana
SplunkTrust
SplunkTrust

This is what you need

#linked_list.input-link{
    width: 400px !important;
}

where your input is

<input id="linked_list" type="list"...

Here's some more useful ways of changing linked list input types - this shows a tab style selection

  <row depends="$AlwaysHideCSS$">
    <panel>
      <html>
        <style>
          #linked_list.input-link{
          	width: 400px !important;
          }
          #linked_list label{
            display:none !important;
          }
          #linked_list.input-link div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
          	display: -webkit-box !important;
          }
          #linked_list.input-link button{
            min-width: 100px !important;
            max-width: 130px !important;
            border-top-color: #E1E6EB;
            border-top-style: solid;
            border-top-width: 1px;
            border-right-color: #E1E6EB;
            border-right-style: solid;
            border-right-width: 1px;
            border-left-color: #E1E6EB;
            border-left-style: solid;
            border-left-width: 1px;
          	border-top-left-radius: 10px;
            border-top-right-radius: 10px;
          }
          
          #linked_list .splunk-choice-input-message{
            display: none !important;
          }
          #linked_list.input-link button[role="radio"][aria-checked="true"]{
            background-color: #62B5E5 !important;
            color: #000 !important;
          }
          #linked_list.input-link button[role="radio"][aria-checked="false"]{
            background-color: #005587 !important;
            color: #fff !important;
          }
        </style>
      </html>
    </panel>
  </row>

Hope this is usefulk

View solution in original post

0 Karma

bowesmana
SplunkTrust
SplunkTrust

This is what you need

#linked_list.input-link{
    width: 400px !important;
}

where your input is

<input id="linked_list" type="list"...

Here's some more useful ways of changing linked list input types - this shows a tab style selection

  <row depends="$AlwaysHideCSS$">
    <panel>
      <html>
        <style>
          #linked_list.input-link{
          	width: 400px !important;
          }
          #linked_list label{
            display:none !important;
          }
          #linked_list.input-link div[data-component="splunk-core:/splunkjs/mvc/components/LinkList"]{
          	display: -webkit-box !important;
          }
          #linked_list.input-link button{
            min-width: 100px !important;
            max-width: 130px !important;
            border-top-color: #E1E6EB;
            border-top-style: solid;
            border-top-width: 1px;
            border-right-color: #E1E6EB;
            border-right-style: solid;
            border-right-width: 1px;
            border-left-color: #E1E6EB;
            border-left-style: solid;
            border-left-width: 1px;
          	border-top-left-radius: 10px;
            border-top-right-radius: 10px;
          }
          
          #linked_list .splunk-choice-input-message{
            display: none !important;
          }
          #linked_list.input-link button[role="radio"][aria-checked="true"]{
            background-color: #62B5E5 !important;
            color: #000 !important;
          }
          #linked_list.input-link button[role="radio"][aria-checked="false"]{
            background-color: #005587 !important;
            color: #fff !important;
          }
        </style>
      </html>
    </panel>
  </row>

Hope this is usefulk

0 Karma
Got questions? Get answers!

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

Meet up IRL or virtually!

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

Get Updates on the Splunk Community!

Deep Dive: Accelerate threat investigation with Splunk’s AI Assistant in Security

AI is one of the biggest topics in the market today, and for security teams, its value goes far beyond the ...

Announcing Modern Navigation: A New Era of Splunk User Experience

We are excited to introduce the Modern Navigation feature in the Splunk Platform, available to both cloud and ...

Detection Engineering Office Hours: Real-World Troubleshooting & Q&A

[REGISTER HERE] This thread is for the Community Office Hours session on Detection Engineering Office Hours: ...