Lightbox Form is too small

  • Profile Image
    Hannoduno
    Asked on February 09, 2012 at 04:26 PM

    Hey,

     

    I would like to embed my form as a lightbox. I got it working, but the Text, especially the tooltips are way too small. I tried changing the Font-Size, which didn't affect the tooltip size. I also tried to resize the lightbox-window, but that did not strech out the form, just addes empty space around the form. Is there a way to do it? 

    Popups look great in the preview, but unfortunately I can't seem to get them to work.

     

    Thanks in advance!

  • Profile Image
    abajan
    Answered on February 09, 2012 at 07:58 PM

    The selector for the content of all hover texts (tooltips) in a form is
    .form-description-content. So, if you want to change the size of the text to 12 pixels, you would inject the following rule:

    .form-description-content {
    font-size: 12px;
    }

    Targeting specific tooltips would require more specificity. Inserting the particular field's ID, followed by a space, before the selector would be necessary. For instance, if you wanted to change the font size of just the tooltip for the "Full Name" field in a form containing other tooltips and that field's ID is id_3, you would edit the rule as follows:

    #id_3 .form-description-content {
    font-size: 12px;
    }

    This form uses the above rule to illustrate my point. (The rule can be seen if you view the page's source.)

    Tip: Firebug is quite useful when trying to figure out which selector should be used to affect a particular element's style. 


    Changing the Lightbox's Dimensions

    Those can either be changed when customizing the lightbox in the Embed Form Wizard or by editing the values of the height and width in the code after copying it from the wizard.

    Tips:

    * Give the width a value about 15 pixels more than the form's actual width. Otherwise a horizontal scrollbar will appear when the lightbox loads.

    * The default height may initially appear to leave too much space at the bottom of the form but if there are fields (like "Required" and "Email") which will trigger error messages if not completed or completed incorrectly, those messages will cause the form's height to expand.


    Styling the LightBox's Title

    That information can be found in the links provided by AtacanC in this thread.