Solved

Hide rich-text ribbon in multi-line text fields?

  • 10 September 2015
  • 10 replies
  • 38 views

Userlevel 5
Badge +13

Hey all,

 

I've been trying to figure out how to hide or collapse the rich-text ribbon in a multi-line text field in the Nintex forms. Or, at the very least, have it hidden until a user clicks into the field since it really clutters up the page. I feel like someone else must have done this at some point. To clarify, we do want the rich-text functionality, hence why we don't want to just make it a plain-text box. We're just looking to clean up the look a bit by hiding the format ribbon until it's needed.

 

Thanks,

-Courtney

icon

Best answer by andrewg 17 September 2015, 21:32

View original

10 replies

Userlevel 7
Badge +17

Just make sure it is not the first Tab control on the form. So if another control is before it, while editing, this control will be selected to change its value and the Ribbon will behave accordingly.

Userlevel 5
Badge +13

To clarify, this is what the form looks like right now:

The "Product or Service" field is where my problem is. That formatting ribbon in the multi-line text box is what I would like to hide or remove, while still allowing rich text functionality.

Userlevel 7
Badge +17

Courtney,

Because this is in the app these isn't much you can change about the control's behavior except to uncheck that it is a rick text field. But obviously that will remove the capability you need. For my forms that use rich text I have the box wider so the tool box is on two lines and taller to show more lines of editable text. This tool bar is in a table-row table-data with a class of k-editor-toolbar-wrap. So even using CSS, you will only be able to move it around some but not to the ribbon which would be preferred.

But maybe this is of some help. You can select the tabledata that holds the tool bar and hide it with the following. Just go to form or layout settings and put this in the Custom Javascript box.

NWF$(document).ready(function(){ 

NWF$(".k-editor-toolbar-wrap").hide();

} );

Now the trick is to find the appropriate function to make it visible again. Maybe moving it to the left is easier with CSS so that it is always there? or when you click in the box you then show it. Since these textareas use iframes, it will be tricky to catch an onfocus or click event.

Badge +8

I'm having the opposite of your problem... trying to show it 😛

You can try to go to your SharePoint > List > List setting > Edit Column and change to

Userlevel 5
Badge +13

It needs to be rich text though, as they need to be able to embed photos, links, etc. I just don't need the extra height the bar adds as there are several rich text fields on this form.

Badge +5

Just tried the code suggested here to solve the same problem (hide the Rich text ribbon):

NWF$(document).ready(function(){ 

NWF$(".k-editor-toolbar-wrap").hide();

} );

But when I add that into the Custom Javascript in Form settings then preview I now get a message that the Form application is out of date and needs to be updated and page does not display.

Userlevel 5
Badge +13

That typically indicates an error or problem in your Javascript. Unfortunately I'm not well versed in js to assist with that

Userlevel 7
Badge +17

If it still doesn't work after a publish, I once had this error and it happen to be an issue in O365. It lost track of the app trust and I had to remove the app and add it back in. But don't try that out until last resort.

Is there a way to hide the rich text ribbon that does not use javascript or require changing the column type in the list settings?

Reply