Nintex Forms: Override default font family and size for INPUT into a multiline textbox

  • 13 April 2016
  • 6 replies
  • 14 views
C
Badge +3

In Nintex Forms, the multiline text box - with the form in New/input mode - by default applies internal style Paragraph with 12pt Body font size, which is way too large for my purposes. I want to set the default font family and the font size for inputting text into a particular multiline textbox on my form to Segoe UI, 8pt. I have tried adding a style entry to the form Settings (Settings/Custom CSS), as follows

.nf-mystyle

{

font-family: Segoe UI;

font-size: 8pt;

}

...and I reference this .nf-mystyle in the Formatting/CSS options of the multiline textbook control instance on my form. However, that does not seem to work.

Note that my issue is with the default INPUT font family and size: I can control the formatting of the OUTPUT font (with the form in read mode) just fine, by clicking on the control in Forms Designer and simply selecting the desired font and size.

The community's assistance would be greatly appreciated.

6 replies

P
Badge +8

Hello Robert van Raamsdonk​,

What you'd want to do is apply your styles to the text-area element as opposed to the container class itself. Assuming you've got a multi-line text box where the CSS Class is set to test, here's what you'd need to control the input font-size:

textarea.test {
    font-size: 6px !important;
}
Good luck to you sir – please mark the response as correct if this works for you!
Patrick

                                
            
                        


    
    

                    
                                    
                            
            
            

                                        

                        




                        




    
    


        





        

        

                            

                    C
                

                    

                    

            
    


        

                    

    
                
    

        Badge
                    +3
            


            

    
    

        
    


    
    

        
@Patrick Abel, thanks much for the quick response. I'm not fluent in CSS, so exactly where do I put your CSS snippet? I'm assuming in the Form settings/Custom CSS section, correct? I'm not certain about the format either. Is this correct:
.text-area.test {
font-size: 8px;
}
text-area with a hyphen? A period in front? I need some hand-holding I'm afraid.

                                
            
                        


    
    

                    
                                    
                            
            
            

                                        

                        




                        




    
    


        





        

        

                            

                    P
                

                    

                    

            
    


        

                    

    
                
    

        Badge
                    +8
            


            

    
    

        
    


    
    

        
Not a problem Robert van Raamsdonk​ – that's why we've got a community!
It's textarea without a hyphen, because that's the actual HTML input control that Nintex will produce on your form at run time (additional info on a textarea).
In CSS syntax, the period between textarea and your class name just denotes a styles application to a class (as opposed to an ID). So by applying those styles to textarea.myClass (no leading period) you're applying those styles to a textarea element of class "myClass".
Does that get you squared away?
You'll just want to paste the previously mentioned CSS into Form Settings > Custom CSS.

                                
            
                        


    
    

                    
                                    
                            
            
            

                                        

                        




                        




    
    


        





        

        

                            

                    C
                

                    

                    

            
    


        

                    

    
                
    

        Badge
                    +3
            


            

    
    

        
    


    
    

        
Patrick, thanks a lot, I'm marking your answer as Correct even though it didn't - directly - solve my issue. Your CSS works a treat on 'regular' multiline textboxes. However, mine was connected to a SP multiline textbox column that had the Enhanced Rich Text option enabled. And as long as that stayed enabled (or the 'normal' Rich text option), your CSS would NOT override the input font family and size. As soon as I changed the SP column configuration back to Plain text, however, things started working. So, I reverted to that configuration, but in case my client insists on having the rich text enabled fields, I'm still curious if there is another way to override the rich text style settings through CSS or other means.

                                
            
                        


    
    

                    
                                    
                            
            
            

                                        

                        




                        




    
    


        





        

        

                            

                    P
                

                    

                    

            
    


        

                    

    
                
    

        Badge
                    +8
            


            

    
    

        
    


    
    

        
Interesting. I'll have to setup a sample using Enhanced Rich Text and see if a similar CSS solution will work in that case. If I come up with something, I'll let you know. happy.png

                                
            
                        


    
    

                    
                                    
                            
            
            

                                        

                        




                        




    
    


        





        

        

                            

                    S
                

                    

                    

            
    


        

                    

    
                
    

        Badge
                    +4
            


            

    
    

        
    


    
    

        
Hi Robert, I am struggling with this as well.  Have you come across any solutions for the rich text multi-line fields?  

                                
            
                        


    
    

                    
                                    
                            
            
            

                                        

                        




            
                

          

                

                    
                                            

                    

                        
                
                        
  
Reply










                    

                

                                

        

    


            

                                      

                                                                                                
            








View our Community Site Map
Nintex Community Sitemap


        

                        

    
    





    


                                        

                                                        

            
        
    






                        
Terms & ConditionsCookie settings