Modify Display Height of Read Only HTML Variable on Catalog Item

[Shawn Dowler]

What is the recommended way to modify the height of the box of a read-only HTML variable on the Catalog Item form? I would like to avoid having to create tons of UI Macros just to add a single line of rich text in the middle of forms.

[Shawn Dowler]

This is an old issue, but we are on Eureka now and it's still happening. Here is a link to a demo instance that demonstrates this happening:

https://demo004.service-now.com/nav_to.do?uri=com.glideapp.servicecatalog_cat_item_view.do%3Fv%3D1%2...

And here are screenshots showing that it's the element's style attribute forcing it to be 300px high.

Is there any way to keep this from happening in the fulfiller user view? I have a lot more latitude to modify the appearance of things on the CMS side, but I would rather keep the height: 300px completely out of the element if I can.

If you can't reproduce this, then I will have to open a HI ticket. Thanks again!

[Mark Stanger]

Yes, there is a way.   Check out how I've configured the variable in the link you gave.   I've added the 'Create roles' field to the form and added the 'nobody' role to it as I explained in the thread above.   The 'nobody' role is restricted by a row-level read ACL on the 'sys_user_role' table so you'll need to disable that ACL in order to add it to your variable.   If you apply the security this way then it will work.

You could also accomplish the same thing by using the following code within a client script on the item.   Because it targets the dom to remove the height of the readonly HTML variable it might be more prone to breaking down the road.

var myReadonlyHTMLVariable = 'v_html_space';

g_form.setReadonly(myReadonlyHTMLVariable, true);

$(g_form.getControl(myReadonlyHTMLVariable).id + '_readOnlyDiv').style.height = '';

The problem with what you've got configured there right now is that you're using the built-in UI policies.   While those should handle this scenario, they don't so you're ending up with the issue.   I've never run into the UI policy issue because I've used the 'Create roles' method every time.

[Shawn Dowler]

That is one of the least intuitive things I've ever seen, but it totally works and it's got the added benefit that we can set it on the variable in a variable set, which means we don't have to have UI Policies on each catalog item to make the HTML items read only!

I wish I could mark this as a correct answer, because it's sooooo helpful! So I'll leave you with this instead:

[Mark Stanger]

Perfect.   Much better than getting the correct answer anyway.

[Brian Lancaster]

I used this code in a client script for one of the request forms.

var myReadonlyHTMLVariable = 'v_html_space';

g_form.setReadonly(myReadonlyHTMLVariable, true);

$(g_form.getControl(myReadonlyHTMLVariable).id + '_readOnlyDiv').style.height = '20';

In IE 11 and Google chrome I am getting the following script error but it works fine in Firefox.   Any thought on what I would need to do to change my script so I am not seeing this error in IE or Chrome?

onChange script error: TypeError: Cannot read property 'style' of null function