How do i change the css style of a date field in Nintex Forms?

  • 28 November 2017
  • 6 replies
  • 11 views
M
Badge +1

i want to add a border around the date field in Nintex forms as it is possible for title fields.

211060_pastedImage_1.png

Title fields and all other controls have a css class "ms-rtestate-field" which will set this border correct, but the date fields have no specific class or id i can use. Also if add an css class in the control setting in Nintex Forms, the class isn't available in the code.

211071_pastedImage_2.png

211072_pastedImage_3.png

Does anyone has an idea how i can add a border to the date field?

6 replies

E
Userlevel 5
Badge +14

you can simply configure it in control's settings

211161_pastedImage_1.png

M
Badge +1

Hi ,

i know that i can configure the border in the control settings, but this is not the border i want. If i configure it in the control settings, the border looks like this:

211196_pastedImage_1.png

But i want the border to look like this:

211197_pastedImage_2.png (the red border is painted)

Within other controls in Nintex Forms, i can add a css class on "Control CSS class", but for date controls it has no affect on the code. If you add a css class to the control, publish the form and check the code within DOM Explorer, the class is not available in the code.

E
Userlevel 5
Badge +14

then try following

- configure a custom 'CSS class' for datepicker control (eg. xCSSClass)

- add a style definition like following to form's 'Custom CSS'

.xCSSClass .nf-date-picker{
   border: 2px solid blue !important;
}
‍‍‍‍‍‍‍

‌ ‌ ‌ ‌

M
Badge +1

i already did this with no success.

The CSS class "xCSSClass" is not written in the code and also the modification on "nf-date-picker" has no effect.

Fyi:

I am using a site workflow with an start form (nintex forms for nintex workflow).

MegaJerk
Userlevel 5
Badge +14

Marian's rule should totally work, even if it's a site workflow starting form, as long as it's a Nintex Form, it shouldn't be different. 

Make sure that you have the class set up correctly like (make sure that there is not a period (.) in front of the class name when it's typed into the CSS class input!): 

211195_pastedImage_1.png

and that your CSS is in the right place: 

211200_pastedImage_4.png

Saving those settings should produce instant results in your Form Developer Environment:
211201_pastedImage_5.png

M
Badge +1

Hi ‌,

thanks, now it works! I wrote the custom css class in "Control CSS Class" and not "CSS Class", misunderstood marians description. I will mark Marians answer as correct, because she first replied the correct answer. 

Thanks a lot!

Reply


View our Community Site Map

Nintex Community Sitemap
Terms & ConditionsCookie settings