Page 1 of 1
CSS styling for individual fields
Posted: 15 Oct 2013
by 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.
Re: CSS styling for individual fields
Posted: 16 Oct 2013
by 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; }
Re: CSS styling for individual fields
Posted: 29 Oct 2013
by srallen4
This did not work for all fields.
How do you target People Picker widths and textarea widths?
Re: CSS styling for individual fields
Posted: 30 Oct 2013
by 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;
}
Re: CSS styling for individual fields
Posted: 06 Feb 2014
by meirinha
Hello dimitri,
i'm tryng to define the width for 50px, with your code but the text field dont resize
Solutions?
Re: CSS styling for individual fields
Posted: 06 Feb 2014
by meirinha
Done, have a type error
Re: CSS styling for individual fields
Posted: 13 May 2014
by craigwat11
Hi guys,
Is it possible to set a CSS for a text field to automatically convert text into Upper case?
Many thanks
Re: CSS styling for individual fields
Posted: 14 May 2014
by 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;
}