CSS styling for individual fields

rss

Posted by srallen4 - Oct 15 ’13 at 10:34

Looking throught your documentation, I was able to set the width off all fields using the following:

.fd_control input[type="text"] {width: 100px;}

 

However, some fields need to be different sizes depending of the content.  I tried giving the field a CssClass and then using the CSS editor to set the class, but it is ignored in the browser.

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 8 years 2 months 8 days
    #1 by Dmitry Kozlov Oct 16 ’13 at 03:13

    Please, try to use !important directive in your CSS definition. Example: I set CssClass of my field in my-field and put the following CSS into CSS-editor of Forms Designer:

    .my-field input[type="text"] {width: 200px !important; }
    
  • srallen4
    Member
    Member for: 8 years 1 month 12 days
    #2 by srallen4 Oct 29 ’13 at 08:51

    This did not work for all fields.

     

    How do you target People Picker widths and textarea widths?

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 8 years 2 months 8 days
    #3 by Dmitry Kozlov Oct 30 ’13 at 04:37

    [#2]: Please, define CSS-class for them as in example above, my-field in my case. Place the following CSS-code into CSS-editor:

     
    /* People picker */
    .my-field .ms-usereditor {
      width: 200px !important; 
    }
    
    /* Enhanced rich text */
    .my-field .ms-rtefield {
      min-width: 200px !important;
      width: 200px !important;
    }
    
    /* Multiline plain text */
    .my-field textarea {
      width: 200px;
    }
    
  • meirinha
    Member
    Member for: 7 years 10 months 11 days
    #4 by meirinha Feb 6 ’14 at 09:53

    Hello dimitri,

    i'm tryng to define the width for 50px, with your code but the text field dont resize

    Solutions?

  • meirinha
    Member
    Member for: 7 years 10 months 11 days
    #5 by meirinha Feb 6 ’14 at 10:07

    [#4]: Done, have a type error

  • craigwat11
    Member
    Member for: 7 years 8 months 19 days
    #6 by craigwat11 May 13 ’14 at 11:17

    [#5]: Hi guys,

    Is it possible to set a CSS for a text field to automatically convert text into Upper case?

    Many thanks

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 8 years 2 months 8 days
    #7 by Dmitry Kozlov May 14 ’14 at 04:44

    [#6]: Sure, please, assign a CSS class to your field e.g. my-field and define it in CSS-editor following way:

    .my-field input {
    	text-transform: uppercase;
    }
    
Displaying 1 to 7 of 7 messages