CSS styling for individual fields

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

Admin

Member for: 9 years 2 months 19 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; }
```
link flag
srallen4

Member

Member for: 9 years 1 month 23 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?

link flag

Dmitry Kozlov

Admin

Member for: 9 years 2 months 19 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;
}

link flag

meirinha

Member

Member for: 8 years 10 months 22 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?

link flag
meirinha

Member

Member for: 8 years 10 months 22 days

#5 by meirinha Feb 6 ’14 at 10:07

[#4]: Done, have a type error

link flag
craigwat11

Member

Member for: 8 years 9 months

#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

link flag
Dmitry Kozlov

Admin

Member for: 9 years 2 months 19 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;
}
```
link flag

Displaying 1 to 7 of 7 messages

CSS styling for individual fields

Related threads