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
Get Updates on the Splunk Community!

App Platform's 2025 Year in Review: A Year of Innovation, Growth, and Community

As we step into 2026, it’s the perfect moment to reflect on what an extraordinary year 2025 was for the Splunk ...

Operationalizing Entity Risk Score with Enterprise Security 8.3+

Overview Enterprise Security 8.3 introduces a powerful new feature called “Entity Risk Scoring” (ERS) for ...

Unlock Database Monitoring with Splunk Observability Cloud

  In today’s fast-paced digital landscape, even minor database slowdowns can disrupt user experiences and ...