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

Updated Data Type Articles, Anniversary Celebrations, and More on Splunk Lantern

Splunk Lantern is a Splunk customer success center that provides advice from Splunk experts on valuable data ...

A Prelude to .conf25: Your Guide to Splunk University

Heading to Boston this September for .conf25? Get a jumpstart by arriving a few days early for Splunk ...

4 Ways the Splunk Community Helps You Prepare for .conf25

.conf25 is right around the corner, and whether you’re a first-time attendee or a seasoned Splunker, the ...