Changing width for specific global filter

[weiview]

Hi all, I know that is is possible to change the styling for a specific grid-table (by referencing the “id” in CSS). However, I can’t seem to figure out how we can override the default min-width for a specific filter. Namely, I am trying to change the dropdown-menu style for one individual filter on a specific page. The use case involves making the dropdown menu wider for one specific filter where the element names are long text strings. For example, in the screenshot below, we might want to make the “Department” dropdown box wider

When inspecting the HTML, I don’t see the “id” references on this individual filter level and see that the min-width of 250px has been injected into the HTML. Any suggestions on how I can reference this specific filter to increase the min-width? Thanks!

[ishapiro]

Step 1 : Add the toolbar popup and in advanced options of the popup add following to the

{
  "toolbarButton": {
    "htmlSnippet": "samples/test_css.html"
  }
}

Step 2 : Add test_css.html (Snippet in side the samples folder ) following code the UX_Demo.Account.Account is dynamic depending what the instance.dimension.hierarchy to target

<style > 
     
    div[key="UX_Demo.Account.Account"] {
          min-width:390px !important;
    }
</style>

[weiview]

@ishapiro thank you for your help on this! I didn’t know that we could inject htmlSnippets into the toolbar so that’s a neat trick. However, when I try to follow your steps, it seems like the htmlSnippet isn’t applying. Could you have a quick look below to see what I’m missing?

Adv Options on page

Snippet editor with test_css.html

DevTools inspector

Screen

[ishapiro]

Make sure the Advanced options code is added to the toolbar pop-up,
Try save the changes seems like it should work.

[weiview]

@ishapiro thank you! I think I now understand now what you mean by adding the Adv Options to the toolbar pop-up. I need to first create a dummy “toolbar pop-up” and put the Adv Options into that pop-up button. Once I do that, the dummy pop-up button disappears from the toolbar but the htmlSnippet reference persists and gets applied to the page. Thanks again!

[ishapiro]

Yes that’s correct

[hakyuz]

You need to grab the ID from 2-3 upper level div and then add this code to your custom css file. the ID in this code is just the placeholder which match with the screenshot i added.hope that helps

#bd9435f6-33c6-6447-c107-067f18204308 .hierarchy-select.btn-group .dropdown-menu {
width: 400px !important;
}

#bd9435f6-33c6-6447-c107-067f18204308 .ht_master .wtHolder {
width: 100% !important;
}

#bd9435f6-33c6-6447-c107-067f18204308 .handsontable .wtSpreader {
width: 100% !important;
}
#bd9435f6-33c6-6447-c107-067f18204308 .handsontable table.htCore {
width: 100% !important;
max-width: 100% !important;
}

[ishapiro]

@hakyuz No! Id mention above is dynamic changes every time you reload the page so not to be used to manipulate the width of the container.

[hakyuz]

In that case you are totally right, so we just need to go to the upper level div and grab the id that exactly defines filter dropdown. Make sense?

[hakyuz]

a simple reminder if the ID includes dot (.) inside, you need to use backslash escape. something like this while creating your CSS code;

[weiview]

@hakyuz thanks for your tip on finding the ID selector! Its a helpful way to globally set the width for specific dimensions with long element names.