Dashboards & Visualizations

How to resize text in HTML dashboard

nikkkc
Path Finder

i try to resize some textinputs with css but it does not work as assumed.

this is my css:

input4{

width : 800px !important;
height :100px !important;
}

but the textinput is always the same size, just the next textinput 5 is moved into the right corner and to the bottom. it looks like the div size is changed but not the inputtext element??

0 Karma
1 Solution

rjthibod
Champion

Try adding this CSS.

.input-text > div > input[type=text] {
  width: 90% !important;
  max-width: 90% !important;
  min-width: 90% !important;
}

You are encountering an issue I have fought much and tried to find a generic workaround. Here is a little more explanation.

https://gist.github.com/thibodux/408a685dc1a46af5f4f73f7c2922e47e

View solution in original post

0 Karma

nikkkc
Path Finder

ok in general, this works but it is for every input field, this is not what i want

input
{ width:500px;}

0 Karma

rjthibod
Champion

Did you try what I suggested in my answer?

0 Karma

rjthibod
Champion

Try adding this CSS.

.input-text > div > input[type=text] {
  width: 90% !important;
  max-width: 90% !important;
  min-width: 90% !important;
}

You are encountering an issue I have fought much and tried to find a generic workaround. Here is a little more explanation.

https://gist.github.com/thibodux/408a685dc1a46af5f4f73f7c2922e47e

0 Karma

nikkkc
Path Finder

Ok wow, it seems this works, but does this also work for height? i would like to build a multiline text input

0 Karma

rjthibod
Champion

No clue. Try adding height setting to #input4 > div > input[type=text] to see.

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!

ATTENTION: We’re Moving! (AGAIN!)

The Splunk Community Slack is undergoing a system migration to keep our workspace secure and ...

Deep Dive: Optimizing Telemetry Pipelines in Splunk Observability Cloud

In this session, we will peel back the layers of Splunk Observability Cloud’s cost-optimization features. ...

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 ...