CSS Code please

  • Profile Image
    advancemoves
    Asked on March 06, 2012 at 08:40 AM

    Please can you amned the injected css code for this form to move the html free text 'JRC' to the right, close to the left hand edge of the text boxes labelled 'From BOX ID' and 'To BOX ID'. I would like the text box values entered by the user to look like an extension of the html free text

     

    Thanks

  • Profile Image
    abajan
    Answered on March 06, 2012 at 09:34 AM

    Please add the following rules to the current injected CSS:

    #id_35, #id_36 {
    padding-right: 0;
    }

    #id_31, #id_32 {
    padding-left: 0;
    }

    If you need additional help with the form, do let us know.

  • Profile Image
    advancemoves
    Answered on March 06, 2012 at 09:45 AM

    sorry I have been swapping out autocomplete fields for text fields and i think may be this would affect the above code?  would you mind taking another look?  am I right i thinking the #id_xx components of this code reference form fields?  if so these may no lomger be in exsistence?

     

    Sorry to be a pain

  • Profile Image
    abajan
    Answered on March 06, 2012 at 10:11 AM

    Your assumption is correct on both points: #id_xx reference fields and as such, those having IDs of id_31 and id_32 no longer exist. #id_39 and #id_40 will need to be substituted for #id_31 and #id_32 in the second rule so that it reads as follows:

    #id_39, #id_40 {
    padding-left: 0;
    }

    Although it's true that the form builder now provides assistance in discovering the ID of a field (Show Properties > Field Details) you will find tools like Firebug to be invaluable in many instances.

    And you're not being a pain! :)

  • Profile Image
    abajan
    Answered on March 06, 2012 at 11:15 AM

    If you want the fields even closer, the CSS can be altered as below:

    #cid_35, #cid_36{
    margin-top: 16px !important;
    }

    #id_35, #id_36,
    #text_35, #text_36 {
    padding-right: 0;
    }

    #id_39, #id_40 {
    padding-left: 0;
    }

    This illustrates my point about Firebug perfectly because you will find neither #text_35 nor #text_36 in the "Show Properties" window for the free text elements. As a matter of fact, there are no field details available for free text elements!

  • Profile Image
    advancemoves
    Answered on March 06, 2012 at 11:25 AM

    great, that's exactly how i wish to see these html texts.  I will download and play with firebug but for now would you mind applying the same formatting to the 3 html free text elements in my form?

    Thanks

  • Profile Image
    Mike_T
    Answered on March 06, 2012 at 05:53 PM

    You can use the following custom CSS code for your form:

    #cid_35, #cid_36, #cid_52, #cid_53, #cid_54 {
    margin-top: 16px !important;
    }
    #id_35, #id_36, #id_52, #id_53, #id_54, #text_35, #text_36, #text_52, #text_53, #text_54 {
    padding-right: 0;
    }
    #id_39, #id_40, #id_38, #id_41, #id_48 {
    padding-left: 0;
    }

    Please feel free to contact us if you need any further assistance.