+1-888-365-2779
Try Now
More in this section

Forms

7 posts, 1 answered
  1. James Greaves
    James Greaves avatar
    25 posts
    Registered:
    21 Oct 2009
    11 Mar 2011
    Link to this post
    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?
  2. Katia
    Katia avatar
    194 posts
    Registered:
    01 Jul 2016
    16 Mar 2011
    Link to this post
    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
  3. James Greaves
    James Greaves avatar
    25 posts
    Registered:
    21 Oct 2009
    17 Mar 2011
    Link to this post
    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,
  4. Josh Anderson
    Josh Anderson avatar
    48 posts
    Registered:
    15 Dec 2005
    17 Mar 2011
    Link to this post
    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; }

    You may want to consider using FireBug on Firefox to inspect the elements created by Sitefinity, noting how they change with changes in the management settings.

    Josh
    Answered
  5. James Greaves
    James Greaves avatar
    25 posts
    Registered:
    21 Oct 2009
    18 Mar 2011
    Link to this post
    Cheers Josh. 

    It had been a long day!  Exactly what I wanted, no idea why I didn't think to use FireBug?!

    Thanks again
  6. Vishika
    Vishika avatar
    4 posts
    Registered:
    09 Jan 2014
    09 Jan 2014
    Link to this post
    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
  7. Strahil Strahilov
    Strahil Strahilov avatar
    24 posts
    Registered:
    06 Nov 2014
    10 Jan 2014
    Link to this post
    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; }

    I believe this should help you. If this does not help, please send more information about your Sitefinity version and how you are adding your custom CSS on the page.

    Regards,
    Strahil Strahilov
    Telerik
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
7 posts, 1 answered