Adjust size of filter font to a larger size in a text area?

[Jon Orth 2]

Is there any way to increase the size of a filter's font in a text area?  I thought this could be accomplished under canvas styling but the Visualizations General setting seems to have no impact on the filters in the filter panel or in text areas.

[Jose Leviaguirre]

Hello @Jon Orth 2

This is possible, but requires a little hack, which is not generally recommended as it involves tweaking the Spotfire internals, which can change from one version to another.

Assume that you have a List Box Filter and you want to increase the font size in both, the values and search box

►
 

html

<span id="myFilter">
    <SpotfireControl id="filter control" />
</span>

JavaScript

//this script injects a style tag to override default styles

(()=> {
    const styleElement=document.createElement('style');

    const styleElement.textContent = `
    /* this selector takes care of the hint that says 'type to search in list' "*/
    #myFilter .SearchInput::placeholder {    
        color: white;
        /* Replace 'red' with your desired color */
        font-size:12px;
        text-align:center;
    }

    /* this rule overrides selected items' "*/
    #myFilter .sfpc-selected {
        background:yellow !important;
        color:black !important;
    }

    /* this one is for the searchbox input' "*/
    #myFilter .sf-element-input {
        font-size: 18px !important;
        background:red;
        color:yellow !important;
    }

    /* this lst one is for the all the list items' "*/
    #myFilter .sf-element-list-box-item {
        font-size: 18px !important;
        background:gray;
        color:white;
    }`;

    //injects the code to the text area
    myFilterElement=document.getElementById('myFilter');
    myFilterElement.appendChild(styleElement);
})()

 

This approach is also not documented, so use it at your own risk. You need to understand that the SpotfireControls generate the html dynamically and it can be hard to find out all the variables that creates the filter. You might want to increase the padding or margin, but that will require more investigation to see which elements require to be change.

I use the Developer's tools to find out the rules names so I can override them. If you are familiar with CSS, then you can explore and play with the values using the Developers Tools. This option is available from Tools > Development > Developer tools... or by pressing F12 if using Google Chrome. If you don't see that option on your client, then check the tools > options > Application > Show development menu option and restart the client. A shortcut that does not require a restart is to ctrl+alt+shift+F12 to bring up the DevTools. 

Once you have the DevTools, you can start exploring the guts of Spotfire. I encourage you to go to that page and watch the intro video from the previous link. It's fun and very informative.



 

 

 

[Niko Maresco]

hi Jon,

other than what Jose shared, UI elements of the application itself are tied to the client machine's resolution and DPI settings. you can try to override the DPI used in this application with the steps listed in this Microsoft forum post: https://answers.microsoft.com/en-us/windows/forum/all/change-the-display-scale-for-an-individual/317e27ba-1488-4bed-a23f-85a3d5290dea and see if that suits your use case.

[Jon Orth 2]

Jose, I'm interested in learning about the internals of the application but am unsure how to proceed past a style element already declared error when the Java Script runs.  In the meantime, I will probably just proceed with document properties as those are resizable without the risks that you mention.