CSS styling for individual fields

[srallen4]

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]

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:

Code: Select all

.my-field input[type="text"] {width: 200px !important; }

[srallen4]

This did not work for all fields.

How do you target People Picker widths and textarea widths?

[Dmitry Kozlov]

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

Code: Select all

/* 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]

Hello dimitri,

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

Solutions?

[meirinha]

Done, have a type error

[craigwat11]

Hi guys,

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

Many thanks

[Dmitry Kozlov]

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

Code: Select all

.my-field input {
	text-transform: uppercase;
}