Responsive Nintex Form >> Individual Control Styling >> Attachment Control

  • 20 March 2020
  • 9 replies
  • 37 views

Badge +5

Hi Team,

I have a Responsive Nintex form and want to Style an individual control. Like Attachment control. I want to make Font Bold and Little Big Font of Attachment control.

How we can do this.

6884i79D883964B250E71.png


9 replies

Badge +5

1 Point also i want to Increase the Font Size of Add Attachment Link

Badge +8

I don´t think there is a way in the responsive form designer to control the font weights and sizes individually.

Using this CSS I was able to modify the font weights. Using a script editor on a page, you could apply the styles to you form as well (however only for this one page)

/* Control description */
.nf-attachment-control label.control-title {
    font-weight: bold;
}

/* Individual Attachments */
.nf-attachmentsTable a {
    font-weight: bold;
}

/* Add Attachment link */
.nf-attachmentsLink a {
    font-weight: bold;
}
Badge +5

Thanks for you reply, but i belive we can not add the script editor on a page of Nintex Form (Redirect to this page when click on New button from SharePoint list), below is the Screen Shot of the Responsive Form. in which we want to increase the Font size.

6890i1664111360A5F34F.png

Badge +8

Okay so I got it to work in my environment using a calculated value which uses js to apply the style.

  1. Add a calculated Value to your form
  2. Add following formula to it:
    (function applyStyle() { var style = document.createElement("style"); style.textContent = "/* Control description */ .nf-attachment-control label.control-title { font-weight: bold; }  /* Individual Attachments */ .nf-attachmentsTable a { font-weight: bold; }  /* Add Attachment link */ .nf-attachmentsLink a { font-weight: bold; }"; document.body.appendChild(style) })()
    The formula defines a function called "applyStyle" and immediately calls it. You can adjust the css as needed.
  3. Hide the calculated value using rules

Tested in IE and Chrome

SharePoint 2013

Nintex Forms Version: Nintex Forms 2013 ( 2.11.5.0 )

 

 

Badge

Hi @Tarf ,

I'm getting the "The formula contains a syntax error or is not supported." error when trying to create a Calculated Column using your formula; although opening it in a script editor the syntax seems correct. Did you have to make any changes to get the calculated field to work?

Badge +8

Hi @SeanM,

you do not need to create a calculated column on your list but a calculated value on your form.

The value then applies your css for the form.

 

 

Badge

Thanks for clarifying @Tarf and also the quick reply; apologies I should have read your first message properly!

 

Still doesn't seem to be applying the style, just returning "#Value!#" on the form; I'll spend some more time on it see how I get on.

Badge

Thanks for the tip and help @Tarf! Have got it working now, it was probably actually working initially earlier but the sytle I was applying was being overridden, adding "!important" did the trick.

Badge +8

Hi @SeanM,

glad to hear it worked!

 

Reply