Layout issues…

  • Resolved Andi5

    (@andi5)


    10 years, 5 months ago

    I have installed the plugin and built a very simple form that calculates potential profit based on a nonprofit’s membership numbers.

    The form is at http://www.causefunders.com/how-it-works/
    Password is cftravel3
    (we are just using this to minimize viewing before we launch in a couple days)

    As you will see there is a large amount of unused space to the right of the form fields. I would ideally like the labels and forms centered in the middle, with either the label to the left of the input field or stacked above. However, I want an equal amount of padding around the entire form… perhaps around 20px.

    I am attaching the CSS code I am using for its current state below. Please advise.

    /*CALCULATOR EDITS*/

.cp_cff_professional {
background: transparent linear-gradient(to bottom, #0a84c1 0%, #00306e 100%) repeat scroll 0% 0% !important;
}

.cp_cff_professional #fbuilder input[type="text"] {
font-size:24px !important;
font-weight:bold !important;
color:#8e8e8e !important;
padding-top: 7px !important;
padding-bottom: 7px !important;
border-radius: 10px !important;
background: transparent linear-gradient(to bottom, rgb(227, 227, 227) 0%, rgb(247, 247, 247) 8%, rgb(255, 255, 255) 100%) repeat scroll 0% 0% !important;
}

.cp_cff_professional #fbuilder label {
    width:40%  !important;
}

    https://ww.wp.xz.cn/plugins/calculated-fields-form/

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

    (@codepeople)

    10 years, 5 months ago

    Hi,

    Please, select the fields in the form, and in their “Field Size” attribute, select the “Large” choice.

    Best regards.

    Thread Starter Andi5

    (@andi5)

    10 years, 5 months ago

    I did so and it solved the issue of the empty space to the right. However, I would like for the field input space to be shorter (right now it takes up 2/3 of the frame) and the label space to be longer (The label I want to use is longer than any potential inputs). I would also love it if the entire calculator could be slightly narrower in the end.

    Is there a way to edit the CSS to where this is possible?

    Plugin Author codepeople

    (@codepeople)

    10 years, 5 months ago

    Hi,

    Yes of course, you simply should vary the of CSS rules for “width” of the styles definitions:

    #fbuilder .left_aligned .fields label{float:left;width:31%;}
    #fbuilder .left_aligned .fields .dfield{float:left;width:65%;}

    In the “/wp-content/plugins/calculated-fields-form/css/stylepublic.css” file.

    Tip: Remember to clear the browser’s cache after edit the online files.

    Best regards.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Layout issues…’ is closed to new replies.