Support » Plugin: Calculated Fields Form » Struggling to set the column widths

  • Resolved fmfutbolmanager

    (@fmfutbolmanager)


    Hey guys, love the plugin! I’m having a little difficulty though. I’m trying to adjust the width of some text contained within instruct. Text but I cannot work it out (I’m new to this!)

    See below, I have some fields that require input, but there is a big gap between the input and the text, I want to close this gap to about 10px or something like that.

    Image example

    Can you help?

    Many thanks.

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @fmfutbolmanager

    In the public websites, not only the styles in the plugin affect the generated forms, the styles in the theme active also take place. Please, send me the link to the page where the form is inserted to check the margin and padding css rules applied by the theme.

    Best regards.

    Thread Starter fmfutbolmanager

    (@fmfutbolmanager)

    Wow that was a quick reply!

    Sure, it’s below, however, these changes I’ve not made to the public calculator yet. They’re in a test version.

    Plugin Author codepeople

    (@codepeople)

    Hello @fmfutbolmanager

    I’m sorry, but you don’t have included the URL to the page where the form is inserted.

    Best regards.

    Thread Starter fmfutbolmanager

    (@fmfutbolmanager)

    I added the URL and can see if if I edit the post, but it’s not letting me post it. I’ll try again:

    https://theresonlyoneball.com/2020/01/04/5-star-coach-calculator-for-football-manager-2020/

    Plugin Author codepeople

    (@codepeople)

    Hello @fmfutbolmanager

    I don’t know exactly how or where you want to display the instructions for users, but these texts are expanded to the width of the form. However, if you want to reduce the width of these texts, you can enter the following style definition:

    
    #fbuilder span.uh{width:500px;}
    

    into the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png). Of course, with the width you prefer.

    Best regards.

    Thread Starter fmfutbolmanager

    (@fmfutbolmanager)

    Thank you again for the quick reply. That seemed to send the text off to the right, rather than bring it closer to the input fields. Can you see this?

    https://theresonlyoneball.com?cff-form=10

    I read some documentation that said to force them into 12 blocks here: https://cff.dwbooster.com/blog/2019/01/06/columns but I couldn’t get that working.

    Plugin Author codepeople

    (@codepeople)

    Hello @fmfutbolmanager

    First, you should to know the form’s width is the width of its container. If the forms is inserted directly in the page’s body, the width of the form will be the page’s width.

    In the form you have assigned to the fields the special class name: “column2”, this means that every field occupies a 50% of the form’s width, but for the fields at left was selected the “Medium” option for the “Field Size” attribute.

    Solution:

    * Remove the styles recommended in the previous entry.

    * Select the “Large” option for the “Field Size” attribute of the fields at left.

    * Insert the form into a container (a div tag or similar) with the width reduced.

    I did all of these steps at runtime, using the developers console of the browser, to show you how the form would look. Please, watch the video visiting the following link:

    https://wordpress.dwbooster.com/customdownloads/2020/05/26/video-o.mp4

    Best regards.

    Plugin Author codepeople

    (@codepeople)

    Hello @fmfutbolmanager

    First, you should to know the form’s width is the width of its container. If the forms is inserted directly in the page’s body, the width of the form will be the page’s width.

    In the form you have assigned to the fields the special class name: “column2”, this means that every field occupies a 50% of the form’s width, but for the fields at left was selected the “Medium” option for the “Field Size” attribute.

    Solution:

    * Remove the styles recommended in the previous entry.

    * Select the “Large” option for the “Field Size” attribute of the fields at left.

    * Insert the form into a container (a div tag or similar) with the width reduced.

    I did all of these steps at runtime, using the developers console of the browser, to show you how the form would look. Please, watch the video visiting the following link:

    https://wordpress.dwbooster.com/customdownloads/2020/05/26/video-o.mp4

    Best regards.

    Thread Starter fmfutbolmanager

    (@fmfutbolmanager)

    Thank you so kindly for your persistence in helping me.

    – I removed the previous code: #fbuilder span.uh{width:500px;}
    – I changed the input field to Large
    – The fields were already in a div tag so I didn’t need to change that
    – I added #fbuilder .column2:nth-child(odd){width:40%;margin-right:3%;} to the customise form design field on form settings. But this doesn’t seem to have made a difference.

    I made a video of what I have done. It might make it easier to diagnose my issue:
    https://theresonlyoneball.com/screen-recording-2020-05-26-at-11-15-16-mov/

    See:
    https://theresonlyoneball.com?cff-form=10

    Plugin Author codepeople

    (@codepeople)

    Hello @fmfutbolmanager

    Please, use the !important; modifier in the following style:

    
     #fbuilder .column2:nth-child(odd){width:40% !important;margin-right:3%;}
    

    Best regards.

    Thread Starter fmfutbolmanager

    (@fmfutbolmanager)

    Perfect, thank you.

    However, the input fields I only need medium size with the explanation text moving over to the left to be the same distance from the field as it is now, does that make sense?

    Plugin Author codepeople

    (@codepeople)

    Hello @fmfutbolmanager

    I’m sorry, I don’t understand your current question. I’ve given you instructions based on your current form’s structure, but if you change the form’s structure, evidently the styles to apply would be different. Please, read the following post in the plugin’s blog:

    https://cff.dwbooster.com/blog/2020/01/12/form-design/

    Best regards.

    Thread Starter fmfutbolmanager

    (@fmfutbolmanager)

    Hey, sorry perhaps I didn’t explain myself. It’s possible, it is early.

    The current form has 3 medium number fields with 3 Instruct. Text fields all within a div tag. Your video said to change the input fields to Large, but I want them Medium. I’ve mocked up how I want this to look:

    https://imgur.com/OtyQRSk

    I’ve only mocked up the first box, but they should all be the same. Does this make sense?

    Thanks again for helping and supporting me.

    Plugin Author codepeople

    (@codepeople)

    Hello @fmfutbolmanager

    In this case, you should not use the columns attribute in the DIV field, you should use the second alternative, the col-… class names.

    1) Select the “1 column” option for the “Columns” attribute in the Div field.

    2) Configure the fields at left as large, and enter the class name:

    col-sm-4

    into their attributes: “Add CSS Layout Keywords”

    3) Enter the special class names:

    col-sm-7 col-sm-offset-1

    into the “Add CSS Layout Keywords” attributes of the fields at rigth.

    and that’s all.

    More information in the following post of the plugin’s blog:

    https://cff.dwbooster.com/blog/2019/01/06/columns

    Best regards.

    Thread Starter fmfutbolmanager

    (@fmfutbolmanager)

    Hey @codepeople

    You know, I tried this before and they key thing was changing the div tag to 1 column. I left it on 2 which explains why it didn’t work before. However, something slightly wrong with this. I’m sure it’s something really simple that I messed up?

    https://theresonlyoneball.com?cff-form=10

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Struggling to set the column widths’ is closed to new replies.