Forms
Morning,
I have created a number of forms and have noticed that I am unable to set the size of the fields. Well, I can set the field sizes (textboxes and paragraph) and they do not change.
I have attached two images, one of how it is designed and another of how it appears. I have no CSS that should be affecting the styling of the form. So I am a little bit confused. The drop down box is also not showing as I expect with the label above the control.
Anybody got any ideas?
Hello James Greaves,
You are supposed to set the size of the fields in your site theme. You can set different classes to the form fields in the Forms Editor (the editor which you create and edit the form in). After that, when you add the form to a page (in Page Editor, the editor used to manage pages) you can write CSS in the site theme to style the form as you like. You can read more on themes in the Designer's guide.
We will add the option to add a theme to a form (in Forms Editor) in one of the next Sitefinity releases.
Let us know if you need further help.
Kind regards,
Katia
the Telerik team
Thanks for the reply,
I am a little confused still, I have set a class and given it a width but this still does not change the size of the text box.
The in-built option to change the textbox size does not work and CSS as far as I am aware will only change the size of the wrapper around the text box.
All I want to do is increase the length of the text boxes for the minute. If this is a CSS thing, woul dyou mind sending me a class I can try out?
Cheers,
The size you specify in the management section sets the size of the containing div element. What I've done is style based on the container, since my forms are fairly simple (single-column), like this:
/* sfFieldWrp is a Sitefinity class surrounding the input */
#contactForm .sfFieldWrp input
width
:
97%
;
font-size
:
14px
;
padding
:
4px
;
/* sfTxtLbl is a Sitefinity class applied to the label element */
#contactForm .sfTxtLbl
font-weight
:
bold
;
font-size
:
14px
;
Cheers Josh.
It had been a long day! Exactly what I wanted, no idea why I didn't think to use FireBug?!
Thanks again
Hello Josh,
I have tried your codes for the text box and label but for the text area (.sfDescription ) and submit button (.sfFormSubmit sfSubmitBtnLarge) the CSS is not working. Can you please help me with it.
Thank you
Vishika
Hi Vishika,
What you can do is add your custom CSS classes for each of your form fields by editing the form in Sitefinity backend then edit the properties of the controls you want to style. On the appearance tab you can add custom CSS class as it shown in the attached screenshot. For example custoDescription, customFormSubmit and then apply the same CSS as Josh suggested:
/* sfFieldWrp is a Sitefinity class surrounding the input */
.custoDescription
width
:
97%
;
font-size
:
14px
;
padding
:
4px
;
/* sfTxtLbl is a Sitefinity class applied to the label element */
.customFormSubmit
font-weight
:
bold
;
font-size
:
14px
;